/* stylelint-disable declaration-property-value-keyword-no-deprecated */
@use '@mezzanine-ui/system/effect' as effect;
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/typography';
@use '../button';
@use './tab' as *;


.#{$prefix} {
  box-sizing: border-box;

  &--horizontal {
    align-items: center;
    display: flex;
    gap: spacing.semantic-variable(gap, comfort);
    position: relative;

    &::before {
      border-bottom: spacing.semantic-variable(size, element, hairline) solid palette.semantic-variable(border, neutral-faint);
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    &.#{$prefix}--main {
      padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, spacious) 0;
    }

    .#{$prefix}__item {
      padding: spacing.semantic-variable(padding, vertical, base) 0 spacing.semantic-variable(padding, vertical, comfort);
    }

    &.#{$prefix}--sub .#{$prefix}__item {
      padding: spacing.semantic-variable(padding, vertical, tight) 0 spacing.semantic-variable(padding, vertical, calm);
    }

    .#{$prefix}__active-bar {
      border-bottom: spacing.semantic-variable(size, element, hairline) solid palette.semantic-variable(border, brand);
      bottom: 0;
      height: spacing.semantic-variable(size, element, hairline);
      left: var(--active-bar-shift, 0);
      position: absolute;
      transition: transition.standard(left, moderate), transition.standard(width, moderate), transition.standard(border-color, fast);
      width: var(--active-bar-length, 0);
    }

    &:has(.#{$prefix}__item--active.#{$prefix}__item--error) {
      .#{$prefix}__active-bar {
        border-bottom-color: palette.semantic-variable(border, error);
      }
    }
  }

  &--vertical {
    display: grid;
    gap: spacing.semantic-variable(gap, tiny);
    position: relative;
    width: fit-content;

    &::before {
      border-right: spacing.semantic-variable(size, element, hairline) solid palette.semantic-variable(border, neutral-faint);
      content: '';
      inset: 0;
      pointer-events: none;
      position: absolute;
    }

    &.#{$prefix}--main {
      padding: 0 0 0 spacing.semantic-variable(padding, horizontal, spacious);
    }

    .#{$prefix}__item {
      padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, base) spacing.semantic-variable(padding, vertical, calm) 0;
      width: fit-content;
    }

    &.#{$prefix}--sub .#{$prefix}__item {
      padding: spacing.semantic-variable(padding, vertical, base) spacing.semantic-variable(padding, horizontal, base) spacing.semantic-variable(padding, vertical, base) 0;
    }

    .#{$prefix}__active-bar {
      $vertical-spacing: spacing.semantic-variable(padding, vertical, tiny);

      border-right: spacing.semantic-variable(size, element, hairline) solid palette.semantic-variable(border, brand);
      height: calc(var(--active-bar-length, 0) - #{$vertical-spacing} - #{$vertical-spacing});
      position: absolute;
      right: 0;
      top: calc(var(--active-bar-shift, 0) + #{$vertical-spacing});
      transition: transition.standard(top, moderate), transition.standard(height, moderate), transition.standard(border-color, fast);
      width: spacing.semantic-variable(size, element, hairline);
    }

    &:has(.#{$prefix}__item--active.#{$prefix}__item--error) {
      .#{$prefix}__active-bar {
        border-right-color: palette.semantic-variable(border, error);
      }
    }
  }

  &__item {
    @include button.reset();
    @include typography.semantic-variable(button-highlight, (line-height));

    align-items: center;
    box-sizing: border-box;
    color: palette.semantic-variable(text, neutral-strong);
    display: flex;
    transition: transition.standard(color, fast);

    &__icon {
      color: palette.semantic-variable(icon, neutral-strong);
      margin-right: spacing.semantic-variable(gap, base);
      transition: transition.standard(color, fast);
    }

    &__badge {
      margin-left: spacing.semantic-variable(gap, tight);
    }

    &:hover:not(&--active, &--error) {
      color: palette.semantic-variable(text, brand);

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, brand);
      }
    }

    &--error:hover:not(&--active) {
      color: palette.semantic-variable(text, error-strong);

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, error-strong);
      }
    }

    &:focus-visible {
      background-color: palette.semantic-variable(background, base);
      box-shadow: effect.variable(focus, primary);
    }

    &:focus-visible:not(&--active) {
      color: palette.semantic-variable(text, neutral-solid);

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }
    }

    &--active {
      color: palette.semantic-variable(text, brand);

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, brand);
      }
    }

    &--error {
      color: palette.semantic-variable(text, error);

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, error);
      }
    }

    &:disabled {
      color: palette.semantic-variable(text, neutral-light);
      cursor: default;
      pointer-events: none;

      .#{$prefix}__item__icon {
        color: palette.semantic-variable(icon, neutral-light);
      }
    }
  }
}