@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;

$navBaseClass: '#{constants.$prefix}navigation';
$transitionDuration: 0.2s;

@mixin nav-item-indicator {
  display: block;
  position: absolute;
  background: tokens.$bm-comp-header-color-nav-item-indicator;
  content: '';
}

.#{$navBaseClass} {
  display: flex;
  align-items: center;

  &__list {
    display: flex;
    gap: tokens.$bm-comp-header-space-nav-gap;
    margin: unset;
    padding-inline-start: unset;
  }

  &--vertical &__list {
    flex-direction: column;
    width: 100%;
  }

  &__item {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: tokens.$bm-comp-header-size-height;
    cursor: pointer;

    .bm-state-layer {
      --bm-state-layer-left: 0;
      --bm-state-layer-right: 0;
      --bm-state-layer-outline-offset: 0;
      --bm-state-layer-top: calc(
        (100% - #{tokens.$bm-comp-header-size-nav-item-height}) / 2
      );
      --bm-state-layer-bottom: calc(
        (100% - #{tokens.$bm-comp-header-size-nav-item-height}) / 2
      );
      border-radius: tokens.$bm-comp-header-radius-nav-item;
    }

    &--disabled {
      opacity: tokens.$bm-sem-opacity-disabled;
    }

    &--selected::after {
      @include nav-item-indicator;

      bottom: 0;
      transition: width $transitionDuration ease;
      margin-inline: tokens.$bm-comp-header-space-nav-item-x;
      border-start-start-radius: tokens.$bm-comp-header-radius-indicator;
      border-start-end-radius: tokens.$bm-comp-header-radius-indicator;
      width: calc(100% - tokens.$bm-comp-header-space-nav-item-x * 2);
      height: tokens.$bm-comp-header-size-nav-item-indicator;
    }

    &--selected &-link {
      color: tokens.$bm-comp-header-color-nav-item-fg-selected;
      font: tokens.$bm-comp-header-nav-item-typo-selected;
    }

    &-link {
      display: flex;
      position: relative;
      align-items: center;
      gap: tokens.$bm-comp-header-space-nav-item-gap;

      border-radius: tokens.$bm-comp-header-radius-nav-item;
      padding-inline: tokens.$bm-comp-header-space-nav-item-x;
      min-width: 100%;
      height: tokens.$bm-comp-header-size-nav-item-height;
      color: tokens.$bm-comp-header-color-nav-item-fg;

      font: tokens.$bm-comp-header-nav-item-typo-default;
      text-decoration: none;
      z-index: 1;
    }

    &-link:focus-within {
      outline: none;
    }

    &--disabled &-link {
      cursor: not-allowed;
    }

    &-icon-container {
      display: flex;
      justify-content: center;
      align-items: center;

      aspect-ratio: 1;
      width: tokens.$bm-comp-header-size-nav-item-icon;
    }
  }

  &--vertical &__item {
    height: tokens.$bm-comp-header-size-nav-item-height;
    justify-content: flex-start;
    align-items: center;

    .bm-state-layer {
      --bm-state-layer-left: calc(-1 * var(--bm-comp-actionlist-size-state-offset));
      --bm-state-layer-right: calc(-1 * var(--bm-comp-actionlist-size-state-offset));
      --bm-state-layer-outline-offset: calc(
        -1 * var(--bm-state-layer-outline-width)
      );
      --bm-state-layer-top: 0;
      --bm-state-layer-bottom: 0;
      border-radius: var(--bm-comp-actionlist-radius);
      z-index: -1;
    }

    &--selected {
      &::before {
        @include nav-item-indicator;

        inset-inline-start: 0;
        transform: translateX(-50%);
        transition: height $transitionDuration ease;

        margin-block: tokens.$bm-comp-header-space-nav-item-x;
        border-radius: tokens.$bm-comp-header-radius-indicator;

        width: tokens.$bm-comp-actionlist-size-indicator-width;
        height: calc(100% - tokens.$bm-comp-header-space-nav-item-x * 2);
      }
    }

    &--selected::after {
      display: none;
    }

    &-link {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      align-self: stretch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: tokens.$bm-comp-header-size-nav-item-height;
    }
  }
}