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

@layer theme {
  .slds-breadcrumb {
    --slds-c-breadcrumbs-spacing-gap: var(--slds-g-spacing-1);
    --slds-c-breadcrumbs-separator-content: '>';
    --slds-c-breadcrumbs-separator-color-foreground: var(--slds-g-color-on-surface-3);
    --slds-c-breadcrumbs-font-size: var(--slds-g-font-size-base);
    --slds-c-breadcrumbs-font-weight: var(--slds-g-font-weight-4);
    --slds-c-breadcrumbs-color-foreground: var(--slds-s-link-color);
    --slds-c-breadcrumbs-color-foreground-hover: var(--slds-s-link-color-hover);
    --slds-c-breadcrumbs-color-foreground-focus: var(--slds-s-link-color-focus);
    --slds-c-breadcrumbs-color-foreground-active: var(--slds-s-link-color-active);
    --slds-c-breadcrumbs-color-foreground-disabled: var(--slds-g-color-disabled-1);
  }

  /* KINETICS */
  [kx-scope='breadcrumbs-item'][kx-type='underline'] > a {
    position: relative;
    will-change: color, transform;
    transition: transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1);
    margin-inline-end: var(--slds-g-spacing-2);
    margin-inline-start: var(--slds-g-spacing-2);
    padding-inline-end: 0;
    padding-inline-start: 0;
  }

  [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active {
    transform: scale(0.95);
  }

  @media (prefers-reduced-motion: reduce) {
    [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:active {
      transform: none;
    }
  }

  [kx-scope='breadcrumbs-item'][kx-type='underline'] > a::after {
    will-change: transform-origin, transform;
    isolation: isolate;
    content: '';
    position: absolute;
    inset-block-start: 80%;
    inset-inline-start: 0%;
    height: 0.0625rem;
    width: 100%;
    background: var(--slds-g-color-accent-2);
    background-position: left top;
    /* stylelint-disable */
    transform-origin: var(--slds-kx-breadcrumbs-pointer-position-x, 50%) 0;
    /* stylelint-enable */
    transition: transform calc(calc(1 * 1) * 250ms / 1) cubic-bezier(0, 0.3, 0.15, 1);
  }

  [kx-scope='breadcrumbs-item'][kx-type='underline'] > a:hover::after {
    transform: scaleX(1);
  }

  [kx-scope='breadcrumbs-item'][kx-type='underline']:first-child > a {
    margin-inline-start: 0;
  }
}