:root { --white: #fff; --black: #000; --gray: #959595; --lightningOrange: #fd9800; --superGreen: #39e673; --superRed: #e63939; --primaryColor: #242633; --secondaryColor: #373947; --tertiaryColor: #313340; --primaryText: #fff; --highlight: #353745; --gradient: linear-gradient(270deg, #868b9f 0%, #333c5e 100%); } .light { --white: #fff; --black: #000; --gray: #959595; --lightningOrange: #fd9800; --superGreen: #39e673; --superRed: #e63939; --primaryColor: #fff; --secondaryColor: #ebebeb; --tertiaryColor: #f3f3f3; --primaryText: #000; --highlight: #f2f2f2; --gradient: linear-gradient(270deg, #fd9800 0%, #ffbd59 100%); } $z-layers: ( // Layer 1 "form": ( "container": 10, "pay": 10, "request": 10 ), "contact-form": ( "modal": 10, ), "connect-form": ( "modal": 10, ), "settings-form": ( "modal": 10 ), "network-filters": ( "open": 10, ), // Layer 2 "loading-bolt": ( "container": 20, ), // Layer 3 "global-error": ( "container": 30, ), // Layer 4 "tooltip": ( "after": 40, "before": 40 ) ); // Functions for pulling z-index values from $z-layers map @function z($layer...) { @if not map-has-nested-keys($z-layers, $layer) { @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted."; } @return map-deep-get($z-layers, $layer); } @function map-has-nested-keys($map, $keys) { @each $key in $keys { @if not map-has-key($map, $key) { @return false; } $map: map-get($map, $key); } @return true; } @function map-deep-get($map, $keys) { @each $key in $keys { $map: map-get($map, $key); } @return $map; }