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

@layer theme {
  .slds-nav-vertical {
    /* Color */
    --slds-c-verticalnavigation-color-foreground: var(--slds-s-navigation-color);
    --slds-c-verticalnavigation-color-foreground-hover: var(--slds-s-navigation-color-hover);
    --slds-c-verticalnavigation-color-foreground-active: var(--slds-s-navigation-color-active);
    --slds-c-verticalnavigation-color-background-hover: color-mix(
      in srgb,
      var(--slds-g-color-accent-1) 10%,
      transparent
    );
    --slds-c-verticalnavigation-color-border-hover: var(--slds-g-color-accent-1);
    --slds-c-verticalnavigation-color-border-active: var(--slds-g-color-accent-1);
    --slds-c-verticalnavigation-shadow-focus: var(--slds-g-shadow-inset-focus-1);

    /* Spacing — action element */
    --slds-c-verticalnavigation-spacing-block: var(--slds-g-spacing-2);
    --slds-c-verticalnavigation-spacing-inline: var(--slds-g-spacing-5);
    --slds-c-verticalnavigation-spacing-inline-start: var(--slds-g-spacing-6);

    /* Selection indicator */
    --slds-c-verticalnavigation-sizing-border: var(--slds-g-sizing-border-2);

    /* Typography */
    --slds-c-verticalnavigation-font-size: var(--slds-g-font-size-base);
    --slds-c-verticalnavigation-font-weight: var(--slds-g-font-weight-4);

    /* Title */
    --slds-c-verticalnavigation-title-font-size: var(--slds-g-font-size-base);
    --slds-c-verticalnavigation-title-font-weight: var(--slds-g-font-weight-7);
    --slds-c-verticalnavigation-title-spacing-block: var(--slds-g-spacing-2);
    --slds-c-verticalnavigation-title-spacing-inline: var(--slds-g-spacing-4);
    --slds-c-verticalnavigation-title-spacing-inline-start: var(--slds-g-spacing-5);
    --slds-c-verticalnavigation-title-margin-block-start: var(--slds-g-spacing-2);

    /* Section */
    --slds-c-verticalnavigation-section-margin-block-start: var(--slds-g-spacing-2);

    /* Overflow */
    --slds-c-verticalnavigation-overflow-color-foreground: var(--slds-s-navigation-color);
    --slds-c-verticalnavigation-overflow-link-color-foreground: var(--slds-s-link-color);
    --slds-c-verticalnavigation-overflow-link-color-foreground-hover: var(--slds-s-link-color-hover);
  }

  /* Compact modifier */
  .slds-nav-vertical.slds-nav-vertical_compact {
    --slds-c-verticalnavigation-title-spacing-block: var(--slds-g-spacing-1);
    --slds-c-verticalnavigation-title-spacing-inline: var(--slds-g-spacing-5);
    --slds-c-verticalnavigation-title-spacing-inline-start: var(--slds-g-spacing-5);
    --slds-c-verticalnavigation-spacing-block: var(--slds-g-spacing-1);
    --slds-c-verticalnavigation-spacing-inline: var(--slds-g-spacing-5);
    --slds-c-verticalnavigation-spacing-inline-start: var(--slds-g-spacing-5);
  }

  /* Action — border normalization */
  .slds-nav-vertical .slds-nav-vertical__action {
    border-block-start: var(--slds-g-sizing-border-1) solid transparent;
    border-block-end: var(--slds-g-sizing-border-1) solid transparent;
  }

  /* Active — direct paint (font-weight rejects state-suffix per RFC) */
  .slds-nav-vertical .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action,
  .slds-nav-vertical .slds-nav-vertical__item [type='radio']:checked + .slds-nav-vertical__action {
    font-weight: var(--slds-s-navigation-font-weight);
  }

  /* Shade modifier */
  .slds-nav-vertical.slds-nav-vertical_shade {
    --slds-c-verticalnavigation-color-background-hover: var(--slds-g-color-surface-container-1);
  }

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

  .slds-nav-vertical.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);
  }

  .slds-nav-vertical .slds-nav-vertical__action_overflow .slds-icon {
    --slds-c-icon-color-foreground: currentColor;
  }
}