/* docara-shell-source: runtime/component/outline/css/outline.css */
@layer sf.components {
  .sf-outline {
    --sf-outline--gap: var(--sf-space-1\/3);
    --sf-outline--indent: var(--sf-space-2);
    --sf-outline--link-padding-block: var(--sf-space-1\/4);
    --sf-outline--link-padding-inline: var(--sf-space-1);
    --sf-outline--indicator-width: var(--sf-a2);
    --sf-outline--color: var(--sf-on-surface-variant);
    --sf-outline--hover-color: var(--sf-on-surface);
    --sf-outline--hover-background: var(--sf-surface-container-hover);
    --sf-outline--current-color: var(--sf-on-surface);
    --sf-outline--current-background: var(--sf-surface-container-active);
    --sf-outline--current-indicator: var(--sf-primary);
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    color: var(--sf-on-surface);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text--size);
    line-height: var(--sf-text--height);
  }
  .sf-outline__list,
  .sf-outline__list .sf-outline__list {
    display: flex;
    flex-direction: column;
    gap: var(--sf-outline--gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-outline__list .sf-outline__list {
    padding-left: var(--sf-outline--indent);
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-outline__list .sf-outline__list {
    padding-left: var(--sf-outline--indent);
    }
  }
  .sf-outline__list .sf-outline__list:where(:dir(ltr)) {
    padding-left: var(--sf-outline--indent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-outline__list .sf-outline__list {
    padding-right: var(--sf-outline--indent);
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-outline__list .sf-outline__list {
    padding-right: var(--sf-outline--indent);
    }
  }
  .sf-outline__list .sf-outline__list:where(:dir(rtl)) {
    padding-right: var(--sf-outline--indent);
  }
  .sf-outline__list .sf-outline__list {
    -webkit-padding-start: var(--sf-outline--indent);
            padding-inline-start: var(--sf-outline--indent);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-outline__link {
    border-left: var(--sf-outline--indicator-width) solid var(--sf-transparent);
  }
  @supports not (border-inline-start: initial) {
  html:not([dir="rtl"]) .sf-outline__link {
    border-left: var(--sf-outline--indicator-width) solid var(--sf-transparent);
    }
  }
  .sf-outline__link:where(:dir(ltr)) {
    border-left: var(--sf-outline--indicator-width) solid var(--sf-transparent);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-outline__link {
    border-right: var(--sf-outline--indicator-width) solid var(--sf-transparent);
  }
  @supports not (border-inline-start: initial) {
  [dir="rtl"] .sf-outline__link {
    border-right: var(--sf-outline--indicator-width) solid var(--sf-transparent);
    }
  }
  .sf-outline__link:where(:dir(rtl)) {
    border-right: var(--sf-outline--indicator-width) solid var(--sf-transparent);
  }
  .sf-outline__link {
    display: block;
    box-sizing: border-box;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    padding-top: var(--sf-outline--link-padding-block);
    padding-bottom: var(--sf-outline--link-padding-block);
    padding-block: var(--sf-outline--link-padding-block);
    padding-left: var(--sf-outline--link-padding-inline);
    padding-right: var(--sf-outline--link-padding-inline);
    padding-inline: var(--sf-outline--link-padding-inline);
    border: 0;
    -webkit-border-start: var(--sf-outline--indicator-width) solid var(--sf-transparent);
            border-inline-start: var(--sf-outline--indicator-width) solid var(--sf-transparent);
    border-radius: var(--sf-radius--ui);
    color: var(--sf-outline--color);
    background-color: var(--sf-transparent);
    word-wrap: anywhere;
    text-decoration: none;
  }
  .sf-outline__link:hover {
    color: var(--sf-outline--hover-color);
    background-color: var(--sf-outline--hover-background);
  }
  .sf-outline__link:focus {
    outline: none;
  }
  .sf-outline__link.focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-outline__link:focus-visible {
    position: relative;
    z-index: 1;
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-outline__link[aria-current=location],html:not([dir="rtl"])
  .sf-outline__link[data-sf-outline-active] {
    border-left-color: var(--sf-outline--current-indicator);
  }
  @supports not (border-inline-start-color: initial) {
  html:not([dir="rtl"]) .sf-outline__link[aria-current=location],html:not([dir="rtl"])
  .sf-outline__link[data-sf-outline-active] {
    border-left-color: var(--sf-outline--current-indicator);
    }
  }
  .sf-outline__link[aria-current=location]:where(:dir(ltr)),
  .sf-outline__link[data-sf-outline-active]:where(:dir(ltr)) {
    border-left-color: var(--sf-outline--current-indicator);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-outline__link[aria-current=location],[dir="rtl"]
  .sf-outline__link[data-sf-outline-active] {
    border-right-color: var(--sf-outline--current-indicator);
  }
  @supports not (border-inline-start-color: initial) {
  [dir="rtl"] .sf-outline__link[aria-current=location],[dir="rtl"]
  .sf-outline__link[data-sf-outline-active] {
    border-right-color: var(--sf-outline--current-indicator);
    }
  }
  .sf-outline__link[aria-current=location]:where(:dir(rtl)),
  .sf-outline__link[data-sf-outline-active]:where(:dir(rtl)) {
    border-right-color: var(--sf-outline--current-indicator);
  }
  .sf-outline__link[aria-current=location],
  .sf-outline__link[data-sf-outline-active] {
    border-inline-start-color: var(--sf-outline--current-indicator);
    color: var(--sf-outline--current-color);
    background-color: var(--sf-outline--current-background);
    font-weight: var(--sf-font-weight-medium);
  }
  @media (forced-colors: active) {
    .sf-outline__link.focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
    .sf-outline__link:focus-visible {
      outline: var(--sf-focus-outline-width) solid currentColor;
      outline-offset: calc(var(--sf-focus-outline-width) * -1);
      box-shadow: none;
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-outline__link[aria-current=location],html:not([dir="rtl"])
    .sf-outline__link[data-sf-outline-active] {
      border-left-color: Highlight;
    }
    @supports not (border-inline-start-color: initial) {
    html:not([dir="rtl"]) .sf-outline__link[aria-current=location],html:not([dir="rtl"])
    .sf-outline__link[data-sf-outline-active] {
      border-left-color: Highlight;
      }
    }
    .sf-outline__link[aria-current=location]:where(:dir(ltr)),
    .sf-outline__link[data-sf-outline-active]:where(:dir(ltr)) {
      border-left-color: Highlight;
    }
    _:-ms-input-placeholder, [dir="rtl"] .sf-outline__link[aria-current=location],[dir="rtl"]
    .sf-outline__link[data-sf-outline-active] {
      border-right-color: Highlight;
    }
    @supports not (border-inline-start-color: initial) {
    [dir="rtl"] .sf-outline__link[aria-current=location],[dir="rtl"]
    .sf-outline__link[data-sf-outline-active] {
      border-right-color: Highlight;
      }
    }
    .sf-outline__link[aria-current=location]:where(:dir(rtl)),
    .sf-outline__link[data-sf-outline-active]:where(:dir(rtl)) {
      border-right-color: Highlight;
    }
    .sf-outline__link[aria-current=location],
    .sf-outline__link[data-sf-outline-active] {
      border-inline-start-color: Highlight;
    }
  }
}