@fest-lib/veela 0.1.1

package/src/scss/advanced/md3/_md3.scss

@@ -0,0 +1,596 @@
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+@use "utils" as _;
+@use "shadow" as _shadow;
+
+//
+// Space function
+@function md3-space($token) {
+    @return _.md3-fetch($md3-space-scale, $token, "space token");
+}
+
+//
+// Radius function
+@function md3-radius($token) {
+    @if map.has-key($md3-radius-scale, $token) {
+        @return map.get($md3-radius-scale, $token);
+    }
+
+    @if map.has-key($md3-radius-aliases, $token) {
+        $alias: map.get($md3-radius-aliases, $token);
+        @return map.get($md3-radius-scale, $alias);
+    }
+
+    @return _.md3-fetch($md3-radius-scale, $token, "radius token");
+}
+
+//
+// Gap function
+@function md3-gap($token) { @return md3-space($token); }
+
+//
+// Export gap vars mixin
+@mixin md3-export-gap-vars() {
+    @each $token, $value in $md3-space-scale {
+        --gap-#{$token}: #{$value};
+    }
+}
+
+//
+// Padding function
+@function md3-padding($token) { @return md3-space($token); }
+
+//
+// Export padding vars mixin
+@mixin md3-export-padding-vars() {
+    @each $token, $value in $md3-space-scale {
+        --padding-#{$token}: #{$value};
+    }
+}
+
+//
+// Radius function
+@function md3-shape($token) {
+    @if map.has-key($md3-shape-scale, $token) {
+        @return map.get($md3-shape-scale, $token);
+    }
+
+    @if map.has-key($md3-shape-aliases, $token) {
+        $alias: map.get($md3-shape-aliases, $token);
+        @return map.get($md3-shape-scale, $alias);
+    }
+
+    @error "Unknown MD3 shape token `#{$token}`. Available: #{map.keys($md3-shape-scale)}";
+}
+
+//
+// State function
+@function md3-opacity-state($state) {
+    @return _.md3-fetch($md3-state-opacity, $state, "state token");
+}
+
+//
+// Icon size function
+@function md3-icon-size($token: md) {
+    @return _.md3-fetch($md3-icon-sizes, $token, "icon size");
+}
+
+//
+// Avatar size function
+@function md3-avatar-size($token: md) {
+    @return _.md3-fetch($md3-avatar-sizes, $token, "avatar size");
+}
+
+//
+// Export layout vars mixin
+@mixin md3-export-density-vars() {
+    @each $token, $value in $md3-space-scale {
+        --space-#{$token}: #{$value};
+        --gap-#{$token}: #{$value};
+        --padding-#{$token}: #{$value};
+    }
+
+    @each $token, $value in $md3-shape-scale {
+        --radius-#{$token}: #{$value};
+    }
+}
+
+
+
+@mixin md3-export-scale-vars() {
+    --u: 1rem;
+    --pxu: 1px;
+    --cqi: 1cqi;
+    --cqb: 1cqb;
+
+    --size-scale: 1;
+    --font-scale: 1;
+
+    --container-max-width: min(100%, 110rem);
+    --container-padding: clamp(1rem, 3vw, 2rem);
+
+    @each $name, $value in $md3-breakpoints {
+        --breakpoint-#{$name}: #{$value};
+    }
+
+    @container (inline-size < $md3-container-compact-max) {
+        --size-scale: 0.92;
+        --font-scale: 0.96;
+    }
+
+    @container ($md3-container-compact-max <= inline-size < $md3-container-cozy-max) {
+        --size-scale: 1;
+        --font-scale: 1;
+    }
+
+    @container (inline-size >= $md3-container-cozy-max) {
+        --size-scale: 1.05;
+        --font-scale: 1.04;
+    }
+
+    --sidebar-width: min(clamp(16.25rem, 28vw, 22.5rem), 100cqi);
+    --sidebar-width-collapsed: min(clamp(10rem, 20vw, 12.5rem), 100cqi);
+    --sidebar-width-mobile: min(clamp(17.5rem, 35vw, 20rem), 100cqi);
+    --sidebar-width-mobile-small: min(clamp(18.75rem, 40vw, 21.25rem), 100cqi);
+
+    @media (max-inline-size: #{map.get($md3-breakpoints, md)}) {
+        --sidebar-width: var(--sidebar-width-mobile);
+    }
+
+    @media (max-inline-size: #{map.get($md3-breakpoints, sm)}) {
+        --sidebar-width: var(--sidebar-width-mobile-small);
+    }
+}
+
+
+
+
+//
+// Export layout vars mixin
+@mixin md3-export-layout-vars() {
+    // Spacing tokens
+    @each $token, $value in $md3-space-scale {
+        --space-#{$token}-base: #{$value};
+        --space-#{$token}: var(--space-#{$token}-base);
+        --gap-#{$token}: var(--space-#{$token});
+        --padding-#{$token}: var(--space-#{$token});
+    }
+
+
+    //
+    @each $alias, $token in $md3-radius-aliases {
+        --radius-#{$alias}: var(--radius-#{$token}, #{md3-radius($token)});
+    }
+
+    // Radius tokens
+    @each $token, $value in $md3-radius-scale {
+        --radius-#{$token}: #{$value};
+    }
+
+    --radius-full: #{md3-radius(full)};
+
+
+    //
+    @each $alias, $token in $md3-shape-aliases {
+        --shape-#{$alias}: var(--shape-#{$token}, #{md3-shape($token)});
+    }
+
+    // Shape tokens
+    @each $token, $value in $md3-shape-scale {
+        --shape-#{$token}: #{$value};
+    }
+
+
+
+    // Icon & avatar sizes
+    --icon-size-xs: #{md3-icon-size(xs)};
+    --icon-size-sm: #{md3-icon-size(sm)};
+    --icon-size-md: #{md3-icon-size(md)};
+    --icon-size-lg: #{md3-icon-size(lg)};
+    --icon-size-xl: #{md3-icon-size(xl)};
+    --icon-size-2xl: #{md3-icon-size(2xl)};
+
+    --avatar-size-sm: #{md3-avatar-size(sm)};
+    --avatar-size: #{md3-avatar-size(md)};
+    --avatar-size-lg: #{md3-avatar-size(lg)};
+
+    // Typography scale
+    --text-xs: clamp(calc(0.7rem * var(--font-scale)), 0.3cqi + 0.6rem, calc(0.75rem * var(--font-scale)));
+    --text-sm: clamp(calc(0.75rem * var(--font-scale)), 0.4cqi + 0.65rem, calc(0.85rem * var(--font-scale)));
+    --text-base: clamp(calc(0.8rem * var(--font-scale)), 0.5cqi + 0.7rem, calc(0.95rem * var(--font-scale)));
+    --text-lg: clamp(calc(0.9rem * var(--font-scale)), 0.6cqi + 0.8rem, calc(1.1rem * var(--font-scale)));
+    --text-xl: clamp(calc(1rem * var(--font-scale)), 0.8cqi + 0.9rem, calc(1.3rem * var(--font-scale)));
+
+    // Motion tokens
+    --transition-fast: 140ms ease;
+    --transition-normal: 160ms ease;
+    --transition-slow: 200ms ease;
+
+    --text-opacity-disabled: #{md3-state(disabled)};
+}
+
+
+//
+// Spacing variables
+$spacing-xs: #{md3-space(xs)};
+$spacing-sm: #{md3-space(sm)};
+$spacing-md: #{md3-space(md)};
+$spacing-lg: #{md3-space(lg)};
+$spacing-xl: #{md3-space(xl)};
+$spacing-2xl: #{md3-space(2xl)};
+$spacing-3xl: #{md3-space(3xl)};
+$spacing-4xl: #{md3-space(4xl)};
+
+//
+// Border radius variables
+$border-radius-sm: #{md3-radius(sm)};
+$border-radius-md: #{md3-radius(md)};
+$border-radius-lg: #{md3-radius(lg)};
+$border-radius-xl: #{md3-radius(xl)};
+$border-radius-2xl: #{md3-radius(2xl)};
+$border-radius-3xl: #{md3-radius(3xl)};
+$border-radius-4xl: #{md3-radius(4xl)};
+$border-radius-full: #{md3-radius(full)};
+
+//
+// Z-index variables
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+
+//
+// Breakpoint variables
+$breakpoint-sm: map.get($md3-breakpoints, sm);
+$breakpoint-md: map.get($md3-breakpoints, md);
+$breakpoint-lg: map.get($md3-breakpoints, lg);
+$breakpoint-xl: map.get($md3-breakpoints, xl);
+$breakpoint-2xl: map.get($md3-breakpoints, 2xl);
+
+//
+// Container max width
+$container-max-width: min(100%, 110rem);
+
+//
+// Backdrop blur variables
+$backdrop-blur-sm: blur(6px);
+$backdrop-blur-md: blur(12px);
+$backdrop-blur-lg: blur(18px);
+
+//
+// UI radius variables
+$ui-radius-sm: #{md3-radius(sm)} !default;
+$ui-radius-md: #{md3-radius(md)} !default;
+$ui-radius-lg: #{md3-radius(lg)} !default;
+$ui-radius-xl: #{md3-radius(xl)} !default;
+$ui-radius-2xl: #{md3-radius(2xl)} !default;
+$ui-radius-3xl: #{md3-radius(3xl)} !default;
+$ui-radius-4xl: #{md3-radius(4xl)} !default;
+$ui-radius-full: #{md3-radius(full)} !default;
+$ui-border-width: 1px !default;
+
+//
+// UI spacing variables
+$ui-spacing-2xs: #{md3-space(2xs)} !default;
+$ui-spacing-xs: #{md3-space(xs)} !default;
+$ui-spacing-sm: #{md3-space(sm)} !default;
+$ui-spacing-md: #{md3-space(md)} !default;
+$ui-spacing-lg: #{md3-space(lg)} !default;
+$ui-spacing-xl: #{md3-space(xl)} !default;
+$ui-spacing-2xl: #{md3-space(2xl)} !default;
+$ui-spacing-3xl: #{md3-space(3xl)} !default;
+$ui-spacing-4xl: #{md3-space(4xl)} !default;
+
+//
+// UI titlebar height
+$ui-titlebar-height: 32px !default;
+$ui-font-title-size: #{md3-type("title-small", size)} !default;
+$ui-font-subtitle-size: #{md3-type("label-large", size)} !default;
+
+//
+// Mobile width
+$mobile-width: 9in;
+
+//
+// Is touch
+$is-touch: "screen and (hover: none) and (pointer: coarse)";
+$is-not-wide: "(width < #{$mobile-width})";
+$is-desktop: "(width >= #{$mobile-width})";
+$is-deskinset-block-start: "(((hover: hover) or (pointer: fine)) and ((width >= #{$mobile-width}) or (orientation: landscape)))";
+$is-mobile: "not #{$is-desktop}";
+$is-windowed: "@container u2-windowed #{$is-not-wide}";
+
+
+//
+// Space function
+@function md3-space($token) {
+    @return _.md3-fetch($md3-space-scale, $token, "space token");
+}
+
+//
+// Radius function
+@function md3-radius($token) {
+    @if map.has-key($md3-radius-scale, $token) {
+        @return map.get($md3-radius-scale, $token);
+    }
+
+    @if map.has-key($md3-radius-aliases, $token) {
+        $alias: map.get($md3-radius-aliases, $token);
+        @return map.get($md3-radius-scale, $alias);
+    }
+
+    @return _.md3-fetch($md3-radius-scale, $token, "radius token");
+}
+
+//
+// Gap function
+@function md3-gap($token) { @return md3-space($token); }
+
+//
+// Export gap vars mixin
+@mixin md3-export-gap-vars() {
+    @each $token, $value in $md3-space-scale {
+        --gap-#{$token}: #{$value};
+    }
+}
+
+//
+// Padding function
+@function md3-padding($token) { @return md3-space($token); }
+
+//
+// Export padding vars mixin
+@mixin md3-export-padding-vars() {
+    @each $token, $value in $md3-space-scale {
+        --padding-#{$token}: #{$value};
+    }
+}
+
+//
+// Radius function
+@function md3-shape($token) {
+    @if map.has-key($md3-shape-scale, $token) {
+        @return map.get($md3-shape-scale, $token);
+    }
+
+    @if map.has-key($md3-shape-aliases, $token) {
+        $alias: map.get($md3-shape-aliases, $token);
+        @return map.get($md3-shape-scale, $alias);
+    }
+
+    @error "Unknown MD3 shape token `#{$token}`. Available: #{map.keys($md3-shape-scale)}";
+}
+
+//
+// State function
+@function md3-opacity-state($state) {
+    @return _.md3-fetch($md3-state-opacity, $state, "state token");
+}
+
+//
+// Icon size function
+@function md3-icon-size($token: md) {
+    @return _.md3-fetch($md3-icon-sizes, $token, "icon size");
+}
+
+//
+// Avatar size function
+@function md3-avatar-size($token: md) {
+    @return _.md3-fetch($md3-avatar-sizes, $token, "avatar size");
+}
+
+//
+// Export layout vars mixin
+@mixin md3-export-density-vars() {
+    @each $token, $value in $md3-space-scale {
+        --space-#{$token}: #{$value};
+        --gap-#{$token}: #{$value};
+        --padding-#{$token}: #{$value};
+    }
+
+    @each $token, $value in $md3-shape-scale {
+        --radius-#{$token}: #{$value};
+    }
+}
+
+
+
+@mixin md3-export-scale-vars() {
+    --u: 1rem;
+    --pxu: 1px;
+    --cqi: 1cqi;
+    --cqb: 1cqb;
+
+    --size-scale: 1;
+    --font-scale: 1;
+
+    --container-max-width: min(100%, 110rem);
+    --container-padding: clamp(1rem, 3vw, 2rem);
+
+    @each $name, $value in $md3-breakpoints {
+        --breakpoint-#{$name}: #{$value};
+    }
+
+    @container (inline-size < $md3-container-compact-max) {
+        --size-scale: 0.92;
+        --font-scale: 0.96;
+    }
+
+    @container ($md3-container-compact-max <= inline-size < $md3-container-cozy-max) {
+        --size-scale: 1;
+        --font-scale: 1;
+    }
+
+    @container (inline-size >= $md3-container-cozy-max) {
+        --size-scale: 1.05;
+        --font-scale: 1.04;
+    }
+
+    --sidebar-width: min(clamp(16.25rem, 28vw, 22.5rem), 100cqi);
+    --sidebar-width-collapsed: min(clamp(10rem, 20vw, 12.5rem), 100cqi);
+    --sidebar-width-mobile: min(clamp(17.5rem, 35vw, 20rem), 100cqi);
+    --sidebar-width-mobile-small: min(clamp(18.75rem, 40vw, 21.25rem), 100cqi);
+
+    @media (max-inline-size: #{map.get($md3-breakpoints, md)}) {
+        --sidebar-width: var(--sidebar-width-mobile);
+    }
+
+    @media (max-inline-size: #{map.get($md3-breakpoints, sm)}) {
+        --sidebar-width: var(--sidebar-width-mobile-small);
+    }
+}
+
+
+
+
+//
+// Export layout vars mixin
+@mixin md3-export-layout-vars() {
+    // Spacing tokens
+    @each $token, $value in $md3-space-scale {
+        --space-#{$token}-base: #{$value};
+        --space-#{$token}: var(--space-#{$token}-base);
+        --gap-#{$token}: var(--space-#{$token});
+        --padding-#{$token}: var(--space-#{$token});
+    }
+
+
+    //
+    @each $alias, $token in $md3-radius-aliases {
+        --radius-#{$alias}: var(--radius-#{$token}, #{md3-radius($token)});
+    }
+
+    // Radius tokens
+    @each $token, $value in $md3-radius-scale {
+        --radius-#{$token}: #{$value};
+    }
+
+    --radius-full: #{md3-radius(full)};
+
+
+    //
+    @each $alias, $token in $md3-shape-aliases {
+        --shape-#{$alias}: var(--shape-#{$token}, #{md3-shape($token)});
+    }
+
+    // Shape tokens
+    @each $token, $value in $md3-shape-scale {
+        --shape-#{$token}: #{$value};
+    }
+
+
+
+    // Icon & avatar sizes
+    --icon-size-xs: #{md3-icon-size(xs)};
+    --icon-size-sm: #{md3-icon-size(sm)};
+    --icon-size-md: #{md3-icon-size(md)};
+    --icon-size-lg: #{md3-icon-size(lg)};
+    --icon-size-xl: #{md3-icon-size(xl)};
+    --icon-size-2xl: #{md3-icon-size(2xl)};
+
+    --avatar-size-sm: #{md3-avatar-size(sm)};
+    --avatar-size: #{md3-avatar-size(md)};
+    --avatar-size-lg: #{md3-avatar-size(lg)};
+
+    // Typography scale
+    --text-xs: clamp(calc(0.7rem * var(--font-scale)), 0.3cqi + 0.6rem, calc(0.75rem * var(--font-scale)));
+    --text-sm: clamp(calc(0.75rem * var(--font-scale)), 0.4cqi + 0.65rem, calc(0.85rem * var(--font-scale)));
+    --text-base: clamp(calc(0.8rem * var(--font-scale)), 0.5cqi + 0.7rem, calc(0.95rem * var(--font-scale)));
+    --text-lg: clamp(calc(0.9rem * var(--font-scale)), 0.6cqi + 0.8rem, calc(1.1rem * var(--font-scale)));
+    --text-xl: clamp(calc(1rem * var(--font-scale)), 0.8cqi + 0.9rem, calc(1.3rem * var(--font-scale)));
+
+    // Motion tokens
+    --transition-fast: 140ms ease;
+    --transition-normal: 160ms ease;
+    --transition-slow: 200ms ease;
+
+    --text-opacity-disabled: #{md3-state(disabled)};
+}
+
+
+//
+// Spacing variables
+$spacing-xs: #{md3-space(xs)};
+$spacing-sm: #{md3-space(sm)};
+$spacing-md: #{md3-space(md)};
+$spacing-lg: #{md3-space(lg)};
+$spacing-xl: #{md3-space(xl)};
+$spacing-2xl: #{md3-space(2xl)};
+$spacing-3xl: #{md3-space(3xl)};
+$spacing-4xl: #{md3-space(4xl)};
+
+//
+// Border radius variables
+$border-radius-sm: #{md3-radius(sm)};
+$border-radius-md: #{md3-radius(md)};
+$border-radius-lg: #{md3-radius(lg)};
+$border-radius-xl: #{md3-radius(xl)};
+$border-radius-2xl: #{md3-radius(2xl)};
+$border-radius-3xl: #{md3-radius(3xl)};
+$border-radius-4xl: #{md3-radius(4xl)};
+$border-radius-full: #{md3-radius(full)};
+
+//
+// Z-index variables
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-modal-backdrop: 1040;
+$z-modal: 1050;
+$z-popover: 1060;
+$z-tooltip: 1070;
+
+//
+// Breakpoint variables
+$breakpoint-sm: map.get($md3-breakpoints, sm);
+$breakpoint-md: map.get($md3-breakpoints, md);
+$breakpoint-lg: map.get($md3-breakpoints, lg);
+$breakpoint-xl: map.get($md3-breakpoints, xl);
+$breakpoint-2xl: map.get($md3-breakpoints, 2xl);
+
+//
+// Container max width
+$container-max-width: min(100%, 110rem);
+
+//
+// Backdrop blur variables
+$backdrop-blur-sm: blur(6px);
+$backdrop-blur-md: blur(12px);
+$backdrop-blur-lg: blur(18px);
+
+//
+// UI radius variables
+$ui-radius-sm: #{md3-radius(sm)} !default;
+$ui-radius-md: #{md3-radius(md)} !default;
+$ui-radius-lg: #{md3-radius(lg)} !default;
+$ui-radius-xl: #{md3-radius(xl)} !default;
+$ui-radius-2xl: #{md3-radius(2xl)} !default;
+$ui-radius-3xl: #{md3-radius(3xl)} !default;
+$ui-radius-4xl: #{md3-radius(4xl)} !default;
+$ui-radius-full: #{md3-radius(full)} !default;
+$ui-border-width: 1px !default;
+
+//
+// UI spacing variables
+$ui-spacing-2xs: #{md3-space(2xs)} !default;
+$ui-spacing-xs: #{md3-space(xs)} !default;
+$ui-spacing-sm: #{md3-space(sm)} !default;
+$ui-spacing-md: #{md3-space(md)} !default;
+$ui-spacing-lg: #{md3-space(lg)} !default;
+$ui-spacing-xl: #{md3-space(xl)} !default;
+$ui-spacing-2xl: #{md3-space(2xl)} !default;
+$ui-spacing-3xl: #{md3-space(3xl)} !default;
+$ui-spacing-4xl: #{md3-space(4xl)} !default;
+
+//
+// UI titlebar height
+$ui-titlebar-height: 32px !default;
+$ui-font-title-size: #{md3-type("title-small", size)} !default;
+$ui-font-subtitle-size: #{md3-type("label-large", size)} !default;

package/src/scss/advanced/md3/_utils.scss

@@ -0,0 +1,114 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:math";
+@use "sass:meta";
+@use "sass:string";
+
+//
+@function option-or($options, $key, $fallback) {
+    $value: map.get($options, $key);
+    @return if(sass($value == null): $fallback; else: $value);
+}
+
+//
+// Fetch function
+@function md3-fetch($source, $token, $label: "token") {
+    @if map.has-key($source, $token) {
+        @return map.get($source, $token);
+    }
+
+    @error "Unknown #{$label} `#{$token}`. Available: #{map.keys($source)}";
+}
+
+//
+@mixin when-hover($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}:hover { @content; } }
+    @media (hover: none) and (pointer: coarse) { #{$selector}:active { @content; } }
+}
+
+//
+@mixin when-active($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}:active { @content; } }
+}
+
+//
+@mixin when-focus($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}:focus-visible { @content; } }
+    @media (hover: none) and (pointer: coarse) { #{$selector}:focus { @content; } }
+}
+
+//
+@mixin when-focus-visible($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}:focus-visible { @content; } }
+    @media (hover: none) and (pointer: coarse) { #{$selector}:focus-visible { @content; } }
+}
+
+//
+@mixin when-disabled($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}:disabled, #{$selector}[aria-disabled="true"] { @content; } }
+    @media (hover: none) and (pointer: coarse) { #{$selector}:disabled, #{$selector}[aria-disabled="true"] { @content; } }
+}
+
+//
+@mixin when-selected($selector: "&") {
+    @media (hover: hover) and (pointer: fine) { #{$selector}::selection, #{$selector}:checked, #{$selector}[aria-selected="true"] { @content; } }
+    @media (hover: none) and (pointer: coarse) { #{$selector}::selection, #{$selector}:checked, #{$selector}[aria-selected="true"] { @content; } }
+}
+
+//
+@mixin when-autofill($selector: "&") {
+    #{$selector}:-webkit-autofill { @content; }
+    #{$selector}:autofill { @content; }
+    #{$selector}:auto-fill { @content; }
+}
+
+// State layer mixin
+@mixin md3-state-layer($role: primary, $state: hover, $selector: "&::after") {
+    $opacity: md3-opacity-state($state);
+    $role-var: md3-var($role);
+    $weight: calc(100% * #{$opacity});//math.percentage($opacity);
+
+    @if $selector == "&::after" or $selector == "&::before" {
+        position: relative;
+        overflow: hidden;
+    }
+
+    #{$selector} {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background-color: color-mix(in oklch, var(#{$role-var}) #{$weight}, transparent);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--duration-fast) var(--ease-out);
+    }
+
+    @include when-hover {
+        #{$selector} { opacity: $opacity; }
+    }
+
+    @include when-active {
+        #{$selector} { opacity: $opacity; }
+    }
+
+    @include when-focus {
+        #{$selector} { opacity: $opacity; }
+    }
+
+    @include when-focus-visible {
+        #{$selector} { opacity: $opacity; }
+    }
+
+    @include when-disabled {
+        #{$selector} { opacity: $opacity; }
+    }
+
+    @include when-selected {
+        #{$selector} { opacity: $opacity; }
+    }
+}
+
+@mixin hover($selector: "&") {
+    @include when-hover { #{$selector}:hover { @content; } }
+    @include when-active { #{$selector}:active { @content; } }
+}