@use '../common/mixins';
@use '../common/variables';
@use '../utilities/text';

// —————————————————————————————————————————————————————————————————
// elements
// active
// show
// direction
// dense
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.nav_trigger,
a.nav_trigger {
  outline-offset: -2px;

  &:focus {
    outline: 2px solid variables.$primary;
  }
}

.nav {
  width: fit-content;

  &_container {
    display: flex;
    gap: calc(variables.$nav-item/4);
  }

  &_item,
  &_trigger {
    border-radius: variables.$border-radius-sm;
  }

  &_item {
    margin: 0;
    position: relative;

    &:not(:first-child) {
      padding-block-start: 0;
    }

    &-dropdown {
      display: flex;
      flex-direction: column;
    }
  }

  &_trigger {
    @extend %caption;
    font-weight: variables.$button-weight;
    text-transform: variables.$button-transform;
    white-space: nowrap;
    cursor: pointer;
    height: variables.$nav-item*2;
    padding-inline-end: variables.$nav-item*.75;
    padding-inline-start: variables.$nav-item*.75;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-underline-offset: .15em;

    &:not(.nav_trigger-active):hover {
      background-color: variables.$hover;
    }

    .nav_item-dropdown > & {
      
      &:after {
        content: '';
        border: solid variables.$text;
        border-width: 0 .125rem .125rem 0;
        padding: .125rem;
        transform: rotate(45deg);
        margin-inline-start: variables.$nav-item*0.5;
      }
    }
  }

  &_icon {
    display: flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0.25rem;
    margin-inline-start: -0.25rem;
  }

  &_target {
    display: none;
    flex-direction: column;
    padding: variables.$nav-item*0.25 variables.$nav-item*0.5 variables.$nav-item*0.5 variables.$nav-item*0.5;
    gap: .25rem;

    .nav_trigger {
      padding-inline-end: variables.$nav-item*0.5;
      padding-inline-start: variables.$nav-item*0.5;        
      border-radius: variables.$border-radius-sm;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// active
// —————————————————————————————————————————————————————————————————

.nav_trigger-active {
  color: variables.$primary;
  background-color: variables.$hover;

  .nav_item-dropdown &:after {
    border-color: variables.$primary;
  }
}

// —————————————————————————————————————————————————————————————————
// show
// —————————————————————————————————————————————————————————————————

.nav_item-dropdown.js-show {
  height: auto;
  background-color: variables.$hover;

  > .nav {

    &_trigger-active,
    &_trigger:hover {
      background-color: transparent;
    }

    &_target {
      display: flex;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// direction
// —————————————————————————————————————————————————————————————————

.nav-portrait {
  width: 100%;

  .nav_container{
    flex-direction: column;
  }
}

// —————————————————————————————————————————————————————————————————
// dense
// —————————————————————————————————————————————————————————————————

.nav-dense {

  .nav {

    &_item,
    &_trigger {
      border-radius: variables.$border-radius-sm;
    }
  
    &_trigger {
      padding-inline-end: variables.$nav-item*0.5;
      padding-inline-start: variables.$nav-item*0.5;
      height: variables.$nav-item*1.5;
    }

    &_item-dropdown {
    
      .nav_target {
        padding: 0 variables.$nav-item*0.25 variables.$nav-item*0.25 variables.$nav-item*0.25;

        .nav_trigger {
          padding-inline-end: variables.$nav-item*0.25;
          padding-inline-start: variables.$nav-item*0.25;
        }
      }
    }
  }
}