@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/advanced/misc/_config.scss

@@ -1,119 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-
-$md-config: (
-    "effects": (
-        "active-brightness": 0.85,
-        "hover-brightness": 1.2,
-        "disabled-opacity": 0.5
-    ),
-    "shape": (
-        "border-radius": 0.75rem,
-        "box-shadow": 0 4px 6px -1px rgb(0 0 0 / 0.1),
-        "box-shadow-hover": 0 10px 15px -3px rgb(0 0 0 / 0.1)
-    ),
-    "colors": (
-        "accent": (#118bee15, #0097fc4f),
-        "bg": (#ffffff, #0d1117),
-        "bg-secondary": (#f6f8fa, #151b23),
-        "link": (#0969da, #2f81f7),
-        "secondary": (#6e7781, #8b949e),
-        "secondary-accent": (#eff1f3, #1f2428),
-        "shadow": (#d1d9e0, #30363d),
-        "table": (#f6f8fa, #161b22),
-        "text": (#1f2328, #e6edf3),
-        "text-secondary": (#656d76, #7d8590),
-        "scrollbar": (#d0d7de, #484f58),
-        "border": (#d0d7de, #30363d)
-    ),
-    "font": (
-        "emoji": "\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
-        "body": "-apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, var(--font-family-emoji-flag-capable)",
-        "mono": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace",
-        "size-base": 1rem
-    ),
-    "layout": (
-        "line-height": 1.5,
-        "justify-important": center,
-        "justify-normal": start,
-        "widths": (
-            "card": 320px,
-            "card-medium": 480px,
-            "card-wide": 768px,
-            "content": 1200px
-        )
-    ),
-    "z-index": (
-        "negative": -1,
-        "base": 0,
-        "dropdown": 1000,
-        "sticky": 1020,
-        "fixed": 1030,
-        "modal-backdrop": 1040,
-        "modal": 1050,
-        "popover": 1060,
-        "tooltip": 1070
-    ),
-    "page": (
-        "margin": 1rem
-    ),
-    "heading": (
-        "padding": 0.5em,
-        "padding-small": 0.25em
-    ),
-    "blockquote": (
-        "margin-inline": 1.5em,
-        "padding-inline": 1em
-    ),
-    "table": (
-        "cell-padding": 0.5rem 1rem
-    ),
-    "media": (
-        "img-max-width": 100%
-    ),
-    "scrollbar": (
-        "size": 6px
-    )
-);
-
-@function md-config($keys...) {
-    $value: $md-config;
-
-    @each $key in $keys {
-        @if $value == null {
-            @return null;
-        }
-        $value: map.get($value, $key);
-    }
-
-    @return $value;
-}
-
-@function md-color($name, $mode: null) {
-    $palette: md-config("colors");
-    $value: map.get($palette, $name);
-
-    @if $value == null {
-        @return null;
-    }
-
-    @if $mode == "light" {
-        @return list.nth($value, 1);
-    }
-
-    @if $mode == "dark" {
-        @return list.nth($value, 2);
-    }
-
-    @return $value;
-}
-
-@function md-light-dark($name) {
-    $value: md-color($name);
-
-    @if $value == null {
-        @return null;
-    }
-
-    @return light-dark(#{list.nth($value, 1)}, #{list.nth($value, 2)});
-}

package/src/scss/advanced/misc/_initials.scss

@@ -1,298 +0,0 @@
-@use "../core/color" as color;
-@use "../core/colorize" as colorize;
-
-@mixin structural-shell(
-    $prefix,
-    $gap: null,
-    $padding: null,
-    $radius: var(--radius-md),
-    $border-width: 1px,
-    $border-style: solid,
-    $border-color: transparent
-) {
-    @if $gap != null {
-        --#{$prefix}-gap: #{$gap};
-    }
-
-    @if $padding != null {
-        --#{$prefix}-padding: #{$padding};
-    }
-
-    --#{$prefix}-radius: #{$radius};
-    --#{$prefix}-border: #{$border-width} #{$border-style};
-    --#{$prefix}-border-color: #{$border-color};
-    --#{$prefix}-border-width: #{$border-width};
-    --#{$prefix}-border-style: #{$border-style};
-    --#{$prefix}-border-radius: #{$radius};
-    --#{$prefix}-border-radius-top-left: #{$radius};
-    --#{$prefix}-border-radius-top-right: #{$radius};
-    --#{$prefix}-border-radius-bottom-left: #{$radius};
-    --#{$prefix}-border-radius-bottom-right: #{$radius};
-}
-
-@mixin initial-component-tokens() {
-    // Component defaults
-    --card-padding: var(--padding-lg);
-    --card-gap: var(--gap-md);
-    --card-radius: #{md3-radius(lg)};
-    --card-avatar-size: var(--avatar-size);
-
-    --form-radius: #{md3-radius(md)};
-    --form-padding: var(--padding-md);
-    --form-gap: var(--gap-sm);
-
-    --button-radius: #{md3-radius(full)};
-    --button-padding-x: var(--padding-lg);
-    --button-padding-y: var(--padding-sm);
-
-    --nav-gap: var(--gap-sm);
-    --nav-padding: var(--padding-sm);
-    --nav-radius: #{md3-radius(sm)};
-
-    // -------------------------------------------------------------------------
-    // Component tokens
-    // -------------------------------------------------------------------------
-    --avatar-size: clamp(32px, 6cqi, 48px);
-    --avatar-size-lg: clamp(40px, 8cqi, 64px);
-
-    --icon-size-sm: clamp(0.9rem, 1.2cqi, 1.1rem);
-    --icon-size-md: clamp(1.1rem, 1.4cqi, 1.3rem);
-    --icon-size-lg: clamp(1.4rem, 1.8cqi, 1.7rem);
-    --icon-color: currentColor;
-
-    --card-avatar-size: var(--avatar-size);
-
-    --button-radius: var(--radius-full);
-    --button-padding-x: var(--padding-lg);
-    --button-padding-y: var(--padding-sm);
-
-    --nav-gap: var(--gap-md);
-    --nav-padding: var(--padding-md);
-    --nav-radius: var(--radius-md);
-}
-
-@mixin initial-input-properties() {
-    @include colorize.solid-colorize("&", ("shade": 0.05, "tint": 0.0, "scope": "selector", "global-targets": true));
-
-    // -------------------------------------------------------------------------
-    // Form controls · inputs
-    // -------------------------------------------------------------------------
-    --input-radius: var(--radius-full);
-    --input-gap: var(--gap-sm);
-
-    --input-padding: var(--padding-md);
-    --input-padding-block: var(--padding-sm);
-    --input-padding-inline: var(--padding-lg, 1rem);
-    --input-padding-inline-start: var(--padding-lg, 1rem);
-    --input-padding-inline-end: var(--padding-lg, 1rem);
-
-    --input-text-color: var(--on-surface-color, currentColor);
-    --input-placeholder-color: color-mix(in oklch, var(--input-text-color) 32%, transparent);
-    --input-helper-color: color-mix(in oklch, var(--input-text-color) 68%, transparent);
-
-    --input-border-width: 1px;
-    --input-border-color: color-mix(in oklch, var(--on-surface-color, currentColor) 20%, transparent);
-    --input-border-hover: color-mix(in oklch, var(--on-surface-color, currentColor) 30%, transparent);
-    --input-border-focus: color-mix(
-        in oklch,
-        var(--input-border-hover) 40%,
-        color-mix(in oklch, var(--current, currentColor) 30%, transparent)
-    );
-    --input-border-error: var(--error, currentColor);
-    --input-border-disabled: color-mix(in oklch, var(--input-border-color) 35%, transparent);
-    --input-border-readonly: color-mix(in oklch, var(--input-border-color) 55%, transparent);
-    --input-border-checked: color-mix(in oklch, var(--surface-color, currentColor) 80%, transparent);
-    --input-border-autofill: color-mix(in oklch, var(--input-border-color) 80%, transparent);
-
-    --input-surface-color: var(--surface-color, transparent);//color-mix(in oklch, var(--surface-color, transparent) 96%, var(--on-surface-color, transparent));
-    --input-surface-hover: color-mix(in oklch, var(--input-surface-color) 90%, var(--input-border-focus) 10%);
-    --input-surface-focus: color-mix(in oklch, var(--input-surface-color) 88%, var(--input-border-focus) 12%);
-    --input-surface-error: color-mix(in oklch, var(--input-surface-color) 88%, var(--input-border-error) 12%);
-    --input-surface-disabled: color-mix(in oklch, var(--input-surface-color) 96%, transparent 4%);
-    --input-surface-readonly: color-mix(in oklch, var(--input-surface-color) 96%, transparent 4%);
-    --input-surface-autofill: color-mix(in oklch, var(--input-surface-color) 94%, transparent 6%);
-    --input-surface: var(--input-surface-color, var(--surface-color, currentColor));
-    --input-color: var(--input-surface-color, var(--surface-color, currentColor));
-
-    --input-shadow: 0 1px 2px color-mix(in oklch, var(--md-shadow, #000) 12%, transparent);
-    --input-shadow-hover: 0 1px 3px color-mix(in oklch, var(--md-shadow, #000) 18%, transparent);
-    --input-shadow-focus: 0 0 0 1px color-mix(in oklch, var(--input-border-focus) 32%, transparent),
-        0 0 0 4px color-mix(in oklch, var(--input-border-focus) 12%, transparent);
-    --input-shadow-error: 0 0 0 1px color-mix(in oklch, var(--input-border-error) 32%, transparent),
-        0 0 0 4px color-mix(in oklch, var(--input-border-error) 12%, transparent);
-
-    --input-focus-ring-offset: 2px;
-
-    --input-selection-color: var(--on-surface-color, currentColor);
-    --input-selection-on-color: var(--surface-color, currentColor);
-
-    --input-icon-color: color-mix(in oklch, var(--input-text-color) 82%, transparent);
-    --input-icon-size: var(--icon-size-md);
-
-    --input-helper-spacing: var(--space-xs, 0.5rem);
-    --input-label-color: color-mix(in oklch, var(--input-text-color) 92%, transparent);
-    --input-min-block-size: fit-content;
-    --input-min-inline-size: 0px;
-    --input-max-inline-size: 100%;
-    --input-inline-size: fit-content;
-    --input-line-height: 1.4;
-    --input-font-weight: inherit;
-    --input-letter-spacing: 0.01em;
-    --input-cursor: text;
-
-    --input-text-disabled: color-mix(in oklch, var(--input-text-color) 55%, transparent);
-    --input-text-readonly: color-mix(in oklch, var(--input-text-color) 70%, transparent);
-    --input-text-autofill: color-mix(in oklch, var(--input-text-color) 65%, transparent);
-}
-
-@mixin initial-option-properties() {
-    // -------------------------------------------------------------------------
-    // Form controls · options
-    // -------------------------------------------------------------------------
-    --option-border-inline-size: 1px;
-    --option-padding-block: var(--padding-sm);
-    --option-padding-inline: calc(var(--padding-lg, 1rem) * 0.75);
-
-    --option-border-color: color-mix(in oklch, var(--input-border-color) 70%, transparent);
-    --option-border-hover: color-mix(in oklch, var(--option-border-color) 70%, var(--input-border-focus) 30%);
-    --option-border-focus: var(--input-border-focus);
-    --option-border-checked: var(--input-border-focus);
-
-    --option-text-color: var(--input-text-color, var(--on-surface-color, currentColor));
-    --option-text-hover: var(--option-text-color);
-    --option-text-active: var(--option-text-color);
-    --option-text-checked: var(--input-selection-on-color, var(--surface-color, currentColor));
-    --option-text-focus: var(--input-border-focus);
-
-    --option-surface-color: var(--input-surface-color, var(--surface-color, currentColor));
-    --option-surface-hover: color-mix(in oklch, var(--option-surface-color) 88%, var(--on-surface-color, currentColor) 12%);
-    --option-surface-active: color-mix(in oklch, var(--option-surface-color) 84%, var(--on-surface-color, currentColor) 16%);
-    --option-surface-checked: color-mix(in oklch, var(--option-surface-color) 10%, var(--on-surface-color, currentColor) 90%);
-
-    --option-outline-width: 2px;
-    --option-outline-offset: -2px;
-    --option-outline-color: color-mix(in oklch, var(--on-surface-color, currentColor) 80%, transparent);
-
-    --option-color: var(--option-surface-color);
-    --option-hover-color: var(--option-surface-hover);
-    --option-active-color: var(--option-surface-active);
-    --option-checked-color: var(--option-surface-checked);
-}
-
-@mixin initial-select-properties() {
-    // -------------------------------------------------------------------------
-    // Form controls · selects
-    // -------------------------------------------------------------------------
-    --select-gap: var(--gap-sm);
-    --select-indicator-size: var(--icon-size-sm, 1.125rem);
-
-    --select-indicator-color: var(--input-text-color, var(--option-text-color, currentColor));
-    --select-text-color: var(--input-text-color, var(--option-text-color, currentColor));
-
-    --select-color: var(--input-surface-color, var(--option-color, currentColor));
-    --select-hover-color: var(--input-hover-color, var(--option-hover-color, currentColor));
-
-    --select-surface-color: var(--input-surface-color, var(--option-color, currentColor));
-    --select-surface-hover: var(--input-hover-color, var(--option-hover-color, currentColor));
-}
-
-@mixin initial-checkbox-properties() {
-    // -------------------------------------------------------------------------
-    // Form controls · checkboxes
-    // -------------------------------------------------------------------------
-    --checkbox-size: 1.25rem;
-    --checkbox-radius: var(--radius-sm);
-    --checkbox-border-width: 1px;
-
-    --checkbox-surface: var(--input-surface, color-mix(in oklch, var(--surface-color, currentColor) 96%, var(--on-surface-color, currentColor)));
-    --checkbox-surface-hover: color-mix(in oklch, var(--checkbox-surface) 88%, var(--on-surface-color, currentColor) 12%);
-    --checkbox-surface-checked: color-mix(in oklch, var(--checkbox-surface) 10%, var(--on-surface-color, currentColor) 12%);
-    --checkbox-surface-disabled: color-mix(in oklch, var(--checkbox-surface) 96%, transparent 4%);
-
-    --checkbox-border-color: var(--input-border-color);
-    --checkbox-border-hover: var(--input-border-hover);
-    --checkbox-border-focus: var(--input-border-focus);
-    --checkbox-border-checked: var(--input-border-focus);
-    --checkbox-border-disabled: var(--input-border-disabled);
-
-    --checkbox-shadow: var(--input-shadow);
-    --checkbox-shadow-hover: var(--input-shadow-hover);
-    --checkbox-shadow-focus: var(--input-shadow-focus);
-
-    --checkbox-icon-color: var(--input-icon-color);
-    --checkbox-icon-checked: var(--input-selection-on-color);
-}
-
-@mixin initial-form-controls() {
-    // -------------------------------------------------------------------------
-    // Form controls
-    // -------------------------------------------------------------------------
-    --form-radius: var(--radius-full);
-    --form-padding: var(--padding-md);
-    --form-gap: var(--gap-sm);
-
-    @include initial-input-properties();
-    @include initial-option-properties();
-    @include initial-select-properties();
-    @include initial-checkbox-properties();
-}
-
-@mixin initial-structural-elements() {
-    // -------------------------------------------------------------------------
-    // Surfaces & structural elements
-    // -------------------------------------------------------------------------
-    --accordion-radius: var(--radius-lg);
-    --accordion-open-color-shade: var(--surface-opacity-emphasis);
-    --accordion-open-border: 1px solid;
-    --accordion-transition: var(--transition-colors);
-
-    --empty-state-padding: var(--padding-2xl);
-    --empty-state-radius: var(--radius-lg);
-    --empty-state-border: 1px dashed color-mix(
-        in oklch,
-        var(
-            --c2-on-surface(
-                var(--scrollbar-tint),
-                var(--current, var(--color-on-surface, var(--md-on-surface, #1c1b1f)))
-            ),
-            #{color.md3-var(outline-variant)}
-        ) l c h / var(--border-opacity-dashed)
-    );
-    --empty-state-min-block-size: var(--space-2xl);
-
-    @include structural-shell(
-        "surface",
-        null,
-        null,
-        var(--radius-md),
-        1px,
-        solid,
-        transparent
-    );
-
-    @include structural-shell(
-        "card",
-        var(--gap-md),
-        var(--padding-md),
-        var(--radius-md),
-        var(--surface-border-width, 1px),
-        var(--surface-border-style, solid),
-        var(--surface-border-color, transparent)
-    );
-
-    @include structural-shell(
-        "panel",
-        var(--gap-md),
-        var(--padding-md),
-        var(--radius-md),
-        var(--surface-border-width, 1px),
-        var(--surface-border-style, solid),
-        var(--surface-border-color, transparent)
-    );
-}
-
-@mixin initial-properties() {
-    @include initial-component-tokens();
-    @include initial-form-controls();
-    @include initial-structural-elements();
-}

package/src/scss/advanced/misc/_mixins.scss

@@ -1,179 +0,0 @@
-// Shared mixins to unify common property blocks
-@use "sass:map";
-@use "sass:meta";
-@use "veela-lib" as *;
-@use "./tokens" as t;
-
-// Layout stacks
-@mixin stack($gap, $display: grid) {
-    display: $display;
-    gap: $gap;
-}
-
-@mixin hstack($gap) { @include stack($gap, inline-flex); }
-@mixin vstack($gap) { @include stack($gap, grid); }
-
-// Container helpers
-@mixin container-inline { container-type: inline-size; }
-@mixin container-size { container-type: size; contain: content; }
-
-// Typography helpers based on MD3 tokens
-@mixin text-heading($token: "title-large", $align: null) {
-    @if meta.mixin-exists("md3-typography") {
-        @include md3-typography($token);
-    }
-    font-family: t.$font-family-base;
-    @if $align != null { text-align: $align; }
-
-    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
-        font-family: t.$font-family-base;
-    }
-}
-
-@mixin text-body($token: "body-medium") {
-    @if meta.mixin-exists("md3-typography") {
-        @include md3-typography($token);
-    }
-    font-family: t.$font-family-base;
-
-    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
-        font-family: t.$font-family-base;
-    }
-}
-
-@mixin text-label($token: "label-large", $uppercase: false) {
-    @if meta.mixin-exists("md3-typography") {
-        @include md3-typography($token);
-    }
-    font-family: t.$font-family-base;
-    @if $uppercase { text-transform: uppercase; }
-
-    &:where(:-webkit-autofill, :autofill, :-webkit-autofill:hover, :-webkit-autofill:focus, :-webkit-autofill:active) {
-        font-family: t.$font-family-base;
-    }
-}
-
-@mixin font-nums-tabular { font-variant-numeric: tabular-nums; }
-
-// Tonal surfaces & elevation helpers
-@mixin tonal-surface(
-    $role: surface,
-    $tone: var(--surface-opacity-default),
-    $radius: null,
-    $padding: null,
-    $elevation: null,
-    $border: false
-) {
-    @if meta.mixin-exists("solid-colorize") {
-        @include solid-colorize("&", ("shade": $tone, "role": $role, "scope": "selector"));
-    }
-
-    @if $radius != null { border-radius: $radius; }
-    @if $padding != null { padding: $padding; }
-    @if $elevation != null {
-        --md3-elevation-level: #{$elevation};
-    }
-    @if $border {
-        border: 0.5px solid color-mix(in oklch, var(--md3-outline) 42%, transparent);
-    }
-}
-
-@mixin interactive-surface(
-    $role: surface,
-    $tone: var(--surface-opacity-default),
-    $state: hover,
-    $selector: "&::after"
-) {
-    @include tonal-surface($role, $tone);
-    @if meta.mixin-exists("md3-state-layer") {
-        @include md3-state-layer($role, $state, $selector);
-    }
-}
-
-@mixin card-surface(
-    $role: surface-container,
-    $tone: var(--surface-opacity-subtle),
-    $radius: var(--radius-lg),
-    $padding: var(--padding-lg),
-    $elevation: 2
-) {
-    @include tonal-surface($role, $tone, $radius, $padding, $elevation, true);
-    backdrop-filter: blur(10px) saturate(115%);
-}
-
-// Structured blocks
-@mixin section-stack($gap: var(--gap-sm)) {
-    display: grid;
-    gap: $gap;
-    inline-size: stretch;
-    min-inline-size: 0;
-}
-
-@mixin inline-toolbar($gap: var(--gap-sm)) {
-    display: inline-flex;
-    align-items: center;
-    gap: $gap;
-    flex-wrap: nowrap;
-}
-
-// Input helpers
-@mixin input-padding-trailing($logical-size) {
-    padding-inline-end: calc(#{$logical-size} * 2);
-}
-
-@mixin field-stack($gap: var(--gap-xs)) {
-    display: grid;
-    gap: $gap;
-    inline-size: stretch;
-    min-inline-size: 0;
-}
-
-// List helpers
-@mixin tonal-list(
-    $role: surface,
-    $tone: var(--surface-opacity-subtle),
-    $radius: var(--radius-sm),
-    $padding: var(--padding-xs)
-) {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    list-style: none;
-    margin: 0;
-    padding: $padding;
-    @include tonal-surface($role, $tone, $radius);
-}
-
-// State blocks (flex row with gaps and radius)
-@mixin state-inline($gap, $padding-y, $padding-x, $radius) {
-    display: flex;
-    align-items: center;
-    gap: $gap;
-    padding-block: $padding-y;
-    padding-inline: $padding-x;
-    border-radius: $radius;
-}
-
-// Scrollbar styling (modern and webkit)
-@mixin scrollbars($size: 6px, $tone: var(--surface-opacity-emphasis)) {
-    scrollbar-width: thin;
-    & { scrollbar-color: color-mix(in oklch, var(--on-surface, currentColor) var(--scrollbar-tint, 86%), transparent) transparent; }
-
-    &::-webkit-scrollbar { inline-size: $size; block-size: $size; }
-    &::-webkit-scrollbar-thumb {
-        border-radius: 999px;
-        @include solid-colorize("&", ("shade": $tone, "scope": "selector"));
-    }
-    &::-webkit-scrollbar-track { background: transparent; }
-}
-
-// Overlay + elevation utilities
-@mixin glass-backdrop($blur: 18px, $opacity: 0.22) {
-    background: color-mix(in oklch, var(--color-inverse-surface) #{$opacity * 100%}, transparent);
-    backdrop-filter: blur($blur) saturate(120%);
-}
-
-// Accessibility helpers
-@mixin reduced-motion-zero { transition-duration: 0ms; }
-@mixin high-contrast-border($color: var(--border-color)) { border: 2px solid $color; }
-

package/src/scss/advanced/misc/_rendering.scss

@@ -1,82 +0,0 @@
-@mixin HQRendering($importance: null) {
-    /*image-rendering: high-quality;
-    image-rendering: optimizeQuality;*/
-    font-smooth: always;
-    text-rendering: optimizeLegibility;
-    text-rendering: geometricPrecision;
-    shape-rendering: geometricPrecision;
-    -webkit-font-smoothing: subpixel-antialiased;
-    -moz-osx-font-smoothing: auto;
-}
-
-@mixin LQRendering($importance: null) {
-    /*image-rendering: low-quality;
-    image-rendering: optimizeSpeed;*/
-    font-smooth: never;
-    text-rendering: optimizeSpeed;
-    shape-rendering: optimizeSpeed;
-    shape-rendering: crispEdges;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-@mixin hw-optimize() {
-    transform: translateZ(0);
-    transform-origin: 50% 50%;
-    backface-visibility: hidden;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: none;
-
-    @supports (contain: layout paint) {
-        contain: layout paint;
-    }
-
-    @supports (scrollbar-width: none) {
-        scrollbar-width: none;
-    }
-
-    @supports (scrollbar-gutter: stable both-edges) {
-        scrollbar-gutter: stable both-edges;
-    }
-}
-
-@mixin disable-transform() {
-    rotate: none;
-    scale: none;
-    translate: none;
-    transform: none;
-
-    transform-origin: 50% 50%;
-    backface-visibility: visible;
-
-    filter: none;
-    backdrop-filter: none;
-
-    perspective: none;
-    isolation: auto;
-}
-
-@mixin hide-scrollbars() {
-    overflow: auto;
-    overscroll-behavior: contain;
-    scroll-behavior: smooth;
-    scrollbar-color: transparent;
-
-    @supports (scrollbar-width: none) {
-        scrollbar-width: none;
-        scrollbar-color: transparent;
-    }
-
-    @supports (scrollbar-gutter: stable both-edges) {
-        scrollbar-gutter: stable both-edges;
-    }
-
-    &::-webkit-scrollbar {
-        -webkit-appearance: none;
-        inline-size: 0px;
-        block-size: 0px;
-        display: none;
-    }
-}
-