/* docara-shell-source: runtime/utility/ring-color/focus-visible/css/focus-visible.css */
@layer sf.utilities {
  .focus-visible\:ring-transparent.focus-visible {
    --sf-ring-color: var(--sf-transparent);
  }
  .focus-visible\:ring-transparent:focus-visible {
    --sf-ring-color: var(--sf-transparent);
  }
  .focus-visible\:ring-current.focus-visible {
    --sf-ring-color: var(--sf-current);
  }
  .focus-visible\:ring-current:focus-visible {
    --sf-ring-color: var(--sf-current);
  }
  .focus-visible\:ring-outline.focus-visible {
    --sf-ring-color: var(--sf-outline);
  }
  .focus-visible\:ring-outline:focus-visible {
    --sf-ring-color: var(--sf-outline);
  }
  .focus-visible\:ring-outline-variant.focus-visible {
    --sf-ring-color: var(--sf-outline-variant);
  }
  .focus-visible\:ring-outline-variant:focus-visible {
    --sf-ring-color: var(--sf-outline-variant);
  }
  .focus-visible\:ring-surface.focus-visible {
    --sf-ring-color: var(--sf-surface-1);
  }
  .focus-visible\:ring-surface:focus-visible {
    --sf-ring-color: var(--sf-surface-1);
  }
  .focus-visible\:ring-surface-0.focus-visible {
    --sf-ring-color: var(--sf-surface-0);
  }
  .focus-visible\:ring-surface-0:focus-visible {
    --sf-ring-color: var(--sf-surface-0);
  }
  .focus-visible\:ring-surface-1.focus-visible {
    --sf-ring-color: var(--sf-surface-1);
  }
  .focus-visible\:ring-surface-1:focus-visible {
    --sf-ring-color: var(--sf-surface-1);
  }
  .focus-visible\:ring-surface-container.focus-visible {
    --sf-ring-color: var(--sf-surface-container);
  }
  .focus-visible\:ring-surface-container:focus-visible {
    --sf-ring-color: var(--sf-surface-container);
  }
  .focus-visible\:ring-surface-overlay.focus-visible {
    --sf-ring-color: var(--sf-surface-overlay);
  }
  .focus-visible\:ring-surface-overlay:focus-visible {
    --sf-ring-color: var(--sf-surface-overlay);
  }
  .focus-visible\:ring-surface-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-surface-transparent-overlay);
  }
  .focus-visible\:ring-surface-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-surface-transparent-overlay);
  }
  .focus-visible\:ring-surface-inverse.focus-visible {
    --sf-ring-color: var(--sf-surface-inverse);
  }
  .focus-visible\:ring-surface-inverse:focus-visible {
    --sf-ring-color: var(--sf-surface-inverse);
  }
  .focus-visible\:ring-on-surface.focus-visible {
    --sf-ring-color: var(--sf-on-surface);
  }
  .focus-visible\:ring-on-surface:focus-visible {
    --sf-ring-color: var(--sf-on-surface);
  }
  .focus-visible\:ring-on-surface-variant.focus-visible {
    --sf-ring-color: var(--sf-on-surface-variant);
  }
  .focus-visible\:ring-on-surface-variant:focus-visible {
    --sf-ring-color: var(--sf-on-surface-variant);
  }
  .focus-visible\:ring-primary.focus-visible {
    --sf-ring-color: var(--sf-outline-primary);
  }
  .focus-visible\:ring-primary:focus-visible {
    --sf-ring-color: var(--sf-outline-primary);
  }
  .focus-visible\:ring-primary-container.focus-visible {
    --sf-ring-color: var(--sf-primary-container);
  }
  .focus-visible\:ring-primary-container:focus-visible {
    --sf-ring-color: var(--sf-primary-container);
  }
  .focus-visible\:ring-primary-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-primary-transparent-overlay);
  }
  .focus-visible\:ring-primary-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-primary-transparent-overlay);
  }
  .focus-visible\:ring-secondary.focus-visible {
    --sf-ring-color: var(--sf-outline-secondary);
  }
  .focus-visible\:ring-secondary:focus-visible {
    --sf-ring-color: var(--sf-outline-secondary);
  }
  .focus-visible\:ring-secondary-container.focus-visible {
    --sf-ring-color: var(--sf-secondary-container);
  }
  .focus-visible\:ring-secondary-container:focus-visible {
    --sf-ring-color: var(--sf-secondary-container);
  }
  .focus-visible\:ring-secondary-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-secondary-transparent-overlay);
  }
  .focus-visible\:ring-secondary-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-secondary-transparent-overlay);
  }
  .focus-visible\:ring-tertiary.focus-visible {
    --sf-ring-color: var(--sf-outline-tertiary);
  }
  .focus-visible\:ring-tertiary:focus-visible {
    --sf-ring-color: var(--sf-outline-tertiary);
  }
  .focus-visible\:ring-tertiary-container.focus-visible {
    --sf-ring-color: var(--sf-tertiary-container);
  }
  .focus-visible\:ring-tertiary-container:focus-visible {
    --sf-ring-color: var(--sf-tertiary-container);
  }
  .focus-visible\:ring-tertiary-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-tertiary-transparent-overlay);
  }
  .focus-visible\:ring-tertiary-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-tertiary-transparent-overlay);
  }
  .focus-visible\:ring-error.focus-visible {
    --sf-ring-color: var(--sf-outline-error);
  }
  .focus-visible\:ring-error:focus-visible {
    --sf-ring-color: var(--sf-outline-error);
  }
  .focus-visible\:ring-error-container.focus-visible {
    --sf-ring-color: var(--sf-error-container);
  }
  .focus-visible\:ring-error-container:focus-visible {
    --sf-ring-color: var(--sf-error-container);
  }
  .focus-visible\:ring-error-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-error-transparent-overlay);
  }
  .focus-visible\:ring-error-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-error-transparent-overlay);
  }
  .focus-visible\:ring-warning.focus-visible {
    --sf-ring-color: var(--sf-outline-warning);
  }
  .focus-visible\:ring-warning:focus-visible {
    --sf-ring-color: var(--sf-outline-warning);
  }
  .focus-visible\:ring-warning-container.focus-visible {
    --sf-ring-color: var(--sf-warning-container);
  }
  .focus-visible\:ring-warning-container:focus-visible {
    --sf-ring-color: var(--sf-warning-container);
  }
  .focus-visible\:ring-warning-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-warning-transparent-overlay);
  }
  .focus-visible\:ring-warning-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-warning-transparent-overlay);
  }
  .focus-visible\:ring-success.focus-visible {
    --sf-ring-color: var(--sf-outline-success);
  }
  .focus-visible\:ring-success:focus-visible {
    --sf-ring-color: var(--sf-outline-success);
  }
  .focus-visible\:ring-success-container.focus-visible {
    --sf-ring-color: var(--sf-success-container);
  }
  .focus-visible\:ring-success-container:focus-visible {
    --sf-ring-color: var(--sf-success-container);
  }
  .focus-visible\:ring-success-transparent-overlay.focus-visible {
    --sf-ring-color: var(--sf-success-transparent-overlay);
  }
  .focus-visible\:ring-success-transparent-overlay:focus-visible {
    --sf-ring-color: var(--sf-success-transparent-overlay);
  }
  .focus-visible\:ring-info.focus-visible {
    --sf-ring-color: var(--sf-outline-info);
  }
  .focus-visible\:ring-info:focus-visible {
    --sf-ring-color: var(--sf-outline-info);
  }
  .focus-visible\:ring-info-container.focus-visible {
    --sf-ring-color: var(--sf-info-container);
  }
  .focus-visible\:ring-info-container:focus-visible {
    --sf-ring-color: var(--sf-info-container);
  }
}

/* docara-shell-source: runtime/utility/ring-color/hover/css/hover.css */
@layer sf.utilities {
  .hover\:ring-transparent:hover {
    --sf-ring-color: var(--sf-transparent);
  }
  .hover\:ring-current:hover {
    --sf-ring-color: var(--sf-current);
  }
  .hover\:ring-outline:hover {
    --sf-ring-color: var(--sf-outline);
  }
  .hover\:ring-outline-variant:hover {
    --sf-ring-color: var(--sf-outline-variant);
  }
  .hover\:ring-surface:hover {
    --sf-ring-color: var(--sf-surface-1);
  }
  .hover\:ring-surface-0:hover {
    --sf-ring-color: var(--sf-surface-0);
  }
  .hover\:ring-surface-1:hover {
    --sf-ring-color: var(--sf-surface-1);
  }
  .hover\:ring-surface-container:hover {
    --sf-ring-color: var(--sf-surface-container);
  }
  .hover\:ring-surface-overlay:hover {
    --sf-ring-color: var(--sf-surface-overlay);
  }
  .hover\:ring-surface-transparent-overlay:hover {
    --sf-ring-color: var(--sf-surface-transparent-overlay);
  }
  .hover\:ring-surface-inverse:hover {
    --sf-ring-color: var(--sf-surface-inverse);
  }
  .hover\:ring-on-surface:hover {
    --sf-ring-color: var(--sf-on-surface);
  }
  .hover\:ring-on-surface-variant:hover {
    --sf-ring-color: var(--sf-on-surface-variant);
  }
  .hover\:ring-primary:hover {
    --sf-ring-color: var(--sf-outline-primary);
  }
  .hover\:ring-primary-container:hover {
    --sf-ring-color: var(--sf-primary-container);
  }
  .hover\:ring-primary-transparent-overlay:hover {
    --sf-ring-color: var(--sf-primary-transparent-overlay);
  }
  .hover\:ring-secondary:hover {
    --sf-ring-color: var(--sf-outline-secondary);
  }
  .hover\:ring-secondary-container:hover {
    --sf-ring-color: var(--sf-secondary-container);
  }
  .hover\:ring-secondary-transparent-overlay:hover {
    --sf-ring-color: var(--sf-secondary-transparent-overlay);
  }
  .hover\:ring-tertiary:hover {
    --sf-ring-color: var(--sf-outline-tertiary);
  }
  .hover\:ring-tertiary-container:hover {
    --sf-ring-color: var(--sf-tertiary-container);
  }
  .hover\:ring-tertiary-transparent-overlay:hover {
    --sf-ring-color: var(--sf-tertiary-transparent-overlay);
  }
  .hover\:ring-error:hover {
    --sf-ring-color: var(--sf-outline-error);
  }
  .hover\:ring-error-container:hover {
    --sf-ring-color: var(--sf-error-container);
  }
  .hover\:ring-error-transparent-overlay:hover {
    --sf-ring-color: var(--sf-error-transparent-overlay);
  }
  .hover\:ring-warning:hover {
    --sf-ring-color: var(--sf-outline-warning);
  }
  .hover\:ring-warning-container:hover {
    --sf-ring-color: var(--sf-warning-container);
  }
  .hover\:ring-warning-transparent-overlay:hover {
    --sf-ring-color: var(--sf-warning-transparent-overlay);
  }
  .hover\:ring-success:hover {
    --sf-ring-color: var(--sf-outline-success);
  }
  .hover\:ring-success-container:hover {
    --sf-ring-color: var(--sf-success-container);
  }
  .hover\:ring-success-transparent-overlay:hover {
    --sf-ring-color: var(--sf-success-transparent-overlay);
  }
  .hover\:ring-info:hover {
    --sf-ring-color: var(--sf-outline-info);
  }
  .hover\:ring-info-container:hover {
    --sf-ring-color: var(--sf-info-container);
  }
}

/* docara-shell-source: runtime/utility/ring-width/focus-visible/css/focus-visible.css */
@layer sf.utilities {
  .focus-visible\:ring-1.focus-visible {
    --sf-ring-width: var(--sf-a1);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-1.focus-visible {
    --sf-ring-width: var(--sf-a1);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-1:focus-visible {
    --sf-ring-width: var(--sf-a1);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-2.focus-visible {
    --sf-ring-width: var(--sf-a2);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-2.focus-visible {
    --sf-ring-width: var(--sf-a2);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-2:focus-visible {
    --sf-ring-width: var(--sf-a2);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-3.focus-visible {
    --sf-ring-width: var(--sf-a3);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-3.focus-visible {
    --sf-ring-width: var(--sf-a3);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-3:focus-visible {
    --sf-ring-width: var(--sf-a3);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-4.focus-visible {
    --sf-ring-width: var(--sf-a4);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-4.focus-visible {
    --sf-ring-width: var(--sf-a4);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-4:focus-visible {
    --sf-ring-width: var(--sf-a4);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-0.focus-visible {
    --sf-ring-width: var(--sf-0);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-0.focus-visible {
    --sf-ring-width: var(--sf-0);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .focus-visible\:ring-0:focus-visible {
    --sf-ring-width: var(--sf-0);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
}

/* docara-shell-source: runtime/utility/ring-width/hover/css/hover.css */
@layer sf.utilities {
  .hover\:ring-1:hover {
    --sf-ring-width: var(--sf-a1);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .hover\:ring-2:hover {
    --sf-ring-width: var(--sf-a2);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .hover\:ring-3:hover {
    --sf-ring-width: var(--sf-a3);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .hover\:ring-4:hover {
    --sf-ring-width: var(--sf-a4);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
  .hover\:ring-0:hover {
    --sf-ring-width: var(--sf-0);
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + 0px) color-mix(in srgb, transparent, currentColor calc(1 * 100%)), 0 0 0 0px transparent;
    box-shadow: var(--sf-ring-inset, ) 0 0 0 calc(var(--sf-ring-width) + var(--sf-ring-offset-width, 0px)) color-mix(in srgb, transparent, var(--sf-ring-color, currentColor) calc(var(--sf-ring--alfa, 1) * 100%)), 0 0 0 var(--sf-ring-offset-width, 0px) var(--sf-ring-offset-color, transparent);
  }
}