@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/animation-curves";
@import "../tokens/typography";
@import "./subtle_mixin";
@import "./bold_mixin";
@import "../tokens/shadows";

$selector: ".pb_nav_list";

[class^="pb_nav_list"][class*="_horizontal"] {
  .pb_nav_wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
    transition-property: border-color;
    transition-duration: 0.15s;
    transition-timing-function: $bezier;
    padding: 0;

    &[class*="_link"] {
      text-decoration: none;
      display: flex;
      align-items: center;
      padding: $space_sm $space_md;
      border: 0 solid transparent;
      border-width: 0 0 3px 0;
      border-color: $border_light;
      transition-property: color, border-color, background-color;
      transition-duration: 0.15s;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      color: $text_lt_default;

      [class*="_icon_left"] {
        font-size: $font_large;
        margin-right: $space_sm;
        color: $text_lt_lighter;
      }

      [class*="_text"] {
        color: $text_lt_default;
        font-weight: $bold;
      }

      @media (hover: hover) {
        &:hover {
          color: $primary;
          #{$selector}_item_icon,
          #{$selector}_item_text {
            color: $primary;
          }
        }
      }
      &[class*="_active"] {
        border-color: $primary;
        [class*="_item_icon"] {
          color: $text_lt_default;
        }
        [class*="_item_text"] {
          color: $text_lt_default;
          font-weight: $bold;
        }
        &:hover {
          #{$selector}_item_icon,
          #{$selector}_item_text {
            color: $primary;
          }
        }
      }
    }
  }

  // Subtle Variant
  &[class*="_subtle"] {
    @include subtle;
    // Horizontal Overrides
    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
      margin: 0;
      [class*="_item_text"] {
        font-weight: $regular !important;
      }
      &[class*="_active"] {
        background-color: $active_light;
        &[class*="dark"] {
          background-color: rgba($white, $opacity_1);
          [class*="_item_text"] {
            color: $white !important;
          }
        }
        [class*="_item_text"] {
          color: $primary !important;
        }
      }
    }
  }

  // Bold Variant
  &[class*="_bold"] {
    @include bold;
    // Horizontal Overrides
    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
      margin: 0;
      [class*="_item_text"] {
        font-weight: $regular;
      }
    }
    [class*="_active"] {
      [class*="_text"] {
        color: $white !important;
      }
    }
  }

  &[class*="dark"] {
    [class*="pb_nav_list_kit_item"][class*="pb_nav_list_item"] {
      border-color: rgba($white, $opacity_3);
      &[class*="_active"] {
        border-color: $active_dark;
        [class*="_text"],
        [class*="_icon"] {
          color: $text_dk_default;
        }
      }
      [class*="_text"],
      [class*="_icon"] {
        color: $text_dk_lighter;
      }
      &:hover {
        background-color: rgba($white, $opacity_1);
        [class*="_icon"],
        [class*="_text"] {
          color: $white !important;
        }
      }
    }
  }
}