elevation-sui

// light mode elevation

// Use for Accordion, Cards, Chip, Slider, Segment
@emboss: 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 6px rgba(0, 0, 0, 0.07);

// Use for Dropdown, Message, Snackbar, Tooltip
@overlay: 0px 1px 7px rgba(0, 0, 0, 0.03), 0px 2px 23px rgba(0, 0, 0, 0.05), 0px 9px 107px rgba(0, 0, 0, 0.08);

// Dropshadow for dialogs
@dialog: 0px 1.5px 10px rgba(0, 0, 0, 0.03), 0px 5px 28px rgba(0, 0, 0, 0.05), 0px 10px 66px rgba(0, 0, 0, 0.06), 0px 36px 219px rgba(0, 0, 0, 0.09);

//Drag and Drop Interactions
@dragNDrop: 0px 0.5px 3px rgba(0, 0, 0, 0.05), 0px 1px 10px rgba(0, 0, 0, 0.07), 0px 6px 45px rgba(0, 0, 0, 0.12);

// dark mode elevation
@darkEmboss: 0px 0px 0.5px rgba(0, 0, 0, 0.09), 0px 1px 5px rgba(0, 0, 0, 0.12);
@darkOverlay: 0px 1px 7px rgba(0, 0, 0, 0.09), 0px 2px 23px rgba(0, 0, 0, 0.15), 0px 9px 107px rgba(0, 0, 0, 0.24);
@darkDialog: 0px 1.5px 10px rgba(0, 0, 0, 0.09), 0px 6px 28px rgba(0, 0, 0, 0.15), 0px 10px 66px rgba(0, 0, 0, 0.18), 0px 36px 219px rgba(0, 0, 0, 0.27);
@darkDragNDrop: 0px 0.5px 3px rgba(0, 0, 0, 0.15), 0px 1px 10px rgba(0, 0, 0, 0.21), 0px 6px 45px rgba(0, 0, 0, 0.36);