/* docara-shell-source: smart/smart/composition-overlay/css/composition-overlay.css */
@charset "UTF-8";
/* sf-focus-ring: editor — the editing canvas marks what is being edited in its
   own colour, which is part of the editor's language rather than the product's
   focus colour. Width and style stay the system's. */
@layer sf.components {
  .sf-composition-overlay {
    --sf-composition-overlay-color: var(--sf-primary, Highlight);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 80;
    z-index: var(--sf-composition-overlay-z-index, var(--sf-z-index-8, 80));
    pointer-events: none;
  }
  .sf-composition-overlay-layer,
  .sf-composition-overlay-insertions {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    pointer-events: none;
  }
  .sf-composition-overlay-frame {
    position: fixed;
    box-sizing: border-box;
    border: 1px dashed var(--sf-composition-overlay-color);
    border-radius: 0.25rem;
    border-radius: var(--sf-radius-1, 0.25rem);
    transition: top 0.1s, left 0.1s, width 0.1s, height 0.1s;
    transition: top var(--sf-duration-fast, 0.1s), left var(--sf-duration-fast, 0.1s), width var(--sf-duration-fast, 0.1s), height var(--sf-duration-fast, 0.1s);
  }
  .sf-composition-overlay-frame--selected {
    border-style: solid;
    border-width: 2px;
  }
  .sf-composition-overlay[data-sf-overlay-focus] .sf-composition-overlay-frame--selected {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);
    outline-offset: 2px;
  }
  .sf-composition-overlay-frame[hidden] {
    display: none;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-composition-overlay-label{
    left: -1px;
  }
  @supports not (inset-inline-start: initial){
  html:not([dir="rtl"]) .sf-composition-overlay-label{
    left: -1px;
    }
  }
  .sf-composition-overlay-label:where(:dir(ltr)){
    left: -1px;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-composition-overlay-label{
    right: -1px;
  }
  @supports not (inset-inline-start: initial){
  [dir="rtl"] .sf-composition-overlay-label{
    right: -1px;
    }
  }
  .sf-composition-overlay-label:where(:dir(rtl)){
    right: -1px;
  }
  .sf-composition-overlay-label {
    position: absolute;
    bottom: 100%;
    inset-block-end: 100%;
    inset-inline-start: -1px;
    max-width: 100%;
    max-inline-size: 100%;
    overflow: hidden;
    padding: 0 0.25rem;
    padding: 0 var(--sf-space-1, 0.25rem);
    border-radius: 0.25rem 0.25rem 0 0;
    border-radius: var(--sf-radius-1, 0.25rem) var(--sf-radius-1, 0.25rem) 0 0;
    background: var(--sf-composition-overlay-color);
    color: HighlightText;
    color: var(--sf-on-primary, HighlightText);
    font-size: 0.75rem;
    font-size: var(--sf-text-1--size, 0.75rem);
    line-height: 1.25rem;
    line-height: var(--sf-text-1--height, 1.25rem);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sf-composition-overlay-toolbar {
    position: fixed;
    display: flex;
    gap: 0.25rem;
    gap: var(--sf-space-1, 0.25rem);
    padding: 0.25rem;
    padding: var(--sf-space-1, 0.25rem);
    border-radius: 0.25rem;
    border-radius: var(--sf-radius-1, 0.25rem);
    /* A toolbar floats over the page: step 2's surface and shadow. */
    background: Canvas;
    background: var(--sf-elevation-2--surface, Canvas);
    --sf-on-surface-variant: var(--sf-on-elevation-2--variant);
    color: CanvasText;
    color: var(--sf-on-surface, CanvasText);
    box-shadow: var(--sf-elevation-2--shadow);
    pointer-events: auto;
  }
  .sf-composition-overlay-toolbar[hidden] {
    display: none;
  }
  .sf-composition-overlay-action,
  .sf-composition-overlay-insert {
    font: inherit;
    cursor: pointer;
  }
  .sf-composition-overlay-action {
    padding: 0.25rem 0.5rem;
    padding: var(--sf-space-1, 0.25rem) var(--sf-space-2, 0.5rem);
    border: 1px solid GrayText;
    border: 1px solid var(--sf-outline, GrayText);
    border-radius: 0.25rem;
    border-radius: var(--sf-radius-1, 0.25rem);
    background: Canvas;
    background: var(--sf-surface-1, Canvas);
    color: CanvasText;
    color: var(--sf-on-surface, CanvasText);
  }
  .sf-composition-overlay-insert {
    position: fixed;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    box-sizing: border-box;
    height: 1.5rem;
    block-size: 1.5rem;
    margin-top: -0.75rem;
    -webkit-margin-before: -0.75rem;
            margin-block-start: -0.75rem;
    padding: 0;
    border: 0;
    background: linear-gradient(var(--sf-composition-overlay-color), var(--sf-composition-overlay-color)) center/100% 1px no-repeat;
    color: var(--sf-composition-overlay-color);
    opacity: 0.6;
    pointer-events: none;
  }
  .sf-composition-overlay-insert:hover,
  .sf-composition-overlay-insert.focus-visible {
    opacity: 1;
  }
  .sf-composition-overlay-insert:hover,
  .sf-composition-overlay-insert:focus-visible {
    opacity: 1;
  }
  .sf-composition-overlay-insert-mark {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    width: 1.5rem;
    inline-size: 1.5rem;
    height: 1.5rem;
    block-size: 1.5rem;
    border: 1px solid var(--sf-composition-overlay-color);
    border-radius: 50%;
    background: Canvas;
    background: var(--sf-surface-1, Canvas);
    line-height: 1;
    pointer-events: auto;
  }
  .sf-composition-overlay-insert[aria-pressed=true] {
    background-size: 100% 3px;
    opacity: 1;
  }
  .sf-composition-overlay-insert[aria-pressed=true] .sf-composition-overlay-insert-mark {
    background: var(--sf-composition-overlay-color);
    color: HighlightText;
    color: var(--sf-on-primary, HighlightText);
  }
  .sf-composition-overlay-action.focus-visible,
  .sf-composition-overlay-insert.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);
    outline-offset: 2px;
  }
  .sf-composition-overlay-action:focus-visible,
  .sf-composition-overlay-insert:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-composition-overlay-color);
    outline-offset: 2px;
  }
  .sf-composition-overlay-tree,
  .sf-composition-overlay-live {
    position: fixed;
    width: 1px;
    inline-size: 1px;
    height: 1px;
    block-size: 1px;
    overflow: hidden;
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    white-space: nowrap;
    pointer-events: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .sf-composition-overlay-frame {
      transition: none;
    }
  }
  .sf-composition-overlay-drop {
    position: fixed;
    z-index: 90;
    z-index: var(--sf-sortable-ghost-z-index, var(--sf-z-index-9, 90));
    border-radius: 2px;
    background: Highlight;
    background: var(--sf-primary, Highlight);
    pointer-events: none;
  }
  .sf-composition-overlay-drop[hidden] {
    display: none;
  }
  .sf-composition-overlay-frame--selected .sf-composition-overlay-label {
    cursor: -webkit-grab;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
  }
}