/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/* Expandable section */

/**
 * Actionable element that toggles visibility of overflown list items
 */
.slds-nav-vertical__action_overflow {
  color: var(--slds-g-color-on-surface-1);
}

.slds-nav-vertical__action_overflow[aria-expanded='true'] .slds-button__icon {
  transform: rotate(90deg);
}

[dir='rtl'] .slds-nav-vertical__action_overflow[aria-expanded='true'] .slds-button__icon {
  transform: rotate(-90deg);
}

.slds-nav-vertical__action-text {
  color: var(--slds-s-link-color, var(--slds-g-color-accent-2));
}

.slds-nav-vertical__action-text:hover {
  color: var(--slds-s-link-color-hover);
}

/* List */

.slds-nav-vertical {
  position: relative;
}

/**
 * Modifer to reduce spacing between navigation items
 */
.slds-nav-vertical_compact .slds-nav-vertical__title,
.slds-nav-vertical_compact .slds-nav-vertical__action {
  padding-block-start: var(--slds-g-spacing-1);
  padding-inline-end: var(--slds-g-spacing-5);
  padding-block-end: var(--slds-g-spacing-1);
  padding-inline-start: var(--slds-g-spacing-5);
}

/**
 * Modifier to adjust list item when vertical navigation is sitting on top of a shaded background
 */
.slds-nav-vertical_shade .slds-is-active.slds-nav-vertical__item::before {
  background: var(--slds-g-color-surface-container-1);
}

.slds-nav-vertical_shade .slds-nav-vertical__item:hover::before {
  background: var(--slds-g-color-surface-container-1);
}

.slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action {
  border-color: var(--slds-g-color-neutral-base-90);
}

/**
 * Section title of the vertical navigation
 */
.slds-nav-vertical__title {
  padding-block-start: var(--slds-g-spacing-2);
  padding-inline-end: var(--slds-g-spacing-4);
  padding-block-end: var(--slds-g-spacing-2);
  padding-inline-start: var(--slds-g-spacing-5);
  font-size: var(--slds-g-font-size-base);
  font-weight: var(--slds-g-font-weight-7);
}

.slds-nav-vertical__title:not(:first-of-type) {
  margin-block-start: var(--slds-g-spacing-2);
}

.slds-nav-vertical__section:not(:first-of-type) {
  margin-block-start: var(--slds-g-spacing-2);
}

/**
 * List of the vertical navigation
 */
.slds-nav-vertical__item {
  position: relative;
  display: block;
  list-style: none;
}

.slds-nav-vertical__item::before {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  content: '';
}

.slds-nav-vertical__item:hover::before,
.slds-nav-vertical__item.slds-is-active::before {
  background: color-mix(in srgb, var(--slds-g-color-accent-1) 10%, transparent);
}

.slds-nav-vertical__item:has(:focus-visible)::before,
.slds-nav-vertical__action_overflow:focus-visible {
  box-shadow: var(--slds-g-shadow-inset-focus-1);
}

/**
 * Actionable element inside of vertical navigation list item
 */
.slds-nav-vertical__action {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block-start: var(--slds-g-spacing-2);
  padding-inline-end: var(--slds-g-spacing-5);
  padding-block-end: var(--slds-g-spacing-2);
  padding-inline-start: var(--slds-g-spacing-6);
  color: var(--slds-s-navigation-color, var(--slds-g-color-on-surface-3));
  border-block-start: var(--slds-g-sizing-border-1) solid transparent;
  border-block-end: var(--slds-g-sizing-border-1) solid transparent;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--slds-g-color-accent-1);
  cursor: pointer;
}

.slds-nav-vertical__action:active,
.slds-nav-vertical__action:hover,
.slds-nav-vertical__action:focus {
  color: currentcolor;
}

.slds-nav-vertical__action:hover {
  text-decoration: none;
  box-shadow: inset 2px 0 0 var(--slds-g-color-accent-1);
  color: var(--slds-s-navigation-color-hover);
}

[dir='rtl'] .slds-nav-vertical__action:hover {
  box-shadow: inset -2px 0 0 var(--slds-g-color-accent-1);
}

.slds-nav-vertical__action:focus-visible {
  outline: 0;
  text-decoration: underline;
}

/**
 * Active state of a list item within a vertical navigation
 */
.slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  font-weight: var(--slds-s-navigation-font-weight);
  box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1);
  color: var(--slds-s-navigation-color-active);
}

[dir='rtl'] .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  box-shadow: inset -4px 0 0 var(--slds-g-color-accent-1);
}

/* Radio-Group */

.slds-nav-vertical__item [type='radio'] {
  width: 1px;
  height: 1px;
  border: 0;
  clip: rect(0 0 0 0);
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

/**
  * Used for styling when the nav uses input radio elements for the items
  */
.slds-nav-vertical__item [type='radio']:focus + .slds-nav-vertical__action,
.slds-nav-vertical__item [type='radio']:focus + .slds-nav-vertical__action .slds-nav-vertical_radio-faux {
  text-decoration: underline;
}

.slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action {
  font-weight: var(--slds-g-font-weight-7);
  background-color: color-mix(in srgb, var(--slds-g-color-accent-1) 10%, transparent);
  box-shadow: inset 4px 0 0 var(--slds-g-color-accent-1);
}

.slds-nav-vertical_shade .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action {
  border-color: var(--slds-g-color-neutral-base-90);
  background-color: var(--slds-g-color-on-surface-inverse-1);
}