/* docara-shell-source: runtime/component/placeholder/css/placeholder.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-placeholder {
    --sf-placeholder--background-color: var(--sf-transparent);
    --sf-placeholder--color: var(--sf-on-surface);
    --sf-placeholder--gap: var(--sf-space-1);
    --sf-placeholder-content--gap: var(--sf-placeholder-right--gap, var(--sf-space-1));
    --sf-placeholder-header--gap: var(--sf-placeholder-top--gap, var(--sf-space-1\/3));
    --sf-placeholder-actions--gap: var(--sf-space-1\/2);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    width: 100%;
    inline-size: 100%;
    gap: var(--sf-placeholder--gap);
    color: var(--sf-placeholder--color);
    background-color: var(--sf-placeholder--background-color);
    text-align: center;
  }
  .sf-placeholder--column {
    flex-direction: column;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-placeholder--row {
    text-align: left;
  }
  @supports not (text-align: start) {
  html:not([dir="rtl"]) .sf-placeholder--row {
    text-align: left;
    }
  }
  .sf-placeholder--row:where(:dir(ltr)) {
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-placeholder--row {
    text-align: right;
  }
  @supports not (text-align: start) {
  [dir="rtl"] .sf-placeholder--row {
    text-align: right;
    }
  }
  .sf-placeholder--row:where(:dir(rtl)) {
    text-align: right;
  }
  .sf-placeholder--row {
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
  }
  .sf-placeholder > .sf-placeholder__visual {
    flex: none;
    max-width: 100%;
    max-inline-size: 100%;
  }
  .sf-placeholder > .sf-placeholder__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    gap: var(--sf-placeholder-content--gap);
    background-color: var(--sf-transparent);
    background-color: var(--sf-placeholder-content--background-color, var(--sf-placeholder-right--background-color, var(--sf-transparent)));
  }
  .sf-placeholder > .sf-placeholder-right {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    gap: var(--sf-placeholder-content--gap);
    background-color: var(--sf-transparent);
    background-color: var(--sf-placeholder-content--background-color, var(--sf-placeholder-right--background-color, var(--sf-transparent)));
  }
  .sf-placeholder--row > .sf-placeholder__content {
    align-items: flex-start;
  }
  .sf-placeholder--row > .sf-placeholder-right {
    align-items: flex-start;
  }
  .sf-placeholder .sf-placeholder__header {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    gap: var(--sf-placeholder-header--gap);
    background-color: var(--sf-transparent);
    background-color: var(--sf-placeholder-header--background-color, var(--sf-placeholder-top--background-color, var(--sf-transparent)));
  }
  .sf-placeholder .sf-placeholder-top {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    gap: var(--sf-placeholder-header--gap);
    background-color: var(--sf-transparent);
    background-color: var(--sf-placeholder-header--background-color, var(--sf-placeholder-top--background-color, var(--sf-transparent)));
  }
  .sf-placeholder .sf-placeholder__title:not(.does-not-exist) {
    color: var(--sf-on-surface);
    color: var(--sf-placeholder-title--color, var(--sf-placeholder-top-text--color, var(--sf-on-surface)));
    font-family: var(--sf-heading--family);
    font-family: var(--sf-placeholder-title--font-family, var(--sf-placeholder-top-text--font-family, var(--sf-heading--family)));
    font-size: var(--sf-text--size);
    font-size: var(--sf-placeholder-title--font-size, var(--sf-placeholder-top-text--font-size, var(--sf-text--size)));
    font-weight: var(--sf-heading--weight);
    font-weight: var(--sf-placeholder-title--font-weight, var(--sf-placeholder-top-text--font-weight, var(--sf-heading--weight)));
    line-height: var(--sf-text--height);
    line-height: var(--sf-placeholder-title--line-height, var(--sf-placeholder-top-text--line-height, var(--sf-text--height)));
    word-wrap: anywhere;
  }
  .sf-placeholder .sf-placeholder-top-text:first-child {
    color: var(--sf-on-surface);
    color: var(--sf-placeholder-title--color, var(--sf-placeholder-top-text--color, var(--sf-on-surface)));
    font-family: var(--sf-heading--family);
    font-family: var(--sf-placeholder-title--font-family, var(--sf-placeholder-top-text--font-family, var(--sf-heading--family)));
    font-size: var(--sf-text--size);
    font-size: var(--sf-placeholder-title--font-size, var(--sf-placeholder-top-text--font-size, var(--sf-text--size)));
    font-weight: var(--sf-heading--weight);
    font-weight: var(--sf-placeholder-title--font-weight, var(--sf-placeholder-top-text--font-weight, var(--sf-heading--weight)));
    line-height: var(--sf-text--height);
    line-height: var(--sf-placeholder-title--line-height, var(--sf-placeholder-top-text--line-height, var(--sf-text--height)));
    word-wrap: anywhere;
  }
  .sf-placeholder .sf-placeholder__description:not(.does-not-exist) {
    color: var(--sf-on-surface-variant);
    color: var(--sf-placeholder-description--color, var(--sf-placeholder-top-text--color, var(--sf-on-surface-variant)));
    font-family: var(--sf-text--family);
    font-family: var(--sf-placeholder-description--font-family, var(--sf-placeholder-top-text--font-family, var(--sf-text--family)));
    font-size: var(--sf-text--size);
    font-size: var(--sf-placeholder-description--font-size, var(--sf-placeholder-top-text--font-size, var(--sf-text--size)));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-placeholder-description--font-weight, var(--sf-placeholder-top-text--font-weight, var(--sf-font-weight-regular)));
    line-height: var(--sf-text--height);
    line-height: var(--sf-placeholder-description--line-height, var(--sf-placeholder-top-text--line-height, var(--sf-text--height)));
    word-wrap: anywhere;
  }
  .sf-placeholder .sf-placeholder-top-text:nth-child(2) {
    color: var(--sf-on-surface-variant);
    color: var(--sf-placeholder-description--color, var(--sf-placeholder-top-text--color, var(--sf-on-surface-variant)));
    font-family: var(--sf-text--family);
    font-family: var(--sf-placeholder-description--font-family, var(--sf-placeholder-top-text--font-family, var(--sf-text--family)));
    font-size: var(--sf-text--size);
    font-size: var(--sf-placeholder-description--font-size, var(--sf-placeholder-top-text--font-size, var(--sf-text--size)));
    font-weight: var(--sf-font-weight-regular);
    font-weight: var(--sf-placeholder-description--font-weight, var(--sf-placeholder-top-text--font-weight, var(--sf-font-weight-regular)));
    line-height: var(--sf-text--height);
    line-height: var(--sf-placeholder-description--line-height, var(--sf-placeholder-top-text--line-height, var(--sf-text--height)));
    word-wrap: anywhere;
  }
  .sf-placeholder .sf-placeholder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-width: var(--sf-0);
    min-inline-size: var(--sf-0);
    max-width: 100%;
    max-inline-size: 100%;
    gap: var(--sf-placeholder-actions--gap);
  }
  .sf-placeholder--row .sf-placeholder__actions {
    justify-content: flex-start;
  }
}