/* docara-shell-source: smart/smart/popover/css/popover.css */
@layer sf.components {
  /* The trigger keeps its own shape and stays in the flow. */
  sf-popover > [slot=trigger] {
    display: inline-flex;
    align-items: center;
  }
  /* The surface is the consumer's own node, placed beside the trigger and given
     the same treatment every other surface in the Framework has: the elevation's
     colour, its radius and its own scroll. A width of its own, because a surface
     left to its content takes the width of its longest line and a list of names
     is a wide, ragged thing. */
  sf-popover > [slot=content] {
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    width: max-content;
    width: var(--sf-popover--width, -webkit-max-content);
    width: var(--sf-popover--width, -moz-max-content);
    width: var(--sf-popover--width, max-content);
    inline-size: var(--sf-popover--width, -webkit-max-content);
    inline-size: var(--sf-popover--width, -moz-max-content);
    inline-size: var(--sf-popover--width, max-content);
    max-width: 100vi;
    max-inline-size: 100vi;
    max-width: 100vi;
    max-width: var(--sf-popover--max-width, 100vi);
    max-inline-size: var(--sf-popover--max-width, 100vi);
    max-height: 60vb;
    max-block-size: 60vb;
    max-height: 60vb;
    max-height: var(--sf-popover--max-height, 60vb);
    max-block-size: var(--sf-popover--max-height, 60vb);
    overflow: auto;
    border-radius: var(--sf-radius--surface);
    background-color: var(--sf-elevation-2--surface);
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    box-shadow: var(--sf-elevation-2--shadow);
  }
  sf-popover[data-open=false] > [slot=content] {
    display: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=bottom-end] > [slot=content] {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=bottom-end] > [slot=content] {
    right: 0;
    }
  }
  sf-popover[data-placement=bottom-end] > [slot=content]:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=bottom-end] > [slot=content] {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] sf-popover[data-placement=bottom-end] > [slot=content] {
    left: 0;
    }
  }
  sf-popover[data-placement=bottom-end] > [slot=content]:where(:dir(rtl)) {
    left: 0;
  }
  sf-popover[data-placement=bottom-end] > [slot=content] {
    top: 100%;
    inset-block-start: 100%;
    inset-inline-end: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=bottom-start] > [slot=content] {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=bottom-start] > [slot=content] {
    left: 0;
    }
  }
  sf-popover[data-placement=bottom-start] > [slot=content]:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=bottom-start] > [slot=content] {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-popover[data-placement=bottom-start] > [slot=content] {
    right: 0;
    }
  }
  sf-popover[data-placement=bottom-start] > [slot=content]:where(:dir(rtl)) {
    right: 0;
  }
  sf-popover[data-placement=bottom-start] > [slot=content] {
    top: 100%;
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=top-end] > [slot=content] {
    right: 0;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=top-end] > [slot=content] {
    right: 0;
    }
  }
  sf-popover[data-placement=top-end] > [slot=content]:where(:dir(ltr)) {
    right: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=top-end] > [slot=content] {
    left: 0;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] sf-popover[data-placement=top-end] > [slot=content] {
    left: 0;
    }
  }
  sf-popover[data-placement=top-end] > [slot=content]:where(:dir(rtl)) {
    left: 0;
  }
  sf-popover[data-placement=top-end] > [slot=content] {
    bottom: 100%;
    inset-block-end: 100%;
    inset-inline-end: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=top-start] > [slot=content] {
    left: 0;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=top-start] > [slot=content] {
    left: 0;
    }
  }
  sf-popover[data-placement=top-start] > [slot=content]:where(:dir(ltr)) {
    left: 0;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=top-start] > [slot=content] {
    right: 0;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-popover[data-placement=top-start] > [slot=content] {
    right: 0;
    }
  }
  sf-popover[data-placement=top-start] > [slot=content]:where(:dir(rtl)) {
    right: 0;
  }
  sf-popover[data-placement=top-start] > [slot=content] {
    bottom: 100%;
    inset-block-end: 100%;
    inset-inline-start: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=inline-end] > [slot=content] {
    left: 100%;
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=inline-end] > [slot=content] {
    left: 100%;
    }
  }
  sf-popover[data-placement=inline-end] > [slot=content]:where(:dir(ltr)) {
    left: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=inline-end] > [slot=content] {
    right: 100%;
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-popover[data-placement=inline-end] > [slot=content] {
    right: 100%;
    }
  }
  sf-popover[data-placement=inline-end] > [slot=content]:where(:dir(rtl)) {
    right: 100%;
  }
  sf-popover[data-placement=inline-end] > [slot=content] {
    top: 0;
    inset-block-start: 0;
    inset-inline-start: 100%;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-popover[data-placement=inline-start] > [slot=content] {
    right: 100%;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) sf-popover[data-placement=inline-start] > [slot=content] {
    right: 100%;
    }
  }
  sf-popover[data-placement=inline-start] > [slot=content]:where(:dir(ltr)) {
    right: 100%;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-popover[data-placement=inline-start] > [slot=content] {
    left: 100%;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] sf-popover[data-placement=inline-start] > [slot=content] {
    left: 100%;
    }
  }
  sf-popover[data-placement=inline-start] > [slot=content]:where(:dir(rtl)) {
    left: 100%;
  }
  sf-popover[data-placement=inline-start] > [slot=content] {
    top: 0;
    inset-block-start: 0;
    inset-inline-end: 100%;
  }
}