@lion-npm/ui 1.0.2 → 1.0.4

package/src/assets/css/buttons/buttons-android.css

@@ -1,251 +0,0 @@
-/* ==========================================================================
-   Android Material Design 3 - Base Configuration
-   ========================================================================== */
-
-.android-btn {
-    --btn-color: #0d6efd;
-    --btn-bg: var(--btn-color);
-    --btn-text: #ffffff;
-    --btn-disabled-bg: rgba(28, 27, 31, 0.12);
-    --btn-disabled-color: rgba(28, 27, 31, 0.38);
-    --btn-disabled-border: transparent;
-
-    position: relative;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid transparent;
-    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    font-weight: 500;
-    letter-spacing: 0.1px;
-    cursor: pointer;
-    transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1),
-    box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1),
-    border-color 0.2s cubic-bezier(0.2, 0, 0, 1),
-    border-radius 0.2s cubic-bezier(0.2, 0, 0, 1);
-}
-
-/* Shapes: Pill vs Rounded Rectangle */
-.android-btn-pill.android-btn-sm { border-radius: 16px; }
-.android-btn-pill.android-btn-md { border-radius: 20px; }
-.android-btn-pill.android-btn-lg { border-radius: 24px; }
-
-.android-btn-rounded.android-btn-sm { border-radius: 6px; }
-.android-btn-rounded.android-btn-md { border-radius: 8px; }
-.android-btn-rounded.android-btn-lg { border-radius: 12px; }
-
-/* ==========================================================================
-   M3 Base Disabled Behavior (Universal Reset)
-   ========================================================================== */
-
-.android-btn:disabled,
-.android-btn.disabled,
-fieldset:disabled .android-btn {
-    cursor: not-allowed !important;
-    box-shadow: none !important;
-    pointer-events: none;
-    opacity: 0.38 !important; /* M3 standard opacity for disabled state */
-}
-
-/* Maintain original background color when disabled with opacity */
-.android-btn-filled:disabled,
-.android-btn-filled.disabled {
-    background-color: var(--btn-bg) !important;
-    color: var(--btn-text) !important;
-    border-color: transparent !important;
-}
-
-.android-btn-elevated:disabled,
-.android-btn-elevated.disabled {
-    background-color: #ffffff !important;
-    color: var(--btn-color) !important;
-    border-color: transparent !important;
-}
-
-.android-btn-tonal:disabled,
-.android-btn-tonal.disabled {
-    background-color: color-mix(in srgb, var(--btn-color) 16%, #ffffff) !important;
-    color: var(--btn-color) !important;
-    border-color: transparent !important;
-}
-
-.android-btn-outlined:disabled,
-.android-btn-outlined.disabled {
-    background-color: transparent !important;
-    color: var(--btn-color) !important;
-    border-color: var(--btn-color) !important;
-}
-
-.android-btn-text:disabled,
-.android-btn-text.disabled {
-    background-color: transparent !important;
-    color: var(--btn-color) !important;
-    border-color: transparent !important;
-}
-
-/* ==========================================================================
-   M3 Styles (Filled, Elevated, Tonal, Outlined, Text)
-   ========================================================================== */
-
-/* 1. Filled Button */
-.android-btn-filled {
-    background-color: var(--btn-bg);
-    color: var(--btn-text) !important;
-}
-.android-btn-filled:hover:not(:disabled):not(.disabled) {
-    filter: brightness(0.92);
-}
-
-/* 2. Elevated Button */
-.android-btn-elevated {
-    background-color: #ffffff;
-    color: var(--btn-color) !important;
-    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
-}
-.android-btn-elevated:hover:not(:disabled):not(.disabled) {
-    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
-    background-color: rgba(0, 0, 0, 0.02);
-}
-
-/* 3. Filled Tonal Button */
-.android-btn-tonal {
-    background-color: color-mix(in srgb, var(--btn-color) 16%, #ffffff);
-    color: var(--btn-color) !important;
-}
-.android-btn-tonal:hover:not(:disabled):not(.disabled) {
-    background-color: color-mix(in srgb, var(--btn-color) 24%, #ffffff);
-}
-
-/* 4. Outlined Button */
-.android-btn-outlined {
-    background-color: transparent;
-    color: var(--btn-color) !important;
-    border-color: var(--btn-color);
-}
-.android-btn-outlined:hover:not(:disabled):not(.disabled) {
-    background-color: color-mix(in srgb, var(--btn-color) 8%, transparent);
-}
-
-/* 5. Text Button */
-.android-btn-text {
-    background-color: transparent;
-    color: var(--btn-color) !important;
-}
-.android-btn-text:hover:not(:disabled):not(.disabled) {
-    background-color: color-mix(in srgb, var(--btn-color) 8%, transparent);
-}
-
-/* ==========================================================================
-   Ripple Effect
-   ========================================================================== */
-
-.android-btn .ripple {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background-color: currentColor;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.2s ease-in-out;
-}
-
-.android-btn:active:not(:disabled):not(.disabled) .ripple {
-    opacity: 0.12;
-}
-
-/* ==========================================================================
-   Sizes
-   ========================================================================== */
-
-.android-btn-sm {
-    height: 32px;
-    padding: 0 12px;
-    font-size: 0.8125rem;
-}
-
-.android-btn-md {
-    height: 40px;
-    padding: 0 24px;
-    font-size: 0.875rem;
-}
-
-.android-btn-lg {
-    height: 48px;
-    padding: 0 28px;
-    font-size: 1rem;
-}
-
-/* ==========================================================================
-   Color Mapping and Text Contrast Fixes
-   ========================================================================== */
-
-.android-btn.btn-primary {
-    --btn-color: #0d6efd;
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-secondary {
-    --btn-color: #6c757d;
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-success {
-    --btn-color: #198754;
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-danger {
-    --btn-color: #dc3545;
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-warning {
-    --btn-color: #ffc107;
-    --btn-text: #000000;
-}
-
-.android-btn.btn-info {
-    --btn-color: #0dcaf0;
-    --btn-text: #000000;
-}
-
-.android-btn.btn-light {
-    --btn-color: #6c757d;
-    --btn-bg: #f8f9fa;
-    --btn-text: #212529;
-}
-
-.android-btn.btn-dark {
-    --btn-color: #212529;
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-link {
-    --btn-color: #0d6efd;
-    --btn-text: #0d6efd;
-    background-color: transparent !important;
-    text-decoration: underline;
-    box-shadow: none !important;
-}
-
-/* Custom Lion Variants */
-.android-btn.btn-lion-packages {
-    --btn-color: var(--lion-packages, #6f42c1);
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-lion-parking {
-    --btn-color: var(--lion-parking, #fd7e14);
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-lion-tech {
-    --btn-color: var(--lion-tech, #20c997);
-    --btn-text: #ffffff;
-}
-
-.android-btn.btn-lion-glam {
-    --btn-color: var(--lion-glam, #e83e8c);
-    --btn-text: #ffffff;
-}

package/src/assets/css/buttons/buttons-ios.css

@@ -1,213 +0,0 @@
-/* ==========================================================================
-   iOS Human Interface Guidelines (HIG) - Base Configuration
-   ========================================================================== */
-
-.ios-btn {
-    /* Default CSS Variables for Color Inheritance */
-    --btn-color: #007aff; /* Apple standard system blue */
-    --btn-bg: var(--btn-color);
-    --btn-text: #ffffff;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    outline: none;
-    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
-    font-weight: 600;
-    letter-spacing: -0.24px;
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-
-    /* Native iOS Spring Transition Mechanics */
-    transition: opacity 0.1s ease-out, transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1), background-color 0.15s ease-in-out;
-    will-change: transform, opacity;
-}
-
-/* Native iOS Hover State (Desktop Web Match) */
-@media (hover: hover) {
-    .ios-btn-filled:hover:not(:disabled) {
-        filter: brightness(0.96);
-    }
-    .ios-btn-tinted:hover:not(:disabled) {
-        background-color: color-mix(in srgb, var(--btn-color) 22%, transparent);
-    }
-    .ios-btn-gray:hover:not(:disabled) {
-        background-color: rgba(120, 120, 128, 0.24);
-    }
-    .ios-btn-plain:hover:not(:disabled) {
-        opacity: 0.8;
-    }
-}
-
-/* Native iOS Active Press Behavior */
-.ios-btn:active:not(:disabled) {
-    opacity: 0.55;
-    transform: scale(0.96);
-    transition-duration: 0.05s;
-}
-
-/* Shapes: HIG Continuous Curved Corners (Squircle simulation via percentage-based radii) */
-.ios-btn-rounded.ios-btn-sm { border-radius: 9px; }
-.ios-btn-rounded.ios-btn-md { border-radius: 12px; }
-.ios-btn-rounded.ios-btn-lg { border-radius: 16px; }
-
-.ios-btn-capsule { border-radius: 9999px; }
-
-/* Disabled State */
-.ios-btn.disabled,
-.ios-btn:disabled {
-    opacity: 0.35 !important;
-    cursor: not-allowed;
-    transform: none !important;
-    filter: none !important;
-}
-
-/* ==========================================================================
-   iOS Button Styles (Filled, Tinted, Gray, Plain)
-   ========================================================================== */
-
-/* 1. Filled Button (High Emphasis) */
-.ios-btn-filled {
-    background-color: var(--btn-bg);
-    color: var(--btn-text) !important;
-}
-
-/* 2. Tinted Button (Medium Emphasis) */
-.ios-btn-tinted {
-    background-color: color-mix(in srgb, var(--btn-color) 15%, transparent);
-    color: var(--btn-color) !important;
-}
-
-/* 3. Gray Button (Neutral Background) */
-.ios-btn-gray {
-    background-color: rgba(120, 120, 128, 0.16);
-    color: var(--btn-color) !important;
-}
-
-/* 4. Plain Button (Low Emphasis / Text Only) */
-.ios-btn-plain {
-    background-color: transparent;
-    color: var(--btn-color) !important;
-    padding-left: 4px !important;
-    padding-right: 4px !important;
-}
-
-/* ==========================================================================
-   Sizes
-   ========================================================================== */
-
-.ios-btn-sm {
-    height: 28px;
-    padding: 0 10px;
-    font-size: 0.8125rem;
-}
-
-.ios-btn-md {
-    height: 36px;
-    padding: 0 16px;
-    font-size: 0.9375rem;
-}
-
-.ios-btn-lg {
-    height: 50px;
-    padding: 0 22px;
-    font-size: 1.0625rem;
-}
-
-/* ==========================================================================
-   Color Mapping & Readability Fixes
-   ========================================================================== */
-
-.ios-btn.btn-primary {
-    --btn-color: var(--bs-primary, #007aff);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-secondary {
-    --btn-color: var(--bs-secondary, #6c757d);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-success {
-    --btn-color: var(--bs-success, #34c759);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-danger {
-    --btn-color: var(--bs-danger, #ff3b30);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-warning {
-    --btn-color: var(--bs-warning, #ff9500);
-    --btn-text: #000000; /* Dark text for filled style */
-}
-
-.ios-btn.btn-info {
-    --btn-color: var(--bs-info, #5ac8fa);
-    --btn-text: #000000; /* Dark text for filled style */
-}
-
-/* Fix for btn-light:
-   --btn-color uses System Gray (#8e8e93) to provide contrast in tinted, gray, and plain styles.
-   --btn-bg handles the light background for filled style. */
-.ios-btn.btn-light {
-    --btn-color: #8e8e93;
-    --btn-bg: var(--bs-light, #e5e5ea);
-    --btn-text: #000000;
-}
-
-.ios-btn.btn-dark {
-    --btn-color: var(--bs-dark, #1c1c1e);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-link {
-    --btn-color: var(--bs-link-hover-color, #007aff);
-    --btn-text: #007aff;
-    background-color: transparent !important;
-    text-decoration: underline;
-}
-
-/* Custom Lion Variants */
-.ios-btn.btn-lion-packages {
-    --btn-color: var(--lion-packages, #af52de);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-lion-parking {
-    --btn-color: var(--lion-parking, #ff9500);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-lion-tech {
-    --btn-color: var(--lion-tech, #30b0c7);
-    --btn-text: #ffffff;
-}
-
-.ios-btn.btn-lion-glam {
-    --btn-color: var(--lion-glam, #ff2d55);
-    --btn-text: #ffffff;
-}
-
-/* ==========================================================================
-   Contrast Specific Overrides for Light Variations
-   ========================================================================== */
-
-/* Ensures readable dark text for LIGHT variant in transparent/subtle styles */
-.ios-btn-tinted.btn-light {
-    background-color: rgba(120, 120, 128, 0.12);
-    color: #1c1c1e !important;
-}
-
-.ios-btn-gray.btn-light {
-    background-color: rgba(120, 120, 128, 0.18);
-    color: #1c1c1e !important;
-}
-
-.ios-btn-plain.btn-light {
-    color: #1c1c1e !important;
-}

package/src/assets/css/buttons/buttons-web.css

@@ -1,138 +0,0 @@
-/* ==========================================================================
-   Bootstrap 5 Extended - Custom Lion Variants & Overrides
-   ========================================================================== */
-
-/* Fix for Native Bootstrap Outlined Light Button Contrast on Light Backgrounds */
-.btn-outline-light {
-    --bs-btn-color: #212529;
-    --bs-btn-border-color: #ced4da; /* Visible neutral border for light background */
-    --bs-btn-hover-color: #000000;
-    --bs-btn-hover-bg: #f8f9fa;
-    --bs-btn-hover-border-color: #ced4da;
-    --bs-btn-active-color: #000000;
-    --bs-btn-active-bg: #e9ecef;
-    --bs-btn-active-border-color: #ced4da;
-    --bs-btn-disabled-color: #6c757d;
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: #ced4da;
-}
-
-/* 1. Lion Packages Variant */
-.btn-lion-packages {
-    --bs-btn-color: var(--lion-white);
-    --bs-btn-bg: var(--lion-packages, #6f42c1);
-    --bs-btn-border-color: var(--lion-packages, #6f42c1);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
-    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 85%, #000000);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
-    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-packages, #6f42c1) 75%, #000000);
-    --bs-btn-disabled-color: var(--lion-white);
-    --bs-btn-disabled-bg: var(--lion-packages, #6f42c1);
-    --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
-}
-
-.btn-outline-lion-packages {
-    --bs-btn-color: var(--lion-packages, #6f42c1);
-    --bs-btn-border-color: var(--lion-packages, #6f42c1);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: var(--lion-packages, #6f42c1);
-    --bs-btn-hover-border-color: var(--lion-packages, #6f42c1);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: var(--lion-packages, #6f42c1);
-    --bs-btn-active-border-color: var(--lion-packages, #6f42c1);
-    --bs-btn-disabled-color: var(--lion-packages, #6f42c1);
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: var(--lion-packages, #6f42c1);
-}
-
-/* 2. Lion Parking Variant */
-.btn-lion-parking {
-    --bs-btn-color: var(--lion-white);
-    --bs-btn-bg: var(--lion-parking, #fd7e14);
-    --bs-btn-border-color: var(--lion-parking, #fd7e14);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
-    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 85%, #000000);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
-    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-parking, #fd7e14) 75%, #000000);
-    --bs-btn-disabled-color: var(--lion-white);
-    --bs-btn-disabled-bg: var(--lion-parking, #fd7e14);
-    --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
-}
-
-.btn-outline-lion-parking {
-    --bs-btn-color: var(--lion-parking, #fd7e14);
-    --bs-btn-border-color: var(--lion-parking, #fd7e14);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: var(--lion-parking, #fd7e14);
-    --bs-btn-hover-border-color: var(--lion-parking, #fd7e14);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: var(--lion-parking, #fd7e14);
-    --bs-btn-active-border-color: var(--lion-parking, #fd7e14);
-    --bs-btn-disabled-color: var(--lion-parking, #fd7e14);
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: var(--lion-parking, #fd7e14);
-}
-
-/* 3. Lion Tech Variant */
-.btn-lion-tech {
-    --bs-btn-color: var(--lion-white);
-    --bs-btn-bg: var(--lion-tech, #20c997);
-    --bs-btn-border-color: var(--lion-tech, #20c997);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
-    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 85%, #000000);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
-    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-tech, #20c997) 75%, #000000);
-    --bs-btn-disabled-color: var(--lion-white);
-    --bs-btn-disabled-bg: var(--lion-tech, #20c997);
-    --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
-}
-
-.btn-outline-lion-tech {
-    --bs-btn-color: var(--lion-tech, #20c997);
-    --bs-btn-border-color: var(--lion-tech, #20c997);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: var(--lion-tech, #20c997);
-    --bs-btn-hover-border-color: var(--lion-tech, #20c997);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: var(--lion-tech, #20c997);
-    --bs-btn-active-border-color: var(--lion-tech, #20c997);
-    --bs-btn-disabled-color: var(--lion-tech, #20c997);
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: var(--lion-tech, #20c997);
-}
-
-/* 4. Lion Glam Variant */
-.btn-lion-glam {
-    --bs-btn-color: var(--lion-white);
-    --bs-btn-bg: var(--lion-glam, #e83e8c);
-    --bs-btn-border-color: var(--lion-glam, #e83e8c);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
-    --bs-btn-hover-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 85%, #000000);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
-    --bs-btn-active-border-color: color-mix(in srgb, var(--lion-glam, #e83e8c) 75%, #000000);
-    --bs-btn-disabled-color: var(--lion-white);
-    --bs-btn-disabled-bg: var(--lion-glam, #e83e8c);
-    --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
-}
-
-.btn-outline-lion-glam {
-    --bs-btn-color: var(--lion-glam, #e83e8c);
-    --bs-btn-border-color: var(--lion-glam, #e83e8c);
-    --bs-btn-hover-color: var(--lion-white);
-    --bs-btn-hover-bg: var(--lion-glam, #e83e8c);
-    --bs-btn-hover-border-color: var(--lion-glam, #e83e8c);
-    --bs-btn-active-color: var(--lion-white);
-    --bs-btn-active-bg: var(--lion-glam, #e83e8c);
-    --bs-btn-active-border-color: var(--lion-glam, #e83e8c);
-    --bs-btn-disabled-color: var(--lion-glam, #e83e8c);
-    --bs-btn-disabled-bg: transparent;
-    --bs-btn-disabled-border-color: var(--lion-glam, #e83e8c);
-}

package/src/assets/css/custom.css

@@ -1,8 +0,0 @@
-:root {
-    --default-color: var(--lion-packages);
-}
-
-* {
-    margin: 0;
-    padding: 0;
-}

package/src/assets/css/index.css

@@ -1,60 +0,0 @@
-:root {
-    --lion-packages: #ff8731;
-    --lion-parking: #ff8731;
-    --lion-tech: #B11226;
-    --lion-glam: #FF69b4;
-    --lion-black: #111111;
-    --lion-white: #FFFFFF;
-}
-
-/** Background Colors */
-
-.bg-lion-black {
-    background-color: var(--lion-black);
-}
-
-.bg-lion-white {
-    background-color: var(--lion-white);
-}
-
-.bg-lion-packages {
-    background-color: var(--lion-packages);
-}
-
-.bg-lion-parking {
-    background-color: var(--lion-parking);
-}
-
-.bg-lion-tech {
-    background-color: var(--lion-tech);
-}
-
-.bg-lion-glam {
-    background-color: var(--lion-glam);
-}
-
-/** Text Colors */
-
-.text-lion-black {
-    color: var(--lion-black);
-}
-
-.text-lion-white {
-    color: var(--lion-white);
-}
-
-.text-lion-packages {
-    color: var(--lion-packages);
-}
-
-.text-lion-parking {
-    color: var(--lion-parking);
-}
-
-.text-lion-glam {
-    color: var(--lion-glam);
-}
-
-.text-lion-tech {
-    color: var(--lion-tech);
-}