@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;

    position: relative;
    z-index: 2;

    list-style: none;
  }

  &__button-wrapper {
    display: flex;
  }

  &__button {
    position: relative;

    font-weight: inherit;

    text-align: center;

    background: transparent;

    border: none;

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

    cursor: pointer;
    @include borders.rounded-border;

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

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

      text-decoration: none;

      @include colour.colour-border("keyline");
      border-radius: bordersVars.$rounded-border-radius
        bordersVars.$rounded-border-radius 0 0;

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

      &:focus {
        @include borders.rounded-border;
      }
    }
  }

  &__button-inner {
    margin: spacing.space(0.25) spacing.space(0.25)
      calc(spacing.space(0.25) + 1px);
    padding: spacing.space(0.375) spacing.space(0.75);

    display: block;

    text-decoration: underline;

    @include colour.colour-font("font-base");

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

    @include borders.rounded-border;
  }

  &--small &__button-inner {
    margin: spacing.space(0.125) spacing.space(0.125)
      calc(spacing.space(0.125) + 1px);
    padding: spacing.space(0.25) spacing.space(0.5);

    @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;

    background: transparent;

    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;

    &:has(:focus-visible) {
      z-index: 3;
    }
  }

  &__item {
    margin-top: -1px;

    border-radius: 0.1px 0.1px #{bordersVars.$rounded-border-radius}
      #{bordersVars.$rounded-border-radius};

    @include a11y.focus-indicator-only-on-keyboard-focus;
  }

  &--interactive &__item {
    padding: spacing.space(1);

    @include colour.colour-border("keyline", 1px, solid);
  }

  @include colour.on-forced-colours {
    &__button[aria-selected="false"] {
      border-width: 0;
    }
  }
}