.ui-outline,
.ui-outline\@s {
  box-shadow: 0 0 6px 2px var(--ui-outline-color, rgb(0 0 0 / 0.18)) !important;
}
.ui-outline\@xs {
  box-shadow: 0 0 4px 1px var(--ui-outline-color, rgb(0 0 0 / 0.18)) !important;
}
.ui-outline\@m {
  box-shadow: 0 0 9px 3px var(--ui-outline-color, rgb(0 0 0 / 0.18)) !important;
}
.ui-outline\@l {
  box-shadow: 0 0 14px 5px var(--ui-outline-color, rgb(0 0 0 / 0.18)) !important;
}
.ui-outline\@xl {
  box-shadow: 0 0 20px 8px var(--ui-outline-color, rgb(0 0 0 / 0.18)) !important;
}

.ui-outline\:default {
  --ui-outline-color: color-mix(in srgb, var(--color-default) 55%, transparent);
}
.ui-outline\:primary {
  --ui-outline-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.ui-outline\:secondary {
  --ui-outline-color: color-mix(in srgb, var(--color-secondary) 55%, transparent);
}
.ui-outline\:success {
  --ui-outline-color: color-mix(in srgb, var(--color-success) 55%, transparent);
}
.ui-outline\:warning {
  --ui-outline-color: color-mix(in srgb, var(--color-warning) 55%, transparent);
}
.ui-outline\:danger {
  --ui-outline-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
}
.ui-outline\:info {
  --ui-outline-color: color-mix(in srgb, var(--color-info) 55%, transparent);
}
.ui-outline\:brand {
  --ui-outline-color: color-mix(in srgb, var(--color-brand) 55%, transparent);
}
.ui-outline\:accent {
  --ui-outline-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}