/* docara-shell-source: smart/smart/resizer/css/resizer.css */
@layer sf.components {
  /* A strip on the panel's edge, wider than it looks so a pointer finds it: the
     line it draws on hover, focus and drag is a hairline in the middle. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) sf-resizer {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
    }
  }
  sf-resizer:where(:dir(ltr)) {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] sf-resizer {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
    }
  }
  sf-resizer:where(:dir(rtl)) {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  sf-resizer {
    --sf-resizer--hit: var(--sf-a8);
    position: absolute;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-end: calc(-1 * var(--sf-resizer--hit) / 2);
    /* Above the panel's own positioned layers -- a menu that lifts itself to
       z-6 covered the handle and the drag and double-click never reached it
       (docs trial 5) -- and below the page's overlays (z-9). */
    z-index: 70;
    z-index: var(--sf-z-index-7, 70);
    display: block;
    width: var(--sf-resizer--hit);
    inline-size: var(--sf-resizer--hit);
    cursor: col-resize;
    touch-action: none;
    outline: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer[edge=inline-start] {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer[edge=inline-start] {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
    }
  }
  sf-resizer[edge=inline-start]:where(:dir(ltr)) {
    left: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer[edge=inline-start] {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer[edge=inline-start] {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
    }
  }
  sf-resizer[edge=inline-start]:where(:dir(rtl)) {
    right: calc(-1 * var(--sf-resizer--hit) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer[edge=inline-start] {
    right: auto;
  }
  @supports not (inset-inline-end: initial) {
  html:not([dir="rtl"]) sf-resizer[edge=inline-start] {
    right: auto;
    }
  }
  sf-resizer[edge=inline-start]:where(:dir(ltr)) {
    right: auto;
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer[edge=inline-start] {
    left: auto;
  }
  @supports not (inset-inline-end: initial) {
  [dir="rtl"] sf-resizer[edge=inline-start] {
    left: auto;
    }
  }
  sf-resizer[edge=inline-start]:where(:dir(rtl)) {
    left: auto;
  }
  sf-resizer[edge=inline-start] {
    inset-inline-start: calc(-1 * var(--sf-resizer--hit) / 2);
    inset-inline-end: auto;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer::after {
    left: calc(50% - var(--sf-px));
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer::after {
    left: calc(50% - var(--sf-px));
    }
  }
  sf-resizer::after:where(:dir(ltr)) {
    left: calc(50% - var(--sf-px));
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer::after {
    right: calc(50% - var(--sf-px));
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer::after {
    right: calc(50% - var(--sf-px));
    }
  }
  sf-resizer::after:where(:dir(rtl)) {
    right: calc(50% - var(--sf-px));
  }
  sf-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-block: 0;
    inset-inline-start: calc(50% - var(--sf-px));
    width: calc(2 * var(--sf-px));
    inline-size: calc(2 * var(--sf-px));
    background-color: transparent;
    transition: background-color 0.15s ease;
    transition: background-color var(--sf-duration-fast, 0.15s) var(--sf-animation, ease);
  }
  sf-resizer[aria-disabled=true] {
    cursor: default;
  }
  html[data-sf-resizer-active],
  html[data-sf-resizer-active] * {
    cursor: col-resize !important;
    -webkit-user-select: none !important;
       -moz-user-select: none !important;
        -ms-user-select: none !important;
            user-select: none !important;
  }
}
@layer sf.states {
  sf-resizer:not([aria-disabled=true]):hover::after,
  sf-resizer[data-sf-resizing]::after {
    background-color: var(--sf-primary);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(ltr)) {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(rtl)) {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  sf-resizer.focus-visible::after {
    background-color: var(--sf-focus--color);
    width: var(--sf-focus--width);
    inline-size: var(--sf-focus--width);
    inset-inline-start: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(ltr)) {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer:focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer:focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer:focus-visible::after:where(:dir(ltr)) {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(rtl)) {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer:focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer:focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer:focus-visible::after:where(:dir(rtl)) {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  html:not([dir="rtl"]) sf-resizer.focus-visible::after {
    left: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(ltr)) {
    left: calc(50% - var(--sf-focus--width) / 2);
  }
  _:-ms-input-placeholder, [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  @supports not (inset-inline-start: initial) {
  [dir="rtl"] sf-resizer.focus-visible::after {
    right: calc(50% - var(--sf-focus--width) / 2);
    }
  }
  sf-resizer.focus-visible::after:where(:dir(rtl)) {
    right: calc(50% - var(--sf-focus--width) / 2);
  }
  sf-resizer.focus-visible::after {
    background-color: var(--sf-focus--color);
    width: var(--sf-focus--width);
    width: var(--sf-focus--width);
    inline-size: var(--sf-focus--width);
    inset-inline-start: calc(50% - var(--sf-focus--width) / 2);
  }
  sf-resizer:focus-visible::after {
    background-color: var(--sf-focus--color);
    width: var(--sf-focus--width);
    inline-size: var(--sf-focus--width);
    inset-inline-start: calc(50% - var(--sf-focus--width) / 2);
  }
}
@media (prefers-reduced-motion: reduce) {
  sf-resizer::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  sf-resizer:hover::after,
  sf-resizer.focus-visible::after,
  sf-resizer[data-sf-resizing]::after {
    background-color: Highlight;
  }
  sf-resizer:hover::after,
  sf-resizer:focus-visible::after,
  sf-resizer[data-sf-resizing]::after {
    background-color: Highlight;
  }
}