@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/border_radius";
@import "../tokens/animation-curves";
@import "../tokens/typography";
@import "../pb_body/body_mixins";
@import "../pb_title/title_mixin";

$selector: ".pb_nav_list";

[class^=pb_nav_list][class*=_vertical] {
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  [class*=_title] {
    padding: 0 $space_md $space_sm;
  }

  // Normal Variant
  &[class*=_normal]  {
    [class*=pb_nav_list_kit_item] {
      list-style: none;
      border-bottom: 1px solid $border_light;
      &[class*=_active] {
        [class*=_link] {
          border-color: $primary;
          [class*=_item_icon] {
            color: $primary;
          }
          [class*=_item_text] {
            color: $primary;
            font-weight: $bold;
          }
        }
      }
      [class*=_link] {
        text-decoration: none;
        display: flex;
        align-items: center;
        padding: $space_sm $space_md $space_sm ($space_md - 3px);
        border: 0 solid transparent;
        border-width: 0 0 0 3px;
        transition-property: color, border-color, background-color;
        transition-duration: 0.15s;
        transition-timing-function: $bezier;
        @media (hover:hover) {
          &:hover {
            background-color: rgba($primary, 0.03);
            [class*=_icon] {
              color: $primary;
            }
            [class*=_text] {
              color: $primary;
            }
          }
        }
        [class*=_icon_left] {
          font-size: $font_large;
          margin-right: $space_sm;
          color: $text_lt_lighter;
        }
        [class*=_icon_right] {
          font-size: $font_large;
          margin-left: $space_sm;
          color: $text_lt_default;
        }
        [class*=_text] {
          font-size: $font_base;
          font-weight: $bold;
          color: $text_lt_default;
          flex: 1;
        }
      }
      &:last-child {
        border-bottom: 0;
      }
    }

  }


  // Subtle Variant
  &[class*=_subtle]  {
    [class*=pb_nav_list_kit_item] {
      list-style: none;
      border-radius: $border_rad_heavier;
      border-bottom: 0;
      margin: $space_xs ($space_sm - 2px);
      [class*=_link] {
        text-decoration: none;
        display: flex;
        align-items: center;
        border: none;
        padding: $space_xs ($space_sm - 2px);
        transition-property: color, background-color;
        transition-duration: 0.15s;
        transition-timing-function: $bezier;
        border-radius: $border_rad_heavier;
        @include pb_body($text_lt_default);
        [class*=_icon_left] {
          margin-right: ($space_xs + 2px);
          color: $text_lt_lighter;
        }
        [class*=_icon_right] {
          margin-left: ($space_xs + 2px);
          color: $text_lt_default;
        }
        [class*=_text] {
          flex: 1;
          font-weight: $regular;
        }
        @media (hover:hover) {
          &:hover {
            background-color: rgba($primary, 0.03);
            [class*=_icon] {
              color: $primary;
            }
            [class*=_text] {
              color: $primary;
            }
          }
        }
      }
      &[class*=_active] [class*=_link] {
        @include pb_title_4;
        color: $primary;
      }
    }
  }

  // Show Highlight
  &[class*=_highlight]  {
    [class*=_active] {
      background-color: $active_light;
    }
    &[class*=dark]{
      [class*=_active] {
      background-color: rgba($white, $opacity_1);
    }
    }
  }

  &[class*=dark]{
    background: tint($bg_dark,10%);
    [class*=pb_nav_list_kit_item]{
      border-color: rgba($white, $opacity_1);
      &[class*=_active] [class*=_link]{
        border-color: $white;
        [class*=_text],[class*=_icon]{
          color: $text_dk_default;
        }
      }
      [class*=_link] {
        [class*=_text],[class*=_icon]{
          color: $text_dk_lighter;
        }
        &:hover{
          background-color: rgba($white, $opacity_1);
          [class*=_icon],[class*=_text] {
            color: $white;
          }
        }
      }
    }
  }

}