@import "../tokens/spacing";
@import "../tokens/colors";
@import "../tokens/border_radius";
@import "../tokens/titles";
@import "../tokens/typography";

[class^="pb_nav_list"] {
  [class*="pb_collapsible_nav_item"] {
    @mixin collapsible_trail_class {
      .pb_collapsible_content_kit {
        margin-left: $space_md - 2 !important;
        border-left: 2px solid $border_light;
      }
    }

    @mixin bold_class {
      .pb_collapsible_main_kit {
        .pb_nav_list_item_text_collapsible {
          @include pb_title_4;
          font-weight: $bolder !important;
        }
      }
    }

    &[class*="_active"] {
      background-color: unset !important;
      .pb_nav_list_item_link {
        color: unset !important;
      }
      .pb_collapsible_main_kit {
        background-color: $primary !important;
        border-radius: $border_rad_heavier;
        .pb_nav_list_item_text_collapsible,
        .pb_nav_list_item_icon_collapsible,
        .icon_wrapper,
        .pb_icon_kit {
          color: $white !important;
        }
      }

      &:hover {
        background-color: unset;
      }
      .pb_collapsible_main_kit:hover {
        .pb_nav_list_item_text_collapsible {
          color: $white !important;
        }
      }

      .icon_wrapper {
        &:hover {
          background-color: mix($primary, $card_light, 40%);
          .pb_icon_kit {
            color: $primary !important;
          }
        }
      }
    }

    &:hover {
      .pb_nav_list_item_link_collapsible {
        background-color: unset !important;
      }
    }

    .pb_collapsible_main_kit:hover {
      border-radius: $border_rad_heavier;
      background-color: mix($primary, $card_light, 10%);
      .pb_nav_list_item_text_collapsible,
      svg {
        color: $primary !important;
      }
    }

    .pb_collapsible_main_kit,
    .pb_collapsible_content_kit,
    .pb_collapsible_kit {
      padding: 0 !important;
    }

    &[class*="_collapsible_trail"] {
      @include collapsible_trail_class;
    }

    &[class*="_bold_text"] {
      @include bold_class;
    }

    &[class*="_emphasized"] {
      @include collapsible_trail_class;
      @include bold_class;
    }

    .icon_wrapper {
      border-radius: $border_radius_rounded;
      width: $space_sm + 3;
      height: $space_sm + 3;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: $space_xs;
      &:hover {
        background-color: mix($primary, $card_light, 40%);
      }
    }

    &.dark {
      &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
        .pb_nav_list_item_text {
          color: $white !important;
        }
      }

      .pb_nav_list_item_text_collapsible {
        color: $white !important;
      }
      .pb_nav_list_item_text {
        color: $text_dk_light;
      }
      .pb_nav_list_kit_item:hover {
        background-color: #ffffff33;
        color: $white;
      }
      .pb_icon_kit {
        color: $text_dk_light;
      }

      .pb_collapsible_main_kit:hover {
        background-color: mix($white, $card_dark, 20%);
        .pb_nav_list_item_text_collapsible,
        svg {
          color: $white !important;
        }
      }
      .icon_wrapper:hover {
        background-color: mix($white, $card_dark, 40%);
      }
      &[class*="_active"] {
        .icon_wrapper:hover {
          background-color: mix($primary, $card_light, 40%);
        }
      }

      &[class*="pb_collapsible_nav_item"][class*="_emphasized"],
      &[class*="pb_collapsible_nav_item"][class*="_collapsible_trail"] {
        .pb_collapsible_content_kit {
          border-color: $border_dark;
        }
      }
    }
  }
}