/* docara-shell-source: runtime/component/context-menu/css/context-menu.css */
@charset "UTF-8";
@layer sf.components {
  .sf-context-menu {
    --sf-context-menu-viewport-space: var(--sf-space-1\/2);
    scroll-behavior: auto;
    --sf-context-menu-tail-size: 0px;
    --sf-context-menu-tail-half: 0px;
    --sf-context-menu-tail-corner-offset: 0px;
  }
  .sf-context-menu > .relative {
    display: flex;
    min-width: 0;
    min-inline-size: 0;
    min-height: 0;
    min-block-size: 0;
    max-width: none;
    max-inline-size: none;
    max-width: none;
    max-width: var(--sf-context-menu-available-inline-size, none);
    max-inline-size: var(--sf-context-menu-available-inline-size, none);
    max-height: none;
    max-block-size: none;
    max-height: none;
    max-height: var(--sf-context-menu-available-block-size, none);
    max-block-size: var(--sf-context-menu-available-block-size, none);
  }
}
@layer sf.states {
  /* A menu's items start their content where a field of their size starts its
     content, the axis every list in a panel shares (a dropdown's options sit on
     it to line up with their field): the item gives back the panel's inset and
     adds the field border. Measured before: the content sat 3px right of a
     dropdown list's.
     The insets are published on the panel, so anything else a window puts in it
     (a search field, a block of buttons) reads the same axis instead of copying
     the arithmetic: item-inset is the content edge, label-inset where a label
     after a picture or text in a text-only row starts. */
  /* An item is a row that starts at the axis, whatever its markup says: a button
     written without the flex class is a block, and a block button centres its
     text, so a short item's label sat further right than a long one's. A Smart
     menu renders its items inside sf-button hosts, so both shapes are named. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content > .sf-button,html:not([dir="rtl"])
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button{
    text-align: left;
  }
  @supports not (text-align: start){
  html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content > .sf-button,html:not([dir="rtl"])
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button{
    text-align: left;
    }
  }
  .sf-context-menu .sf-context-menu-content > .sf-button:where(:dir(ltr)),
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button:where(:dir(ltr)){
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu .sf-context-menu-content > .sf-button,[dir="rtl"]
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button{
    text-align: right;
  }
  @supports not (text-align: start){
  [dir="rtl"] .sf-context-menu .sf-context-menu-content > .sf-button,[dir="rtl"]
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button{
    text-align: right;
    }
  }
  .sf-context-menu .sf-context-menu-content > .sf-button:where(:dir(rtl)),
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button:where(:dir(rtl)){
    text-align: right;
  }
  .sf-context-menu .sf-context-menu-content > .sf-button,
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
  }
  .sf-context-menu .sf-context-menu-content {
    --sf-context-menu--item-inset-start-1\/2: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - 0px);
    --sf-context-menu--item-inset-start-1\/2: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-start, 0px));
    --sf-context-menu--item-inset-end-1\/2: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - 0px);
    --sf-context-menu--item-inset-end-1\/2: calc(var(--sf-ui-1\/2--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-end, 0px));
    --sf-context-menu--label-inset-1\/2: calc(var(--sf-context-menu--item-inset-start-1\/2) + var(--sf-ui-1\/2--text-space-x));
    --sf-context-menu--item-inset-start-1: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-start, 0px));
    --sf-context-menu--item-inset-end-1: calc(var(--sf-ui-1--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-end, 0px));
    --sf-context-menu--label-inset-1: calc(var(--sf-context-menu--item-inset-start-1) + var(--sf-ui-1--text-space-x));
    --sf-context-menu--item-inset-start-2: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-start, 0px));
    --sf-context-menu--item-inset-end-2: calc(var(--sf-ui-2--space-x) + var(--sf-px) - var(--sf-context-menu-content--padding-inline-end, 0px));
    --sf-context-menu--label-inset-2: calc(var(--sf-context-menu--item-inset-start-2) + var(--sf-ui-2--text-space-x));
    --sf-context-menu--line: var(--sf-text-height-1\/2);
    --sf-context-menu--text-size: var(--sf-text-size-1\/2);
    --sf-context-menu--space-y: var(--sf-ui-1\/2--space-y);
    --sf-context-menu--field-space-x: var(--sf-ui-1\/2--space-x);
    --sf-context-menu--block-space: var(--sf-space-1\/3);
    --sf-context-menu--inset-start: var(--sf-context-menu--item-inset-start-1\/2);
    --sf-context-menu--inset-end: var(--sf-context-menu--item-inset-end-1\/2);
  }
  .sf-context-menu.sf-context-menu--size-1 .sf-context-menu-content {
    --sf-context-menu--line: var(--sf-text-height-1);
    --sf-context-menu--text-size: var(--sf-text-size-1);
    --sf-context-menu--space-y: var(--sf-ui-1--space-y);
    --sf-context-menu--field-space-x: var(--sf-ui-1--space-x);
    --sf-context-menu--block-space: var(--sf-space-1\/2);
    --sf-context-menu--inset-start: var(--sf-context-menu--item-inset-start-1);
    --sf-context-menu--inset-end: var(--sf-context-menu--item-inset-end-1);
  }
  .sf-context-menu .sf-context-menu-content > .sf-button.sf-button--size-1\/2,
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button.sf-button--size-1\/2 {
    --sf-button--padding-inline-start: var(--sf-context-menu--item-inset-start-1\/2);
    --sf-button--padding-inline-end: var(--sf-context-menu--item-inset-end-1\/2);
  }
  .sf-context-menu .sf-context-menu-content > .sf-button.sf-button--size-1,
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button.sf-button--size-1 {
    --sf-button--padding-inline-start: var(--sf-context-menu--item-inset-start-1);
    --sf-button--padding-inline-end: var(--sf-context-menu--item-inset-end-1);
  }
  .sf-context-menu .sf-context-menu-content > .sf-button.sf-button--size-2,
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button.sf-button--size-2 {
    --sf-button--padding-inline-start: var(--sf-context-menu--item-inset-start-2);
    --sf-button--padding-inline-end: var(--sf-context-menu--item-inset-end-2);
  }
}
@layer sf.components {
  /* utility-hint: display/flex (.flex) flex-direction/row (.flex-row) flex-wrap/nowrap (.flex-nowrap) gap/var(--sf-d4) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-end-radius: initial){
  html:not([dir="rtl"]) .sf-context-menu{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(ltr)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-end-radius: initial){
  [dir="rtl"] .sf-context-menu{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(rtl)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-start-radius: initial){
  html:not([dir="rtl"]) .sf-context-menu{
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(ltr)){
    border-bottom-left-radius: var(--sf-radius--surface);
    border-bottom-left-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-end-start-radius: initial){
  [dir="rtl"] .sf-context-menu{
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(rtl)){
    border-bottom-right-radius: var(--sf-radius--surface);
    border-bottom-right-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-end-radius: initial){
  html:not([dir="rtl"]) .sf-context-menu{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(ltr)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-end-radius: initial){
  [dir="rtl"] .sf-context-menu{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(rtl)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-start-radius: initial){
  html:not([dir="rtl"]) .sf-context-menu{
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(ltr)){
    border-top-left-radius: var(--sf-radius--surface);
    border-top-left-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  @supports not (border-start-start-radius: initial){
  [dir="rtl"] .sf-context-menu{
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    }
  }
  .sf-context-menu:where(:dir(rtl)){
    border-top-right-radius: var(--sf-radius--surface);
    border-top-right-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
  }
  .sf-context-menu {
    background-color: transparent;
    background-color: var(--sf-context-menu--background-color, transparent);
    box-shadow: var(--sf-elevation-3--shadow);
    box-shadow: var(--sf-context-menu--box-shadow, var(--sf-elevation-3--shadow));
    border-end-end-radius: var(--sf-radius--surface);
    border-end-end-radius: var(--sf-context-menu--border-end-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    border-end-start-radius: var(--sf-radius--surface);
    border-end-start-radius: var(--sf-context-menu--border-end-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    border-start-end-radius: var(--sf-radius--surface);
    border-start-end-radius: var(--sf-context-menu--border-start-end-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    border-start-start-radius: var(--sf-radius--surface);
    border-start-start-radius: var(--sf-context-menu--border-start-start-radius, var(--sf-context-menu-radius, var(--sf-radius--surface)));
    gap: var(--sf-d4);
  }
  /* Markup written for the tail it used to have draws none: a menu has no tail
     (owner, 2026-10-12). */
  .sf-context-menu .sf-context-menu-tooltip {
    display: none;
  }
  /* utility-hint: display/flex (.flex) flex-direction/column (.flex-col) flex-wrap/nowrap (.flex-nowrap) justify-content/flex-start (.justify-start) align-items/flex-start (.items-start) */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content{
    padding-right: var(--sf-context-menu-content--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content{
    padding-right: var(--sf-context-menu-content--padding-inline-end);
    }
  }
  .sf-context-menu .sf-context-menu-content:where(:dir(ltr)){
    padding-right: var(--sf-context-menu-content--padding-inline-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu .sf-context-menu-content{
    padding-left: var(--sf-context-menu-content--padding-inline-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-context-menu .sf-context-menu-content{
    padding-left: var(--sf-context-menu-content--padding-inline-end);
    }
  }
  .sf-context-menu .sf-context-menu-content:where(:dir(rtl)){
    padding-left: var(--sf-context-menu-content--padding-inline-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content{
    padding-left: var(--sf-context-menu-content--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu .sf-context-menu-content{
    padding-left: var(--sf-context-menu-content--padding-inline-start);
    }
  }
  .sf-context-menu .sf-context-menu-content:where(:dir(ltr)){
    padding-left: var(--sf-context-menu-content--padding-inline-start);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu .sf-context-menu-content{
    padding-right: var(--sf-context-menu-content--padding-inline-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-context-menu .sf-context-menu-content{
    padding-right: var(--sf-context-menu-content--padding-inline-start);
    }
  }
  .sf-context-menu .sf-context-menu-content:where(:dir(rtl)){
    padding-right: var(--sf-context-menu-content--padding-inline-start);
  }
  .sf-context-menu .sf-context-menu-content {
    /* The profile menu's surface is every menu's (owner, 2026-10-12): the
       third step, as every panel that floats over the page, and a hairline
       that keeps its edge where the shadow does not show. */
    --sf-context-menu-content--background-color: var(--sf-context-menu-background-color, var(--sf-elevation-3--surface));
    --sf-on-surface-variant: var(--sf-on-elevation-3--variant);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border: var(--sf-context-menu-border-width, var(--sf-px)) solid var(--sf-context-menu-border-color, var(--sf-outline-variant));
    --sf-context-menu-content--padding-bottom: var(--sf-context-menu-padding-block, var(--sf-space-1\/4));
    --sf-context-menu-content--padding-inline-end: var(--sf-context-menu-padding-inline, var(--sf-space-1\/4));
    --sf-context-menu-content--padding-inline-start: var(--sf-context-menu-padding-inline, var(--sf-space-1\/4));
    --sf-context-menu-content--padding-top: var(--sf-context-menu-padding-block, var(--sf-space-1\/4));
    --sf-context-menu-content--border-radius: var(--sf-context-menu-radius, var(--sf-radius--surface));
    border-radius: var(--sf-context-menu-content--border-radius);
    background-color: var(--sf-context-menu-content--background-color);
    padding-bottom: var(--sf-context-menu-content--padding-bottom);
    -webkit-padding-end: var(--sf-context-menu-content--padding-inline-end);
            padding-inline-end: var(--sf-context-menu-content--padding-inline-end);
    -webkit-padding-start: var(--sf-context-menu-content--padding-inline-start);
            padding-inline-start: var(--sf-context-menu-content--padding-inline-start);
    padding-top: var(--sf-context-menu-content--padding-top);
    min-width: 0;
    min-inline-size: 0;
    min-height: 0;
    min-block-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    max-width: 100%;
    max-width: var(--sf-context-menu-available-inline-size, 100%);
    max-inline-size: var(--sf-context-menu-available-inline-size, 100%);
    max-height: 100%;
    max-block-size: 100%;
    max-height: 100%;
    max-height: var(--sf-context-menu-available-block-size, 100%);
    max-block-size: var(--sf-context-menu-available-block-size, 100%);
    overflow: auto;
    scroll-behavior: auto;
  }
  /* A menu opened through openFor() is the platform's popover while open, and
     nothing while closed. The user agent's popover box (centred, bordered,
     padded, painted Canvas) is undone so the menu keeps its own. */
  sf-context-menu[popup] > .sf-context-menu:not(.sf-context-menu--open) {
    display: none;
  }
  .sf-context-menu[popover] {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    overflow: visible;
  }
  /* ─── entries: the standard rows ───────────────────────────────────────── */
  .sf-context-menu--entries .sf-context-menu-content {
    gap: var(--sf-px);
    gap: var(--sf-context-menu-gap, var(--sf-px));
    /* As wide as its longest line, from a modest floor: a row menu of three
       short actions stood with a third of its width empty when the floor was the
       profile menu's (owner, 2026-10-12). A menu that wants more sets the
       variable. */
    min-width: var(--sf-e8);
    min-inline-size: var(--sf-e8);
    min-width: var(--sf-e8);
    min-width: var(--sf-context-menu--min-inline-size, var(--sf-e8));
    min-inline-size: var(--sf-context-menu--min-inline-size, var(--sf-e8));
    max-width: min(var(--sf-g2), 100vw);
    max-inline-size: min(var(--sf-g2), 100vw);
    max-width: min(var(--sf-g2), 100vw);
    max-width: min(var(--sf-context-menu--max-inline-size, var(--sf-g2)), var(--sf-context-menu-available-inline-size, 100vw));
    max-inline-size: min(var(--sf-context-menu--max-inline-size, var(--sf-g2)), var(--sf-context-menu-available-inline-size, 100vw));
    font-size: var(--sf-context-menu--text-size);
    line-height: var(--sf-context-menu--line);
    --sf-icon--font-size: var(--sf-context-menu--line);
    --sf-icon--width: var(--sf-context-menu--line);
    --sf-icon--height: var(--sf-context-menu--line);
  }
  /* The content scrolls when the window is shorter than the menu; its rows keep
     their height and the list scrolls, instead of every row being squeezed until
     a caption ran into the next row (a language list, 2026-10-12). */
  .sf-context-menu--entries .sf-context-menu-content > * {
    flex-shrink: 0;
  }
  /* A row is as tall as a field of the menu's size -- its line and the field's
     block padding above and below, 32px at 1/2 and 40px at 1 -- and its content
     starts where that field's does. A caption makes it taller by its own line,
     never by padding. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-item{
    padding-left: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu-item{
    padding-left: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-item{
    padding-right: var(--sf-context-menu--inset-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-context-menu-item{
    padding-right: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-item:where(:dir(ltr)){
    padding-left: var(--sf-context-menu--inset-start);
    padding-right: var(--sf-context-menu--inset-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-item{
    padding-right: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-context-menu-item{
    padding-right: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-item{
    padding-left: var(--sf-context-menu--inset-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-context-menu-item{
    padding-left: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-item:where(:dir(rtl)){
    padding-right: var(--sf-context-menu--inset-start);
    padding-left: var(--sf-context-menu--inset-end);
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-item{
    text-align: left;
  }
  @supports not (text-align: start){
  html:not([dir="rtl"]) .sf-context-menu-item{
    text-align: left;
    }
  }
  .sf-context-menu-item:where(:dir(ltr)){
    text-align: left;
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-item{
    text-align: right;
  }
  @supports not (text-align: start){
  [dir="rtl"] .sf-context-menu-item{
    text-align: right;
    }
  }
  .sf-context-menu-item:where(:dir(rtl)){
    text-align: right;
  }
  .sf-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--sf-space-1\/2);
    width: 100%;
    inline-size: 100%;
    min-height: calc(var(--sf-context-menu--line) + 2 * var(--sf-context-menu--space-y));
    min-block-size: calc(var(--sf-context-menu--line) + 2 * var(--sf-context-menu--space-y));
    padding-top: var(--sf-a2);
    padding-bottom: var(--sf-a2);
    padding-block: var(--sf-a2);
    padding-inline: var(--sf-context-menu--inset-start) var(--sf-context-menu--inset-end);
    border: 0;
    border-radius: var(--sf-radius--ui);
    background: none;
    color: var(--sf-on-surface);
    color: var(--sf-context-menu-color, var(--sf-on-surface));
    font: inherit;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .sf-context-menu-item:not(:disabled):hover,
  .sf-context-menu-item[aria-expanded=true] {
    background-color: var(--sf-surface-container-hover);
  }
  .sf-context-menu-item--current {
    background-color: var(--sf-secondary-container);
    color: var(--sf-on-secondary-container);
    --sf-icon--color: var(--sf-on-secondary-container);
  }
  .sf-context-menu-item:disabled {
    color: var(--sf-on-disable);
    --sf-icon--color: var(--sf-on-disable);
    cursor: default;
  }
  .sf-context-menu-item--danger:not(:disabled) {
    color: var(--sf-error);
    --sf-icon--color: var(--sf-error);
  }
  .sf-context-menu-item-lead,
  .sf-context-menu-item-check {
    display: flex;
    flex: none;
    width: var(--sf-context-menu--line);
    inline-size: var(--sf-context-menu--line);
  }
  /* A picture in the lead: a site's logo or a person, the icon's size, with
     its initials on the secondary tone when there is no picture. */
  .sf-context-menu-item-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sf-context-menu--line);
    inline-size: var(--sf-context-menu--line);
    height: var(--sf-context-menu--line);
    block-size: var(--sf-context-menu--line);
    border-radius: var(--sf-radius--ui);
    background-color: var(--sf-secondary-container);
    color: var(--sf-on-secondary-container);
    font-size: var(--sf-text-size-1\/4);
    font-weight: var(--sf-font-weight-medium);
    line-height: 1;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-context-menu-item-icon,
  .sf-context-menu-item-chevron {
    --sf-icon--color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-item--danger:not(:disabled) .sf-context-menu-item-icon {
    --sf-icon--color: var(--sf-error);
  }
  .sf-context-menu-item-check {
    --sf-icon--color: var(--sf-primary);
  }
  .sf-context-menu-item-chevron:dir(rtl) {
    -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
  }
  .sf-context-menu-item-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-context-menu-item-label,
  .sf-context-menu-item-caption,
  .sf-context-menu-item-value {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sf-context-menu-item-label {
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-context-menu-item-caption,
  .sf-context-menu-item-value,
  .sf-context-menu-item-shortcut {
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
  }
  .sf-context-menu-item:disabled .sf-context-menu-item-caption,
  .sf-context-menu-item:disabled .sf-context-menu-item-value,
  .sf-context-menu-item:disabled .sf-context-menu-item-shortcut {
    color: inherit;
  }
  .sf-context-menu-item-value {
    flex: none;
    max-width: 45%;
    max-inline-size: 45%;
  }
  .sf-context-menu-item-shortcut {
    flex: none;
    font-family: inherit;
  }
  .sf-context-menu-separator {
    flex: none;
    height: var(--sf-px);
    block-size: var(--sf-px);
    margin-top: var(--sf-a4);
    margin-bottom: var(--sf-a4);
    margin-block: var(--sf-a4);
    background-color: var(--sf-outline-variant);
  }
  /* Who the menu is about: the picture and the lines beside it, on the rows'
     axis, read rather than chosen. */
  .sf-context-menu-header {
    display: flex;
    align-items: center;
    gap: var(--sf-space-1\/2);
    padding: var(--sf-context-menu--space-y) var(--sf-context-menu--inset-end) var(--sf-context-menu--space-y) var(--sf-context-menu--inset-start);
  }
  .sf-context-menu-header-avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: var(--sf-d0);
    inline-size: var(--sf-d0);
    height: var(--sf-d0);
    block-size: var(--sf-d0);
    border-radius: 50%;
    background-color: var(--sf-secondary-container);
    color: var(--sf-on-secondary-container);
    font-size: var(--sf-text-size-1\/3);
    font-weight: var(--sf-font-weight-medium);
    -o-object-fit: cover;
       object-fit: cover;
  }
  .sf-context-menu-header-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-inline-size: 0;
  }
  .sf-context-menu-header-name,
  .sf-context-menu-header-caption {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sf-context-menu-header-name {
    font-weight: var(--sf-font-weight-medium);
  }
  .sf-context-menu-header-caption {
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
  }
  /* A few options side by side, one segment each, in a hairline frame. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-choice{
    margin-left: var(--sf-context-menu--inset-start);
  }
  @supports not (margin-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu-choice{
    margin-left: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-choice{
    margin-right: var(--sf-context-menu--inset-end);
  }
  @supports not (margin-inline-end: initial){
  html:not([dir="rtl"]) .sf-context-menu-choice{
    margin-right: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-choice:where(:dir(ltr)){
    margin-left: var(--sf-context-menu--inset-start);
    margin-right: var(--sf-context-menu--inset-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-choice{
    margin-right: var(--sf-context-menu--inset-start);
  }
  @supports not (margin-inline-start: initial){
  [dir="rtl"] .sf-context-menu-choice{
    margin-right: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-choice{
    margin-left: var(--sf-context-menu--inset-end);
  }
  @supports not (margin-inline-end: initial){
  [dir="rtl"] .sf-context-menu-choice{
    margin-left: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-choice:where(:dir(rtl)){
    margin-right: var(--sf-context-menu--inset-start);
    margin-left: var(--sf-context-menu--inset-end);
  }
  .sf-context-menu-choice {
    display: flex;
    margin-inline: var(--sf-context-menu--inset-start) var(--sf-context-menu--inset-end);
    margin-top: var(--sf-a2);
    margin-bottom: var(--sf-a2);
    margin-block: var(--sf-a2);
    border: var(--sf-px) solid var(--sf-outline-variant);
    border-radius: var(--sf-radius--ui);
    overflow: hidden;
  }
  .sf-context-menu-choice-option.sf-context-menu-item {
    flex: 1 1 0;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    padding-inline: 0;
    border-radius: 0;
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-choice-option + .sf-context-menu-choice-option{
    border-left: var(--sf-px) solid var(--sf-outline-variant);
  }
  @supports not (border-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu-choice-option + .sf-context-menu-choice-option{
    border-left: var(--sf-px) solid var(--sf-outline-variant);
    }
  }
  .sf-context-menu-choice-option + .sf-context-menu-choice-option:where(:dir(ltr)){
    border-left: var(--sf-px) solid var(--sf-outline-variant);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-choice-option + .sf-context-menu-choice-option{
    border-right: var(--sf-px) solid var(--sf-outline-variant);
  }
  @supports not (border-inline-start: initial){
  [dir="rtl"] .sf-context-menu-choice-option + .sf-context-menu-choice-option{
    border-right: var(--sf-px) solid var(--sf-outline-variant);
    }
  }
  .sf-context-menu-choice-option + .sf-context-menu-choice-option:where(:dir(rtl)){
    border-right: var(--sf-px) solid var(--sf-outline-variant);
  }
  .sf-context-menu-choice-option + .sf-context-menu-choice-option {
    -webkit-border-start: var(--sf-px) solid var(--sf-outline-variant);
            border-inline-start: var(--sf-px) solid var(--sf-outline-variant);
  }
  .sf-context-menu-choice-option[aria-checked=true] {
    background-color: var(--sf-secondary-container);
    color: var(--sf-on-secondary-container);
    --sf-icon--color: var(--sf-on-secondary-container);
  }
  .sf-context-menu-note {
    margin: 0;
    padding: var(--sf-context-menu--space-y) var(--sf-context-menu--inset-end) var(--sf-context-menu--space-y) var(--sf-context-menu--inset-start);
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
    white-space: normal;
  }
  /* The search field is a field of the menu's size: its text starts on the
     rows' axis. */
  .sf-context-menu-search {
    padding-bottom: var(--sf-a4);
    -webkit-padding-after: var(--sf-a4);
            padding-block-end: var(--sf-a4);
  }
  .sf-context-menu-search-input {
    width: 100%;
    inline-size: 100%;
    min-height: calc(var(--sf-context-menu--line) + 2 * var(--sf-context-menu--space-y));
    min-block-size: calc(var(--sf-context-menu--line) + 2 * var(--sf-context-menu--space-y));
    padding-left: var(--sf-context-menu--field-space-x);
    padding-right: var(--sf-context-menu--field-space-x);
    padding-inline: var(--sf-context-menu--field-space-x);
    border: var(--sf-px) solid var(--sf-outline);
    border-radius: var(--sf-radius--ui);
    background-color: transparent;
    color: var(--sf-on-surface);
    font: inherit;
  }
  .sf-context-menu-search-input::-webkit-input-placeholder {
    color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-search-input::-moz-placeholder {
    color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-search-input:-ms-input-placeholder {
    color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-search-input::-ms-input-placeholder {
    color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-search-input::placeholder {
    color: var(--sf-on-surface-variant);
  }
  .sf-context-menu-heading {
    padding: var(--sf-context-menu--space-y) var(--sf-context-menu--inset-end) var(--sf-a2) var(--sf-context-menu--inset-start);
    color: var(--sf-on-surface-variant);
    font-size: var(--sf-text-size-1\/3);
    line-height: var(--sf-text-height-1\/3);
    font-weight: var(--sf-font-weight-medium);
  }
  /* The parts a window built in the menu shares with every other: a block on
     top (a search, a title), the body, and a footer of actions -- Reset and
     Apply, Save. Every window that drops down had its own paddings and its own
     strip of buttons (owner, 2026-10-14); these are the one set. The footer
     stays at the bottom while the body scrolls. Its buttons share the width. */
  .sf-context-menu-top,
  .sf-context-menu-footer {
    display: flex;
    flex: none;
    gap: var(--sf-space-1\/3);
    padding: var(--sf-context-menu--block-space) var(--sf-context-menu--inset-end) var(--sf-context-menu--block-space) var(--sf-context-menu--inset-start);
  }
  .sf-context-menu-top {
    flex-direction: column;
    padding-top: var(--sf-a4);
    -webkit-padding-before: var(--sf-a4);
            padding-block-start: var(--sf-a4);
  }
  .sf-context-menu-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--sf-px);
    gap: var(--sf-context-menu-gap, var(--sf-px));
    min-height: 0;
    min-block-size: 0;
    overflow: auto;
  }
  .sf-context-menu-footer {
    position: sticky;
    bottom: calc(-1 * 0px);
    inset-block-end: calc(-1 * 0px);
    bottom: calc(-1 * 0px);
    bottom: calc(-1 * var(--sf-context-menu-content--padding-bottom, 0px));
    inset-block-end: calc(-1 * var(--sf-context-menu-content--padding-bottom, 0px));
    margin-top: var(--sf-a4);
    -webkit-margin-before: var(--sf-a4);
            margin-block-start: var(--sf-a4);
    margin-bottom: calc(-1 * 0px);
    -webkit-margin-after: calc(-1 * 0px);
            margin-block-end: calc(-1 * 0px);
    margin-bottom: calc(-1 * 0px);
    margin-bottom: calc(-1 * var(--sf-context-menu-content--padding-bottom, 0px));
    -webkit-margin-after: calc(-1 * var(--sf-context-menu-content--padding-bottom, 0px));
            margin-block-end: calc(-1 * var(--sf-context-menu-content--padding-bottom, 0px));
    padding-bottom: calc(var(--sf-context-menu--block-space) + 0px);
    -webkit-padding-after: calc(var(--sf-context-menu--block-space) + 0px);
            padding-block-end: calc(var(--sf-context-menu--block-space) + 0px);
    padding-bottom: calc(var(--sf-context-menu--block-space) + 0px);
    padding-bottom: calc(var(--sf-context-menu--block-space) + var(--sf-context-menu-content--padding-bottom, 0px));
    -webkit-padding-after: calc(var(--sf-context-menu--block-space) + var(--sf-context-menu-content--padding-bottom, 0px));
            padding-block-end: calc(var(--sf-context-menu--block-space) + var(--sf-context-menu-content--padding-bottom, 0px));
    border-top: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-before: var(--sf-px) solid var(--sf-outline-variant);
            border-block-start: var(--sf-px) solid var(--sf-outline-variant);
    background-color: var(--sf-context-menu-content--background-color);
  }
  .sf-context-menu-footer > * {
    flex: 1 1 0;
    min-width: 0;
    min-inline-size: 0;
  }
  /* A panel with tabs (owner, 2026-10-15): one frame for every window that
     drops down with tabs -- a list's settings, its filter. The head (the tabs
     and the way out) and the footer never scroll; only the body does. The
     width is the panel's own, a step of the ladder or the host's `width`,
     never the width of what a tab holds: ticking a box that changed a button's
     label made the filter grow under the pointer. The scrollbar keeps its room
     whether or not it is shown, for the same reason. */
  .sf-context-menu.sf-context-menu--panel .sf-context-menu-content {
    --sf-context-menu-panel--inline-size: calc(var(--sf-ui-1--control-height) * 8);
    width: var(--sf-context-menu-panel--inline-size);
    inline-size: var(--sf-context-menu-panel--inline-size);
    width: var(--sf-context-menu-panel--inline-size);
    width: var(--sf-context-menu--min-inline-size, var(--sf-context-menu-panel--inline-size));
    inline-size: var(--sf-context-menu--min-inline-size, var(--sf-context-menu-panel--inline-size));
    max-width: calc(100vi - var(--sf-space-1));
    max-inline-size: calc(100vi - var(--sf-space-1));
    min-height: 0;
    min-block-size: 0;
    max-height: calc(100dvh - var(--sf-space-4));
    max-block-size: calc(100dvh - var(--sf-space-4));
    max-height: calc(100dvh - var(--sf-space-4));
    max-height: var(--sf-context-menu-panel--max-block-size, var(--sf-context-menu-available-block-size, calc(100dvh - var(--sf-space-4))));
    max-block-size: var(--sf-context-menu-panel--max-block-size, var(--sf-context-menu-available-block-size, calc(100dvh - var(--sf-space-4))));
    overflow: hidden;
    padding-top: 0;
    -webkit-padding-before: 0;
            padding-block-start: 0;
  }
  /* The head is a row of its own, as tall as a control and a step of space
     above it: it read narrower than the rows under it (owner, 2026-10-16). Its
     line is one line across the whole panel, under the close button too; the
     tabs' own track, which stopped short of the button, is taken off. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-head{
    padding-left: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu-head{
    padding-left: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-head{
    padding-right: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-context-menu-head{
    padding-right: var(--sf-space-1\/3);
    }
  }
  .sf-context-menu-head:where(:dir(ltr)){
    padding-left: var(--sf-context-menu--inset-start);
    padding-right: var(--sf-space-1\/3);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-head{
    padding-right: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-context-menu-head{
    padding-right: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-head{
    padding-left: var(--sf-space-1\/3);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-context-menu-head{
    padding-left: var(--sf-space-1\/3);
    }
  }
  .sf-context-menu-head:where(:dir(rtl)){
    padding-right: var(--sf-context-menu--inset-start);
    padding-left: var(--sf-space-1\/3);
  }
  .sf-context-menu-head {
    --sf-tabs-top-container--border-width: 0;
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: var(--sf-space-1\/3);
    min-height: calc(var(--sf-ui-1--control-height) + var(--sf-space-1\/3));
    min-block-size: calc(var(--sf-ui-1--control-height) + var(--sf-space-1\/3));
    padding-top: var(--sf-space-1\/3);
    -webkit-padding-before: var(--sf-space-1\/3);
            padding-block-start: var(--sf-space-1\/3);
    padding-inline: var(--sf-context-menu--inset-start) var(--sf-space-1\/3);
    border-bottom: var(--sf-px) solid var(--sf-outline-variant);
    -webkit-border-after: var(--sf-px) solid var(--sf-outline-variant);
            border-block-end: var(--sf-px) solid var(--sf-outline-variant);
  }
  .sf-context-menu-head > .sf-context-menu-close {
    align-self: center;
  }
  .sf-context-menu-head > .sf-context-menu-tabs,
  .sf-context-menu-head > .sf-context-menu-tabs > .sf-tabs {
    flex: 1 1 auto;
    min-width: 0;
    min-inline-size: 0;
  }
  /* The tabs only say which rows the body shows: their own panel area stays
     empty, and drawn it was a hole under them. Their line sits on the head's
     border, so the head has no padding of its own below them. */
  .sf-context-menu-head .sf-tabs-main-container {
    display: none;
  }
  .sf-context-menu--panel .sf-context-menu-body {
    padding-top: var(--sf-space-1\/4);
    padding-bottom: var(--sf-space-1\/4);
    padding-block: var(--sf-space-1\/4);
    scrollbar-gutter: stable;
    overflow-x: hidden;
  }
  /* A row of a panel holds anything -- a handle, a label, a checkbox, a pin --
     on one line: what leads, the text that takes the rest and gives way with an
     ellipsis, what ends it. A row as tall as a menu item of the panel's size. */
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-row{
    padding-left: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  html:not([dir="rtl"]) .sf-context-menu-row{
    padding-left: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, html:not([dir="rtl"]) .sf-context-menu-row{
    padding-right: var(--sf-context-menu--inset-end);
  }
  @supports not (padding-inline-end: initial){
  html:not([dir="rtl"]) .sf-context-menu-row{
    padding-right: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-row:where(:dir(ltr)){
    padding-left: var(--sf-context-menu--inset-start);
    padding-right: var(--sf-context-menu--inset-end);
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-row{
    padding-right: var(--sf-context-menu--inset-start);
  }
  @supports not (padding-inline-start: initial){
  [dir="rtl"] .sf-context-menu-row{
    padding-right: var(--sf-context-menu--inset-start);
    }
  }
  _:-ms-input-placeholder, [dir="rtl"] .sf-context-menu-row{
    padding-left: var(--sf-context-menu--inset-end);
  }
  @supports not (padding-inline-end: initial){
  [dir="rtl"] .sf-context-menu-row{
    padding-left: var(--sf-context-menu--inset-end);
    }
  }
  .sf-context-menu-row:where(:dir(rtl)){
    padding-right: var(--sf-context-menu--inset-start);
    padding-left: var(--sf-context-menu--inset-end);
  }
  .sf-context-menu-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    grid-gap: var(--sf-space-1\/3);
    gap: var(--sf-space-1\/3);
    min-height: var(--sf-ui-1\/2--control-height);
    min-block-size: var(--sf-ui-1\/2--control-height);
    padding-inline: var(--sf-context-menu--inset-start) var(--sf-context-menu--inset-end);
  }
  .sf-context-menu--size-1 .sf-context-menu-row {
    min-height: var(--sf-ui-1--control-height);
    min-block-size: var(--sf-ui-1--control-height);
  }
  .sf-context-menu-row-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* An item is one line. A menu opened from a control near the inline edge was
     capped to the free space beside that control, and the labels wrapped to two
     lines inside it -- which is not the menu getting smaller, it is the words
     breaking. The menu is moved inside the viewport instead of being squeezed, so
     the line it needs is the line it gets. */
  .sf-context-menu .sf-context-menu-content > sf-button > .sf-button,
  .sf-context-menu .sf-context-menu-content > .sf-button {
    white-space: nowrap;
  }
}
@layer sf.states {
  .sf-context-menu-search-input.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-context-menu-search-input:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-context-menu-item.focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-context-menu-item:focus-visible {
    outline: var(--sf-focus--width) var(--sf-focus--style) var(--sf-focus--color);
    outline-offset: calc(-1 * var(--sf-focus--width));
  }
  .sf-context-menu-content > .sf-button:not(:disabled):not(.disabled).focus-visible,
  .sf-context-menu-content > sf-button > .sf-button:not(:disabled):not(.disabled).focus-visible {
    position: relative;
    z-index: 1;
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
  .sf-context-menu-content > .sf-button:not(:disabled):not(.disabled):focus-visible,
  .sf-context-menu-content > sf-button > .sf-button:not(:disabled):not(.disabled):focus-visible {
    position: relative;
    z-index: 1;
    outline-offset: calc(var(--sf-focus--width) * -1);
  }
}
@media (forced-colors: active) {
  .sf-context-menu .sf-context-menu-content {
    border: var(--sf-px) solid CanvasText;
  }
  .sf-context-menu-content > .sf-button:not(:disabled):not(.disabled).focus-visible,
  .sf-context-menu-content > sf-button > .sf-button:not(:disabled):not(.disabled).focus-visible {
    outline: var(--sf-focus-outline-width) solid currentColor;
    outline-offset: calc(var(--sf-focus-outline-width) * -1);
    box-shadow: none;
  }
  .sf-context-menu-content > .sf-button:not(:disabled):not(.disabled):focus-visible,
  .sf-context-menu-content > sf-button > .sf-button:not(:disabled):not(.disabled):focus-visible {
    outline: var(--sf-focus-outline-width) solid currentColor;
    outline-offset: calc(var(--sf-focus-outline-width) * -1);
    box-shadow: none;
  }
}