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

[class^="pb_nav_list"][class*="_vertical"] {
  .pb_collapsible_main_kit,
  .pb_collapsible_content_kit,
  .pb_collapsible_kit {
    padding: 0 !important;
  }

  //styling for default variant with collapsible
  &[class*="_normal"] {
    .pb_collapsible_kit {
      &[class*="_active"] {
        background-color: unset;
      }
      &[class*="_collapsible_trail"] {
        .pb_collapsible_content_kit {
          &::after {
            left: 0px !important;
          }
        }
      }
      .pb_collapsible_content_kit {
        margin-left: $space_lg + 3;
      }
      .pb_collapsible_main_kit {
        border-radius: unset;
        margin: 0;
      }
      &[class*="_active"] {
        >.pb_collapsible_main_kit {
          background-color: $active_light;
        }
      }
    }
    &.dark {
      .pb_collapsible_kit {
        .pb_collapsible_main_kit:hover {
          .pb_nav_list_item_text_collapsible {
            color: $white !important;
          }
        }
        &[class*="_active"] {
          >.pb_collapsible_main_kit {
            background-color: mix($white, $card_dark, 20%);
            .pb_nav_list_item_text_collapsible,
            svg {
              color: $white !important;
            }
          }
        }
      }
    }
  }

  //styling bold variant to work with collapsible
  &[class*="_bold"] {
    .pb_collapsible_kit {
      &[class*="_active"] {
        background-color: unset;
        >.pb_collapsible_main_kit {
          background-color: $primary;
          border-radius: $border_rad_heavier;
          .pb_nav_list_item_text_collapsible,
          .pb_nav_list_item_icon_collapsible,
          .icon_wrapper,
          .pb_icon_kit {
            color: $white;
          }
        }
        .pb_nav_list_item_link {
          background-color: unset !important;
          box-shadow: unset !important;
          &:hover {
            background-color: rgba($primary, 0.03) !important;
            .pb_nav_list_item_text {
              color: $primary;
            }
          }
          .pb_nav_list_item_text {
            font-weight: $regular;
          }
        }
        .icon_wrapper:hover {
          background-color: mix($primary, $card_light, 40%);
        }
      }
    }
    &.dark {
      .pb_collapsible_kit {
        &[class*="_active"] {
          >.pb_collapsible_main_kit {
            background-color: $primary;
          }
          .pb_nav_list_item_link {
            &:hover {
              background-color: rgba($white, $opacity_1) !important;
            }
          }
        }
      }
    }
  }

  //styling for subtle variant with collapsible
  &[class*="_subtle"] {
    .pb_collapsible_kit {
      &[class*="_active"] {
        background-color: unset;
        >.pb_collapsible_main_kit {
          background-color: $active_light;
          border-radius: $border_rad_heavier;
          .pb_nav_list_item_text_collapsible,
          .pb_nav_list_item_icon_collapsible {
            color: $primary;
          }
        }
        &:hover {
          background-color: unset;
        }
      }
    }
    &.dark {
      .pb_collapsible_kit {
        &[class*="_active"] {
          >.pb_collapsible_main_kit {
            background-color: mix($white, $card_dark, 20%) !important;
            .pb_nav_list_item_text_collapsible,
            svg {
              color: $white !important;
            }
          }
        }
      }
    }
  }

  .pb_collapsible_kit {
    [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
      margin: 0px;
      &[class*="_active"] {
        background-color: unset;
        box-shadow: unset;
        .pb_nav_list_item_text_collapsible {
          color: unset;
        }
      }
    }

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

    .pb_nav_list_item_link_collapsible {
      &:focus-visible {
        outline: none;
      }
    }

    .pb_collapsible_main_kit {
      margin: $space_xs ($space_sm - 2px);
      &:focus-visible {
        box-shadow: 0px 0px 0px 2px $primary_action;
        border-radius: $border_rad_heavier;
      }
    }

    //Make sure link is entire width of navitem when in collapsible
    .pb_collapsible_main_kit {
      .pb_flex_item_kit:first-child {
        width: 100%;
      }
    }

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

    // indention on left of collapsible content
    .pb_collapsible_content_kit {
      margin-left: $space_lg - 2;
    }

    .pb_collapsible_main_kit {
      transition-property: color, border-color, background-color;
      transition-duration: 0.15s;
      transition-timing-function: $bezier;
      border-radius: $border_rad_heavier;
      &:hover {
        background-color: mix($primary, $card_light, 10%);
        .pb_nav_list_item_text_collapsible,
        svg {
          color: $primary;
        }
      }
    }

    .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 {
    .pb_collapsible_kit {
      &[class*="pb_nav_list_kit_item"] [class*="_link"]:hover {
        .pb_nav_list_item_text {
          color: $white !important;
        }
      }
      [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
        box-shadow: unset !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 {
          color: $white !important;
        }
      }

      .pb_collapsible_main_kit {
        svg {
          color: $text_dk_default !important;
        }
      }

      .icon_wrapper:hover {
        background-color: mix($white, $card_dark, 40%);
      }

      &[class*="_collapsible_trail"] {
        .pb_collapsible_content_kit {
          &::after {
            background-color: $border_dark;
          }
        }
      }

      &[class*="_active"] {
        > .pb_collapsible_main_kit {
          background-color: $primary;
          box-shadow: 0 2px 10px 0 $shadow_dark;
        }
      }
    }
  }
}