.ui-shadow,
.ui-shadow\@m {
  box-shadow:
    0 1px 3px 0 var(--ui-shadow-color, rgb(0 0 0 / 0.1)),
    0 1px 2px -1px var(--ui-shadow-color, rgb(0 0 0 / 0.1)) !important;
}
.ui-shadow\@xs {
  box-shadow: 0 1px 1px 0 var(--ui-shadow-color, rgb(0 0 0 / 0.04)) !important;
}
.ui-shadow\@s {
  box-shadow: 0 1px 2px 0 var(--ui-shadow-color, rgb(0 0 0 / 0.05)) !important;
}
.ui-shadow\@l {
  box-shadow:
    0 4px 6px -1px var(--ui-shadow-color, rgb(0 0 0 / 0.1)),
    0 2px 4px -2px var(--ui-shadow-color, rgb(0 0 0 / 0.1)) !important;
}
.ui-shadow\@xl {
  box-shadow:
    0 10px 15px -3px var(--ui-shadow-color, rgb(0 0 0 / 0.1)),
    0 4px 6px -4px var(--ui-shadow-color, rgb(0 0 0 / 0.1)) !important;
}
.ui-shadow\@2xl {
  box-shadow:
    0 20px 25px -5px var(--ui-shadow-color, rgb(0 0 0 / 0.1)),
    0 8px 10px -6px var(--ui-shadow-color, rgb(0 0 0 / 0.1)) !important;
}
.ui-shadow\@3xl {
  box-shadow: 0 35px 60px -15px var(--ui-shadow-color, rgb(0 0 0 / 0.2)) !important;
}

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