/* docara-shell-source: runtime/component/reference-link/css/reference-link.css */
/*
* Main SCSS file for including styles for component.
*
* Imports:
* - Styling variables (_var__component_name.scss)
* - Base styles (_css__component_name.scss)
*
*/
@layer sf.components {
  .sf-reference-link {
    /* The card sits on whatever surface holds it; hover and press add the
       container overlay. --sf-surface is not a token, so this was transparent
       already -- now it says so. */
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--border-color: var(--sf-outline-variant);
    --sf-reference-link--gap: var(--sf-space-1);
    --sf-reference-link--padding-block: var(--sf-space-1);
    --sf-reference-link--padding-inline: var(--sf-space-1);
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-reference-link--gap);
    width: 100%;
    inline-size: 100%;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    padding-top: var(--sf-reference-link--padding-block);
    padding-bottom: var(--sf-reference-link--padding-block);
    padding-block: var(--sf-reference-link--padding-block);
    padding-left: var(--sf-reference-link--padding-inline);
    padding-right: var(--sf-reference-link--padding-inline);
    padding-inline: var(--sf-reference-link--padding-inline);
    color: var(--sf-on-surface);
    background-color: var(--sf-reference-link--background-color);
    border: var(--sf-px) solid var(--sf-reference-link--border-color);
    border-radius: var(--sf-radius--ui);
  }
  .sf-reference-link :where(.sf-reference-link__main, .sf-reference-link-left) {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--sf-space-1\/3);
    gap: var(--sf-reference-link--main-gap, var(--sf-space-1\/3));
    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-1);
    font-size: var(--sf-reference-link--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-reference-link--line-height, var(--sf-text-height-1));
  }
  .sf-reference-link :where(.sf-reference-link__link, .sf-reference-link-left > a) {
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    color: var(--sf-link);
    font: inherit;
    word-wrap: anywhere;
    text-decoration: underline;
    text-underline-offset: var(--sf-a3);
  }
  .sf-reference-link :where(.sf-reference-link__link, .sf-reference-link-left > a)::after {
    position: absolute;
    top: var(--sf-0);
    right: var(--sf-0);
    bottom: var(--sf-0);
    left: var(--sf-0);
    inset: var(--sf-0);
    content: "";
  }
  .sf-reference-link :where(.sf-reference-link__icon, .sf-reference-link-left > .sf-icon) {
    flex: none;
    height: var(--sf-text-height-1);
    block-size: var(--sf-text-height-1);
    height: var(--sf-text-height-1);
    height: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    block-size: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    width: var(--sf-text-height-1);
    inline-size: var(--sf-text-height-1);
    width: var(--sf-text-height-1);
    width: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    inline-size: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    color: var(--sf-primary);
    font-size: var(--sf-text-height-1);
    font-size: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    /* The icon component sizes itself from these, so the line is passed on. */
    --sf-icon--font-size: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    --sf-icon--height: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    --sf-icon--width: var(--sf-reference-link--line-height, var(--sf-text-height-1));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text) {
    text-align: right;
  }
  @supports not (text-align: end) {
  html:not([dir="rtl"]) .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text) {
    text-align: right;
    }
  }
  .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(ltr)) {
    text-align: right;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text) {
    text-align: left;
  }
  @supports not (text-align: end) {
  [dir="rtl"] .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text) {
    text-align: left;
    }
  }
  .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(rtl)) {
    text-align: left;
  }
  .sf-reference-link :where(.sf-reference-link__meta, .sf-reference-link-text) {
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    color: var(--sf-on-surface-variant);
    font-family: var(--sf-text--family);
    font-size: var(--sf-text-size-1);
    font-size: var(--sf-reference-link--font-size, var(--sf-text-size-1));
    font-weight: var(--sf-font-weight-regular);
    line-height: var(--sf-text-height-1);
    line-height: var(--sf-reference-link--line-height, var(--sf-text-height-1));
    word-wrap: anywhere;
    text-align: end;
  }
}
@layer sf.components {
  /* Plain: a reference that stands inside a box of its own already -- a
     record's field, a table cell -- where the card's frame, fill and padding
     draw a second box around the value and read as a control the value is not.
     What is left is the link, on the line, taking the width of its own text. */
  .sf-reference-link.sf-reference-link--plain {
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--padding-block: var(--sf-0);
    --sf-reference-link--padding-inline: var(--sf-0);
    width: auto;
    inline-size: auto;
    border: 0;
  }
}
@layer sf.states {
  /* The hover and press fills belong to the card. A plain reference has no card
     to fill, and filling the line behind the words was the grey patch the owner
     saw behind a field's value. */
  .sf-reference-link.sf-reference-link--plain[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:hover\)] {
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--border-color: transparent;
  }
  .sf-reference-link.sf-reference-link--plain:has(:where(.sf-reference-link__link, .sf-reference-link-left > a):hover) {
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--border-color: transparent;
  }
  .sf-reference-link.sf-reference-link--plain[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:active\)] {
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--border-color: transparent;
  }
  .sf-reference-link.sf-reference-link--plain:has(:where(.sf-reference-link__link, .sf-reference-link-left > a):active) {
    --sf-reference-link--background-color: transparent;
    --sf-reference-link--border-color: transparent;
  }
  .sf-reference-link:not(.sf-reference-link--plain)[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:hover\)] {
    --sf-reference-link--background-color: var(--sf-surface-container-hover);
    --sf-reference-link--border-color: var(--sf-outline-primary);
  }
  .sf-reference-link:not(.sf-reference-link--plain):has(:where(.sf-reference-link__link, .sf-reference-link-left > a):hover) {
    --sf-reference-link--background-color: var(--sf-surface-container-hover);
    --sf-reference-link--border-color: var(--sf-outline-primary);
  }
  .sf-reference-link:not(.sf-reference-link--plain)[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:active\)] {
    --sf-reference-link--background-color: var(--sf-surface-container-active);
  }
  .sf-reference-link:not(.sf-reference-link--plain):has(:where(.sf-reference-link__link, .sf-reference-link-left > a):active) {
    --sf-reference-link--background-color: var(--sf-surface-container-active);
  }
  .sf-reference-link :where(.sf-reference-link__link, .sf-reference-link-left > a):focus {
    outline: none;
  }
  .sf-reference-link[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\).focus-visible\)] {
    outline-color: var(--sf-focus);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  .sf-reference-link:has(:where(.sf-reference-link__link, .sf-reference-link-left > a).focus-visible) {
    outline-color: var(--sf-focus);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  .sf-reference-link[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:focus-visible\)] {
    outline-color: var(--sf-focus);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  .sf-reference-link:has(:where(.sf-reference-link__link, .sf-reference-link-left > a):focus-visible) {
    outline-color: var(--sf-focus);
    outline-offset: var(--sf-focus--offset);
    outline-style: var(--sf-focus--style);
    outline-width: var(--sf-focus--width);
  }
  .sf-reference-link.disabled {
    --sf-reference-link--border-color: var(--sf-outline-disable);
    color: var(--sf-on-disable);
  }
  .sf-reference-link[aria-disabled=true] {
    --sf-reference-link--border-color: var(--sf-outline-disable);
    color: var(--sf-on-disable);
  }
  .sf-reference-link.disabled :where(.sf-reference-link__main, .sf-reference-link-left, .sf-reference-link__meta, .sf-reference-link-text, .sf-icon) {
    color: var(--sf-on-disable);
  }
  .sf-reference-link[aria-disabled=true] :where(.sf-reference-link__main, .sf-reference-link-left, .sf-reference-link__meta, .sf-reference-link-text, .sf-icon) {
    color: var(--sf-on-disable);
  }
  @media (max-width: 31.999rem) {
    /* The card stacks on a narrow screen; a sized reference is a control in a
       row or a cell and keeps its one line at the row's height. */
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) {
      align-items: flex-start;
      flex-direction: column;
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      padding-left: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
    }
    @supports not (padding-inline-start: initial) {
    html:not([dir="rtl"]) .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      padding-left: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
      }
    }
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(ltr)) {
      padding-left: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
    }
    _:-ms-input-placeholder, [dir="rtl"] .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      padding-right: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
    }
    @supports not (padding-inline-start: initial) {
    [dir="rtl"] .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      padding-right: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
      }
    }
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(rtl)) {
      padding-right: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
    }
    _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      text-align: left;
    }
    @supports not (text-align: start) {
    html:not([dir="rtl"]) .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      text-align: left;
      }
    }
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(ltr)) {
      text-align: left;
    }
    _:-ms-input-placeholder, [dir="rtl"] .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      text-align: right;
    }
    @supports not (text-align: start) {
    [dir="rtl"] .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      text-align: right;
      }
    }
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text):where(:dir(rtl)) {
      text-align: right;
    }
    .sf-reference-link:not([class*=sf-reference-link--size-]):not([class*=sf-reference-link--line-]) :where(.sf-reference-link__meta, .sf-reference-link-text) {
      -webkit-padding-start: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
              padding-inline-start: calc(var(--sf-text-height-1) + var(--sf-space-1\/3));
      text-align: start;
    }
  }
  @media (forced-colors: active) {
    .sf-reference-link[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\).focus-visible\)] {
      outline-color: Highlight;
    }
    .sf-reference-link:has(:where(.sf-reference-link__link, .sf-reference-link-left > a).focus-visible) {
      outline-color: Highlight;
    }
    .sf-reference-link[\:has\(\:where\(.sf-reference-link__link\,\%20.sf-reference-link-left\%20\%3E\%20a\)\:focus-visible\)] {
      outline-color: Highlight;
    }
    .sf-reference-link:has(:where(.sf-reference-link__link, .sf-reference-link-left > a):focus-visible) {
      outline-color: Highlight;
    }
  }
}
@layer sf.components {
  /* A sized reference is a control of its size, so it sits in a row of fields
     or in a table cell at the row's height: the text, the icon on the line, the
     icon-to-label step and the block padding giving up the border. Without a
     size it keeps its card spacing. */
  .sf-reference-link.sf-reference-link--size-1\/2 {
    --sf-reference-link--padding-block: calc(var(--sf-ui-1\/2--space-y-tightness-default) - var(--sf-px));
    --sf-reference-link--padding-inline: var(--sf-ui-1\/2--space-x);
    --sf-reference-link--gap: var(--sf-ui-1\/2--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-1\/2--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-1\/2);
    --sf-reference-link--line-height: var(--sf-text-height-1\/2);
  }
  .sf-reference-link.sf-reference-link--size-1 {
    --sf-reference-link--padding-block: calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px));
    --sf-reference-link--padding-inline: var(--sf-ui-1--space-x);
    --sf-reference-link--gap: var(--sf-ui-1--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-1--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-1);
    --sf-reference-link--line-height: var(--sf-text-height-1);
  }
  .sf-reference-link.sf-reference-link--size-2 {
    --sf-reference-link--padding-block: calc(var(--sf-ui-2--space-y-tightness-default) - var(--sf-px));
    --sf-reference-link--padding-inline: var(--sf-ui-2--space-x);
    --sf-reference-link--gap: var(--sf-ui-2--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-2--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-2);
    --sf-reference-link--line-height: var(--sf-text-height-2);
  }
}
@layer sf.components {
  /* On a text line, in a table cell or beside other text, a reference is a
     link: no card border or padding, the icon on the line and the label in the
     line's text, so the row keeps its control height. */
  .sf-reference-link.sf-reference-link--line-1\/2 {
    --sf-reference-link--padding-block: calc(var(--sf-px) * 0);
    --sf-reference-link--padding-inline: calc(var(--sf-px) * 0);
    --sf-reference-link--gap: var(--sf-ui-1\/2--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-1\/2--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-1\/2);
    --sf-reference-link--line-height: var(--sf-text-height-1\/2);
    border-width: 0;
    height: var(--sf-text-height-1\/2);
    block-size: var(--sf-text-height-1\/2);
  }
  .sf-reference-link.sf-reference-link--line-1 {
    --sf-reference-link--padding-block: calc(var(--sf-px) * 0);
    --sf-reference-link--padding-inline: calc(var(--sf-px) * 0);
    --sf-reference-link--gap: var(--sf-ui-1--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-1--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-1);
    --sf-reference-link--line-height: var(--sf-text-height-1);
    border-width: 0;
    height: var(--sf-text-height-1);
    block-size: var(--sf-text-height-1);
  }
  .sf-reference-link.sf-reference-link--line-2 {
    --sf-reference-link--padding-block: calc(var(--sf-px) * 0);
    --sf-reference-link--padding-inline: calc(var(--sf-px) * 0);
    --sf-reference-link--gap: var(--sf-ui-2--text-space-x);
    --sf-reference-link--main-gap: var(--sf-ui-2--text-space-x);
    --sf-reference-link--font-size: var(--sf-text-size-2);
    --sf-reference-link--line-height: var(--sf-text-height-2);
    border-width: 0;
    height: var(--sf-text-height-2);
    block-size: var(--sf-text-height-2);
  }
}