@layer components {

  :is(
    .ui-focus-ring,
    .ui-focus-ring-outline,
    .ui-flex,
    .ui-table-scroll,
    .ui-pagination-list,
    .react-aria-Menu,
    .ui-chart [tabindex],
    .ui-prose input,
    .ui-auth-legal-footer a[href],
    .ui-auth-shell a[href],
    .app-main a[href],
    .ui-breadcrumb a[href],
    .ui-breadcrumb-link,
    .ui-password-input-toggle,
    .ui-search-select-value-remove,
    .ui-tabs-overflow,
    .ui-resizable-handle,
    .ui-scroll-area,
    .ui-data-table-scroll,
    .ui-resizable-panel,
    .ui-master-detail-master,
    .ui-branch-scope-picker-list,
    .ui-tag-input-chip,
    .ui-attachments-placeholder,
    .ui-block-editor-content,
    .ui-range-timeline,
    .sb-product,
    .ui-logo,
    .ui-logo-lockup,
    [data-slot="anchor-link"],
    [data-interactive] > [data-slot="table-cell"] a[href],
    [data-interactive] > [data-slot="table-cell"] button,
    .ui-data-table-ellipsis[data-truncated],
    [data-slot="list-row"] [data-truncated][tabindex],
    .ui-input,
    .ui-control,
    .ui-control-multiline,
    .ui-control-trigger,
    .ui-tag-input,
    .ui-button,
    .ui-toggle,
    .ui-checkbox,
    .ui-radio,
    .ui-slider-thumb,
    .ui-control-affix-action,
    .ui-control-inline-affix-action,
    .ui-search-input-clear,
    .ui-tag-input-remove,
    .ui-badge-remove,
    .ui-color-picker-input,
    .ui-upload-tile-add,
    .ui-upload-picture-empty,
    .ui-upload-dropzone,
    .ui-tabs-add,
    .ui-steps-control,
    .ui-carousel-previous,
    .ui-carousel-next,
    .ui-steps-inline-control,
    .ui-pagination-link,
    .ui-legal-document-toc-link,
    .ui-code-block,
    .ui-accordion-trigger,
    .ui-carousel-dot,
    .ui-rating-star,
    .ui-prose img[data-prose-preview],
    .ui-prose .ui-prose-toggle-summary,
    .ui-block-editor-toggle-button,
    a.ui-list-row,

    a[data-slot="card"],
    button[data-slot="card"],
    .ui-text[data-link],
    .sb-nav-item,
    .sb-user,
    .tb-icon-btn
  ):focus-visible,

  .ui-command-input-wrapper:has(.ui-command-input:focus-visible),
  .ui-attachments:has(.ui-attachments-input:focus-visible),
  .ui-calendar-dropdown-root:has(.ui-calendar-dropdown:focus-visible),
  .ui-checkbox[data-focus-visible],
  .ui-radio[data-focus-visible],
  .ui-switch[data-focus-visible],
  .ui-slider-thumb[data-focus-visible],
  .ui-focus-ring[data-focus-visible],
  .ui-control-trigger[data-state="open"],
  .ui-tag-input:focus-within,
  .ui-control-composite-field:focus-within,
  .ui-control-composite-field[data-state="open"],
  .ui-otp-slot[data-active="true"],
  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {

    outline-width: var(--focus-ring-width-component, var(--focus-ring-width));
    outline-style: solid;
    outline-color: hsl(
      var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
        var(--focus-ring-opacity, 1)
    );
    outline-offset: var(--focus-ring-contained-offset, var(--focus-ring-offset));
    scroll-margin: calc(var(--focus-ring-width) + var(--focus-outline-offset));

    transition:
      outline-offset 0s,
      outline 0s;
  }

  :root:not([data-focus-outline="off"])
    :is(
      .ui-focus-ring,
      .ui-focus-ring-outline,
      .ui-logo,
      .ui-logo-lockup,
      [data-slot="anchor-link"],
      .ui-input,
      .ui-control,
      .ui-control-multiline,
      .ui-control-trigger,
      .ui-tag-input,
      .ui-button,
      .ui-toggle,
      .ui-checkbox,
      .ui-radio,
      .ui-slider-thumb,
      .ui-control-affix-action,
      .ui-control-inline-affix-action,
      .ui-search-input-clear,
      .ui-tag-input-remove,
    .ui-badge-remove,
      .ui-color-picker-input,
      .ui-upload-tile-add,
      .ui-upload-picture-empty,
      .ui-upload-dropzone,
      .ui-tabs-add,
      .ui-steps-control,
      .ui-carousel-previous,
      .ui-carousel-next,
      .ui-steps-inline-control,
      .ui-pagination-link,
      .ui-legal-document-toc-link,
      .ui-code-block,
      .ui-accordion-trigger,
      .ui-carousel-dot,
      .ui-rating-star,
      .ui-prose img[data-prose-preview],
      .ui-prose .ui-prose-toggle-summary,
      .ui-block-editor-toggle-button,
      a.ui-list-row,
      a[data-slot="card"],
      button[data-slot="card"],
      .ui-text[data-link],
      .sb-nav-item,
      .sb-user,
      .tb-icon-btn
    ):focus-visible,

  :root:not([data-focus-outline="off"]) .ui-checkbox[data-focus-visible],
  :root:not([data-focus-outline="off"]) .ui-radio[data-focus-visible],
  :root:not([data-focus-outline="off"]) .ui-switch[data-focus-visible],
  :root:not([data-focus-outline="off"]) .ui-slider-thumb[data-focus-visible],
  :root:not([data-focus-outline="off"]) .ui-focus-ring[data-focus-visible],
  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"],
  :root:not([data-focus-outline="off"]) .ui-otp-slot[data-active="true"],
  :root:not([data-focus-outline="off"])
    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {

    --tw-ring-shadow: var(
      --focus-field-shadow,
      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
      0 0 0 var(--focus-ring-glow-width)
        hsl(
          var(
              --focus-ring-glow-color,
              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
            ) /
            var(--focus-ring-glow-alpha)
        )
    );
    box-shadow: var(
      --focus-field-shadow,
      inset 0 0 0 calc(-1 * var(--focus-ring-contained-offset, 0px)) hsl(var(--background)),
      0 0 0 var(--focus-ring-glow-width)
        hsl(
          var(
              --focus-ring-glow-color,
              var(--control-outline, from hsl(var(--primary)) var(--control-outline-channels))
            ) /
            var(--focus-ring-glow-alpha)
        )
    );
  }

  :root:not([data-focus-outline="off"])
    :is(
      .ui-input,
      .ui-control,
      .ui-control-multiline,
      .ui-control-trigger,
      .ui-tag-input
    ):focus-visible,
  :root:not([data-focus-outline="off"]) .ui-control-trigger[data-state="open"],
  :root:not([data-focus-outline="off"]) .ui-tag-input:focus-within,
  :root:not([data-focus-outline="off"]) .ui-control-composite-field:focus-within,
  :root:not([data-focus-outline="off"]) .ui-control-composite-field[data-state="open"] {
    --input: var(--focus-ring-color, var(--ring));
  }

  .ui-toggle {
    --focus-ring-weight: var(--toggle-focus-ring-width, var(--stroke-lg));
    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
    --focus-ring-opacity: var(--toggle-focus-ring-alpha);
  }

  .sb-user {
    --focus-ring-opacity: var(--sidebar-user-focus-ring-alpha);
  }

  .tb-icon-btn {
    --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
  }

  .ui-scroll-area [data-slot="anchor-link"],
  a.ui-list-row,
  tr.ui-focus-ring,
  .sb-nav-item,
  .ui-app-setting-picker-icon[data-appearance="bar"],
  .ui-legal-document-toc-link {
    --focus-ring-offset: calc(-1 * var(--focus-ring-width));
  }

  :is(
    .ui-topbar .ui-button--ghost,
    .ui-topbar .ui-app-setting-picker-icon,
    .ui-legal-document-rail .ui-button,
    .ui-pagination-link,
    .ui-pagination .ui-button,
    .ui-pagination .ui-control,
    .ui-pagination .ui-input,
    .ui-topbar .ui-search-input-control,
    .ui-mobile-shell-tabbar .ui-button--ghost,
    [data-slot="tabs-list"] [role="tab"],
    [data-slot="tabs-list"] .ui-tabs-add,
    .ui-app-setting-picker-icon[data-appearance="bar"],
    .ui-legal-document-rail .ui-legal-document-toc-link,
    .ui-table-scroll [data-slot="table-cell"] .ui-button--ghost,
    .ui-data-table-scroll [data-slot="table-cell"] .ui-button--ghost,
    .ui-search-select-value-remove,
    .ui-table-scroll tr.ui-focus-ring,
    .ui-data-table-scroll tr.ui-focus-ring,
    .ui-resizable-handle,
    .ui-scroll-area,
    .ui-table-scroll,
    .ui-data-table-scroll,
    .ui-resizable-panel
  ):focus-visible {
    --focus-ring-contained-offset: var(--focus-ring-inset-offset);
  }

  :root:not([data-focus-outline="off"]) .ui-button[data-focus-contained]:focus-visible,
  :root:not([data-focus-outline="off"]) .ui-pagination-link:focus-visible,
  :root:not([data-focus-outline="off"])
    .ui-branch-scope-picker-list
    .ui-checkbox[data-focus-visible] {
    --focus-ring-contained-offset: calc(-1 * var(--focus-ring-width));
    --focus-field-shadow: inset 0 0 0 calc(var(--focus-ring-width) + var(--focus-outline-offset))
      hsl(var(--background));
  }

  :root:not([data-focus-outline="off"])
    .ui-anchor[data-direction="horizontal"]
    [data-slot="anchor-link"]:focus-visible,
  :root:not([data-focus-outline="off"])
    .ui-topbar
    .ui-button:has([data-slot="avatar"]):focus-visible {
    outline-style: none;
    box-shadow:
      inset 0 var(--focus-ring-width) 0
        hsl(
          var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
            var(--focus-ring-opacity, 1)
        ),
      inset 0 calc(-1 * var(--focus-ring-width)) 0
        hsl(
          var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
            var(--focus-ring-opacity, 1)
        );
  }

  :root:not([data-focus-outline="off"]) .ui-resizable-handle[role="separator"]:focus-visible {
    outline-style: none;
    box-shadow: inset 0 0 0 var(--focus-ring-width)
      hsl(
        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
          var(--focus-ring-opacity, 1)
      );
  }

  .ui-accordion-trigger {
    --focus-ring-offset: var(--accordion-focus-ring-offset);
  }

  .ui-carousel-dot {
    --focus-ring-offset: var(--carousel-dot-focus-ring-offset);
  }

  .ui-rating-star {
    --focus-ring-offset: var(--rating-focus-ring-offset);
  }

  :is(.ui-control, .ui-input, .ui-control-multiline, .ui-tag-input):not(
    .ui-app-setting-picker-icon,
    .ui-app-setting-picker-inline
  ) {
    --focus-ring-weight: var(--control-focus-ring-width, var(--stroke-hairline));
    --focus-ring-width-component: calc(var(--focus-ring-weight) * var(--focus-outline));
  }

  .ui-command-input:focus-visible,
  .ui-search-select-search-input:focus-visible {
    --focus-field-shadow: none;
    --focus-ring-weight: 0px;
    outline: none;
    box-shadow: none;
  }

  [aria-invalid="true"] {
    --focus-ring-color: var(--destructive);
    --focus-outline-color: var(--destructive);
    --focus-ring-glow-color: var(--control-outline-error);
    --focus-ring-glow-alpha: var(--control-outline-error-alpha);
  }
}