@layer reset, base, variants, sizes, states;
@layer reset {
  :host {
    display: inline-flex;
  }
  :host,
  :host *,
  :host ::before,
  :host ::after {
    box-sizing: border-box;
  }
  :host,
  :host *:not(dialog) {
    margin: 0;
  }
  :host {
    padding: 0;
    min-inline-size: 0;
    min-block-size: 0;
  }
  :host > * {
    interpolate-size: allow-keywords;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--dds-font-family);
    font-feature-settings: var(--dds-font-features);
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  :host :focus-visible {
    outline: 2px solid var(--dds-color-border-focus);
  }
}
@layer base {
  :host {
    --_breadcrumb-color: var(
      --dds-breadcrumb-color,
      var(--dds-breadcrumb-default-color)
    );
    --_breadcrumb-font-size: var(--dds-breadcrumb-font-size);
    --_breadcrumb-font-weight: var(
      --dds-breadcrumb-font-weight,
      var(--dds-breadcrumb-default-font-weight)
    );
    --_breadcrumb-disabled-opacity: var(--dds-breadcrumb-disabled-opacity);
    --_breadcrumb-separator-color: var(--dds-breadcrumb-separator-color);
    --_breadcrumb-separator-font-weight: var(
      --dds-breadcrumb-separator-font-weight
    );
    --_breadcrumb-separator-gap: var(--dds-breadcrumb-separator-gap);
    --_breadcrumb-separator-content: var(--dds-breadcrumb-separator-content);
    align-items: center;
  }
  :host [data-part=root] {
    display: inline-flex;
    align-items: center;
    gap: var(--_breadcrumb-separator-gap);
    border-radius: 2px;
    color: var(--_breadcrumb-color);
    font-size: var(--_breadcrumb-font-size);
    font-weight: var(--_breadcrumb-font-weight);
    text-decoration: none;
    cursor: pointer;
  }
  :host [data-part=label] {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-thickness: 1px;
  }
  :host [data-part=separator]::after {
    content: var(--_breadcrumb-separator-content);
    margin-inline: var(--_breadcrumb-separator-gap);
    color: var(--_breadcrumb-separator-color);
    font-size: var(--_breadcrumb-font-size);
    font-weight: var(--_breadcrumb-separator-font-weight);
  }
}
@layer variants {
  /* audit-keep scss/later-layers-rewrite-hooks: display is a keyword with no token to back an override hook, so the last-child rule sets it directly */
  :host(:last-child) [data-part=separator] {
    display: none;
  }
}
@layer states {
  :host([aria-current]) {
    --dds-breadcrumb-color: var(--dds-breadcrumb-current-color);
    --dds-breadcrumb-font-weight: var(--dds-breadcrumb-current-font-weight);
  }
  :host([aria-current]) [data-part=root] {
    cursor: default;
  }
  :host([disabled]) {
    pointer-events: none;
  }
  :host([disabled]) [data-part=root] {
    cursor: not-allowed;
    opacity: var(--_breadcrumb-disabled-opacity);
  }
}