@use "sass:color";
@use 'variables';

.shadow-inherit {
    --tw-shadow-color: inherit;
}

.shadow-current {
    --tw-shadow-color: currentColor;
}

.shadow-transparent {
    --tw-shadow-color: transparent;
}

.shadow-black {
    --tw-shadow-color: #000;
}

.shadow-white {
    --tw-shadow-color: #fff;
}

@each $colorName, $value in variables.$colors {
    .shadow-#{$colorName} {
        --tw-shadow-color: #{$value};
        --tw-shadow: var(--tw-shadow-colored);
    }
}

@each $colorName, $value in variables.$colors {
    $newColor: color.change($value, $alpha: 0.5);
    .shadow-#{$colorName}\/50 {
        --tw-shadow-color: #{$newColor};
        --value: #{$value};
        --tw-shadow: var(--tw-shadow-colored);
    }
}

.shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
}

.shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-inner {
    box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
}

.shadow-none {
    box-shadow: none;
}