[role="tab"] {
  cursor: pointer;
}

.tab-buttons[role="tablist"] {
  display: grid;
  grid-auto-columns: 1fr;
  gap: spacer(3);

  &.scrollable {
    display: grid;
    grid-auto-columns: max-content;
    padding-left: $button-hover-transform-length;
    padding-top: $button-hover-transform-length;
    padding-bottom: spacer(4);
    overflow-x: auto;
  }

  [role="tab"] {
    @extend %button, %select-button;
    cursor: pointer;

    &[aria-selected="true"] {
      @extend %select-button-active;
    }

    > img {
      object-fit: cover;
      height: 100%;
      border-radius: border-radius(1);
    }

    & > .icon {
      font-size: $big-icon-size;
    }
  }

  &.small {
    [role="tab"] {
      flex-direction: column;
      align-items: center;
      text-align: center;

      & > .icon {
        font-size: 1em;
      }
    }
  }

  @include breakpoint-up(sm, true) {
    grid-auto-flow: column;
  }
}

.tab-pills[role="tablist"] {
  display: flex;
  gap: spacer(3);

  [role="tab"] {
    padding: spacer(2) spacer(3);
    border: solid $border-width transparent;
    border-radius: border-radius(3);
    flex-shrink: 0;

    &:hover {
      border-color: $border-color;
    }

    &[aria-selected="true"] {
      @include bg-color(filled);
      border-color: $border-color;
    }
  }
}

[role="tabpanel"] {
  @include bg-color(filled);
  border: $border;
  border-radius: border-radius(1);
  padding: spacer(4);
  margin-top: spacer(4);
}
