@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/effect' as effect;
@use '../button/utils' as btn-utils;
@use './anchor' as *;

$bar-width: 2px !default;

.#{$prefix} {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: $bar-width;
    background-color: palette.semantic-variable('border', neutral-faint);
    pointer-events: none;
  }

  &__anchorItem {
    @include btn-utils.reset();

    display: inline-grid;
    position: relative;
    width: 100%;
    padding-left: calc(spacing.semantic-variable(gap, base) + $bar-width);
    padding-top: spacing.semantic-variable(padding, vertical, calm);
    padding-bottom: spacing.semantic-variable(padding, vertical, calm);
    text-align: left;
    color: palette.semantic-variable(text, neutral);
    transition: transition.standard(border-left), transition.standard(color);

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: $bar-width;
      background-color: palette.semantic-variable('border', neutral-faint);
      clip-path: inset(spacing.semantic-variable(gap, tight) 0);
      transition: transition.standard(background-color), transition.standard(clip-path);
    }

    &:hover {
      color: palette.semantic-variable(text, neutral-solid);
    }

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

      &::before {
        clip-path: inset(0);
        background-color: palette.semantic-variable(text, brand);
      }
    }

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

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

      &::before {
        clip-path: inset(0);
      }
    }
  }

  &__nested {
    display: grid;
    grid-template-columns: 1fr;

    &--level-1 {
      padding-left: spacing.semantic-variable(gap, spacious);
    }

    &--level-2 {
      padding-left: spacing.semantic-variable(gap, loose);
    }
  }
}