@use '../variables/colors' as colors;

@mixin cui-shadow-10() {
    box-shadow:
        0 1px 4px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent),
        0 1px 4px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent);
}

@mixin cui-shadow-15() {
    box-shadow:
        0 1px 2px 0 color-mix(in srgb, colors.$cui-base-200 60%, transparent),
        0 1px 3px 0 color-mix(in srgb, colors.$cui-base-200 40%, transparent);
}

@mixin cui-shadow-20() {
    box-shadow:
        0 2px 4px -1px color-mix(in srgb, colors.$cui-base-200 60%, transparent),
        0 4px 6px -1px color-mix(in srgb, colors.$cui-base-200 40%, transparent);
}

@mixin cui-shadow-25() {
    box-shadow:
        0 4px 6px -2px color-mix(in srgb, colors.$cui-base-200 50%, transparent),
        0 10px 15px -3px color-mix(in srgb, colors.$cui-base-200 40%, transparent);
}

@mixin cui-shadow-right() {
    box-shadow: 5px 0 4px 0 color-mix(in srgb, colors.$cui-base-200 50%, transparent);
}

@mixin cui-shadow-left() {
    box-shadow: -5px 0 4px 0 color-mix(in srgb, colors.$cui-base-200 50%, transparent);
}

@mixin cui-shadow-focused() {
    box-shadow: 0 0 0 2px colors.$cui-focus;
}

@mixin cui-shadow-error-focused() {
    box-shadow: 0 0 0 2px color-mix(in srgb, colors.$cui-danger 25%, transparent);
}