/* docara-shell-source: smart/smart/empty-state/css/empty-state.css */
@layer sf.components {
  /* A centred column, at most 28rem wide: the icon, the title at the size's
     title role, a sentence, and the actions, wrapping when they must. */
  sf-empty-state {
    display: block;
  }
  .sf-empty-state {
    --sf-empty-state--gap: var(--sf-space-1\/2);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-empty-state--gap);
    max-width: var(--sf-g4);
    max-inline-size: var(--sf-g4);
    max-width: var(--sf-g4);
    max-width: var(--sf-empty-state-max-inline-size, var(--sf-g4));
    max-inline-size: var(--sf-empty-state-max-inline-size, var(--sf-g4));
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    padding-top: var(--sf-space-1);
    padding-bottom: var(--sf-space-1);
    padding-block: var(--sf-space-1);
    text-align: center;
    color: var(--sf-on-surface);
  }
  .sf-empty-state-title {
    margin: 0;
    font-size: var(--sf-heading-5--size);
    line-height: var(--sf-heading-5--height);
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-empty-state-text {
    margin: 0;
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-medium--size);
    line-height: var(--sf-text-medium--height);
  }
  .sf-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sf-space-1\/3);
    margin-top: var(--sf-a4);
    -webkit-margin-before: var(--sf-a4);
            margin-block-start: var(--sf-a4);
  }
  .sf-empty-state--size-1-2 {
    --sf-empty-state--gap: var(--sf-space-1\/3);
    padding-top: var(--sf-space-1\/2);
    padding-bottom: var(--sf-space-1\/2);
    padding-block: var(--sf-space-1\/2);
  }
  .sf-empty-state--size-1-2 .sf-empty-state-title {
    font-size: var(--sf-heading-6--size);
    line-height: var(--sf-heading-6--height);
  }
  .sf-empty-state--size-1-2 .sf-empty-state-text {
    font-size: var(--sf-text-small--size);
    line-height: var(--sf-text-small--height);
  }
  .sf-empty-state--size-2 {
    --sf-empty-state--gap: var(--sf-space-1);
    padding-top: var(--sf-space-2);
    padding-bottom: var(--sf-space-2);
    padding-block: var(--sf-space-2);
  }
  .sf-empty-state--size-2 .sf-empty-state-title {
    font-size: var(--sf-heading-4--size);
    line-height: var(--sf-heading-4--height);
  }
  .sf-empty-state--size-2 .sf-empty-state-text {
    font-size: var(--sf-text-large--size);
    line-height: var(--sf-text-large--height);
  }
  /* The inline form: one line at a list row's height and inset, so it sits in
     a menu, a dropdown or a search without a frame of its own. The icon is the
     text's size, in the muted icon role; the words are muted ink. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-start, var(--sf-a8));
  }
  @supports not (padding-inline-start: initial) {
  html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-start, var(--sf-a8));
    }
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-end, var(--sf-a8));
  }
  @supports not (padding-inline-end: initial) {
  html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-end, var(--sf-a8));
    }
  }
  .sf-empty-state.sf-empty-state--inline:where(:dir(ltr)) {
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-start, var(--sf-a8));
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-end, var(--sf-a8));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-start, var(--sf-a8));
  }
  @supports not (padding-inline-start: initial) {
  [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-start, var(--sf-a8));
    }
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-end, var(--sf-a8));
  }
  @supports not (padding-inline-end: initial) {
  [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-end, var(--sf-a8));
    }
  }
  .sf-empty-state.sf-empty-state--inline:where(:dir(rtl)) {
    padding-right: var(--sf-a8);
    padding-right: var(--sf-context-menu--inset-start, var(--sf-a8));
    padding-left: var(--sf-a8);
    padding-left: var(--sf-context-menu--inset-end, var(--sf-a8));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-empty-state.sf-empty-state--inline {
    text-align: left;
    }
  }
  .sf-empty-state.sf-empty-state--inline:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-empty-state.sf-empty-state--inline {
    text-align: right;
    }
  }
  .sf-empty-state.sf-empty-state--inline:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-empty-state.sf-empty-state--inline {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sf-space-1\/3);
    max-width: none;
    max-inline-size: none;
    margin-left: 0;
    margin-right: 0;
    margin-inline: 0;
    min-height: var(--sf-ui-1\/2--control-height);
    min-block-size: var(--sf-ui-1\/2--control-height);
    padding-top: 0;
    padding-bottom: 0;
    padding-block: 0;
    padding-left: var(--sf-a8);
    padding-right: var(--sf-a8);
    padding-inline: var(--sf-a8) var(--sf-a8);
    padding-inline: var(--sf-context-menu--inset-start, var(--sf-a8)) var(--sf-context-menu--inset-end, var(--sf-a8));
    text-align: start;
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-small--size);
    line-height: var(--sf-text-small--height);
  }
  .sf-empty-state--inline .sf-empty-state-icon {
    flex: none;
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-small--height);
  }
  .sf-empty-state--inline .sf-empty-state-line {
    min-width: 0;
    min-inline-size: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-empty-state--inline .sf-empty-state-link {
    margin-left: auto;
  }
  @supports not (margin-inline-start: initial) {
  html:not([dir="rtl"]) .sf-empty-state--inline .sf-empty-state-link {
    margin-left: auto;
    }
  }
  .sf-empty-state--inline .sf-empty-state-link:where(:dir(ltr)) {
    margin-left: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-empty-state--inline .sf-empty-state-link {
    margin-right: auto;
  }
  @supports not (margin-inline-start: initial) {
  [dir="rtl"] .sf-empty-state--inline .sf-empty-state-link {
    margin-right: auto;
    }
  }
  .sf-empty-state--inline .sf-empty-state-link:where(:dir(rtl)) {
    margin-right: auto;
  }
  .sf-empty-state--inline .sf-empty-state-link {
    -webkit-margin-start: auto;
            margin-inline-start: auto;
  }
  .sf-empty-state.sf-empty-state--inline.sf-empty-state--size-1 {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
    font-size: var(--sf-text-medium--size);
    line-height: var(--sf-text-medium--height);
  }
  .sf-empty-state--inline.sf-empty-state--size-1 .sf-empty-state-icon {
    font-size: var(--sf-text-medium--height);
  }
}