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

.slds-nav-vertical {
  position: relative;
  font-weight: var(--slds-c-verticalnavigation-font-weight);
}

.slds-nav-vertical__title {
  padding-block-start: var(
    --slds-c-verticalnavigation-title-spacing-block-start,
    var(--slds-c-verticalnavigation-title-spacing-block)
  );
  padding-inline-end: var(
    --slds-c-verticalnavigation-title-spacing-inline-end,
    var(--slds-c-verticalnavigation-title-spacing-inline)
  );
  padding-block-end: var(
    --slds-c-verticalnavigation-title-spacing-block-end,
    var(--slds-c-verticalnavigation-title-spacing-block)
  );
  padding-inline-start: var(
    --slds-c-verticalnavigation-title-spacing-inline-start,
    var(--slds-c-verticalnavigation-title-spacing-inline)
  );
  font-size: var(--slds-c-verticalnavigation-title-font-size);
  font-weight: var(--slds-c-verticalnavigation-title-font-weight);
}

.slds-nav-vertical__title:not(:first-of-type) {
  margin-block-start: var(--slds-c-verticalnavigation-title-margin-block-start);
}

.slds-nav-vertical__section:not(:first-of-type) {
  margin-block-start: var(--slds-c-verticalnavigation-section-margin-block-start);
}

.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: var(--slds-c-verticalnavigation-color-background-hover);
}

.slds-nav-vertical__item:has(:focus-visible) {
  z-index: 1;
}

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

.slds-nav-vertical__action {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block-start: var(
    --slds-c-verticalnavigation-spacing-block-start,
    var(--slds-c-verticalnavigation-spacing-block)
  );
  padding-inline-end: var(
    --slds-c-verticalnavigation-spacing-inline-end,
    var(--slds-c-verticalnavigation-spacing-inline)
  );
  padding-block-end: var(
    --slds-c-verticalnavigation-spacing-block-end,
    var(--slds-c-verticalnavigation-spacing-block)
  );
  padding-inline-start: var(
    --slds-c-verticalnavigation-spacing-inline-start,
    var(--slds-c-verticalnavigation-spacing-inline)
  );
  color: var(--slds-c-verticalnavigation-color-foreground);
  background-color: var(--slds-c-verticalnavigation-color-background);
  font-size: var(--slds-c-verticalnavigation-font-size);
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--slds-c-verticalnavigation-color-border-active);
  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 var(--slds-c-verticalnavigation-sizing-border) 0 0
    var(--slds-c-verticalnavigation-color-border-hover);
  color: var(--slds-c-verticalnavigation-color-foreground-hover);
}

[dir='rtl'] .slds-nav-vertical__action:hover {
  box-shadow: inset calc(-1 * var(--slds-c-verticalnavigation-sizing-border)) 0 0
    var(--slds-c-verticalnavigation-color-border-hover);
}

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

.slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  box-shadow: inset calc(var(--slds-c-verticalnavigation-sizing-border) * 2) 0 0
    var(--slds-c-verticalnavigation-color-border-active);
  color: var(--slds-c-verticalnavigation-color-foreground-active);
}

[dir='rtl'] .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action {
  box-shadow: inset calc(var(--slds-c-verticalnavigation-sizing-border) * -2) 0 0
    var(--slds-c-verticalnavigation-color-border-active);
}

.slds-nav-vertical__action.slds-nav-vertical__action_overflow {
  padding-block-start: var(
    --slds-c-verticalnavigation-spacing-block-start,
    var(--slds-c-verticalnavigation-spacing-block)
  );
  padding-inline-end: var(
    --slds-c-verticalnavigation-spacing-inline-end,
    var(--slds-c-verticalnavigation-spacing-inline)
  );
  padding-block-end: var(
    --slds-c-verticalnavigation-spacing-block-end,
    var(--slds-c-verticalnavigation-spacing-block)
  );
  padding-inline-start: var(
    --slds-c-verticalnavigation-spacing-inline-start,
    var(--slds-c-verticalnavigation-spacing-inline)
  );
  border-block-start: 1px solid transparent;
  border-block-end: 1px solid transparent;
  color: var(--slds-c-verticalnavigation-overflow-color-foreground);
  justify-content: normal;
}

.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-c-verticalnavigation-overflow-link-color-foreground);
}

.slds-nav-vertical__action-text:hover {
  color: var(--slds-c-verticalnavigation-overflow-link-color-foreground-hover);
}

/* Radio-Group */

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

.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 {
  background-color: var(--slds-c-verticalnavigation-color-background-hover);
  box-shadow: inset calc(var(--slds-c-verticalnavigation-sizing-border) * 2) 0 0
    var(--slds-c-verticalnavigation-color-border-active);
}

/* Relay hooks — badge */
.slds-nav-vertical__item .slds-badge {
  --slds-c-badge-color-foreground: var(--slds-c-verticalnavigation-item-badge-color-foreground, revert-layer);
  --slds-c-badge-color-background: var(--slds-c-verticalnavigation-item-badge-color-background, revert-layer);
}

/* Relay hooks — icon */
.slds-nav-vertical__action .slds-icon {
  --slds-c-icon-color-foreground: var(--slds-c-verticalnavigation-action-icon-color-foreground, revert-layer);
}