@use "../../variables/borders" as bordersVars;
@use "../../tools/a11y";
@use "../../tools/borders";
@use "../../tools/colour";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-tabs {
  @include spacing.space-above;

  &__list {
    margin: 0;
    padding: 0;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: spacing.space(0.5);

    position: relative;
    z-index: 2;

    list-style: none;
  }

  &--small &__list {
    gap: spacing.space(0.25);
  }

  &__button {
    padding: bordersVars.$thick-border-width 0;

    position: relative;

    text-align: center;

    background: transparent;

    border: none;

    border: 1px transparent solid;
    border-bottom: none;

    border-radius: bordersVars.$rounded-border-radius
      bordersVars.$rounded-border-radius 0 0;

    cursor: pointer;

    &:active {
      @include a11y.focus-outline;
    }

    &[aria-selected="true"] {
      padding-top: 0;

      @include colour.colour-border("keyline");

      &::after {
        content: "";

        height: 1px;

        position: absolute;
        top: 100%;
        right: 0;
        left: 0;

        @include colour.colour-background("background");
      }
    }
  }

  &__button-inner {
    padding: spacing.space(0.5) spacing.space(0.75);

    display: block;

    text-decoration: underline;

    @include colour.colour-font("font-dark");
  }

  &--small &__button-inner {
    padding: spacing.space(0.25) spacing.space(0.5) spacing.space(0.125);

    @include typography.font-size(16);
  }

  &__button:hover &__button-inner,
  &__button:focus-visible &__button-inner {
    @include typography.interacted-text-decoration;
  }

  &__button[aria-selected="true"] &__button-inner {
    text-decoration: none;

    @include colour.thick-keyline-accent(top);
    border-radius: #{bordersVars.$rounded-border-radius - 1px}
      #{bordersVars.$rounded-border-radius - 1px} 0 0;
  }

  &__items {
    display: flex;
    flex-direction: column;
    gap: spacing.space(2);

    position: relative;
    z-index: 1;
  }

  &__item {
    border-radius: 0 0 bordersVars.$rounded-border-radius
      bordersVars.$rounded-border-radius;
  }

  &--interactive &__item {
    padding: spacing.space(1);
    @include colour.colour-border("keyline", 1px, solid);
  }

  &--tint#{&}--interactive &__button[aria-selected="true"],
  &--tint#{&}--interactive &__button:hover &__button-inner,
  &--tint#{&}--interactive &__button:focus-visible &__button-inner,
  &--tint#{&}--interactive &__items {
    @include colour.tint;
  }
}