@layer components {

  :is(
    .ui-focus-ring,
    .ui-focus-ring-outline,
    .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,
    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-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: var(--focus-ring-width) solid
      hsl(
        var(--focus-outline-color, var(--focus-ring-color, var(--ring))) /
          var(--focus-ring-opacity, 1)
      );
    outline-offset: var(--focus-ring-offset);

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

  :root[data-focus-outline="on"]
    :is(
      .ui-focus-ring,
      .ui-focus-ring-outline,
      .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,
      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[data-focus-outline="on"] .ui-checkbox[data-focus-visible],
  :root[data-focus-outline="on"] .ui-radio[data-focus-visible],
  :root[data-focus-outline="on"] .ui-switch[data-focus-visible],
  :root[data-focus-outline="on"] .ui-slider-thumb[data-focus-visible],
  :root[data-focus-outline="on"] .ui-focus-ring[data-focus-visible],
  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"],
  :root[data-focus-outline="on"] .ui-otp-slot[data-active="true"],
  :root[data-focus-outline="on"]
    .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {

    --tw-ring-shadow: var(
      --focus-field-shadow,
      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,
      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[data-focus-outline="on"]
    :is(
      .ui-input,
      .ui-control,
      .ui-control-multiline,
      .ui-control-trigger,
      .ui-tag-input
    ):focus-visible,
  :root[data-focus-outline="on"] .ui-control-trigger[data-state="open"],
  :root[data-focus-outline="on"] .ui-tag-input:focus-within,
  :root[data-focus-outline="on"] .ui-control-composite-field:focus-within,
  :root[data-focus-outline="on"] .ui-control-composite-field[data-state="open"] {
    --input: var(--focus-ring-color, var(--ring));
  }

  .ui-toggle {
    --focus-ring-weight: var(--toggle-focus-ring-width);
    --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);
  }

  a.ui-list-row,
  tr.ui-focus-ring,
  .sb-nav-item {
    --focus-ring-offset: calc(-1 * var(--focus-ring-width));
  }

  .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);
  }

  .ui-command-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);
  }
}