@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-drop-list.scss

@@ -1,430 +1,430 @@
-@use "sass:map";
-
-// =============================================================================
-// MATCHA DROP LIST STYLES
-// =============================================================================
-
-// Mixin para cores e temas
-@mixin matcha-drop-list-theme($theme) {
-
-    // =============================================================================
-    // COMPONENTE PRINCIPAL
-    // =============================================================================
-
-    .matcha-drop-list {
-        display: block;
-        position: relative;
-    }
-
-    // =============================================================================
-    // CONTAINER DAS LISTAS
-    // =============================================================================
-
-    .matcha-drop-list-container {
-        position: relative;
-        min-height: 48px;
-        display: flex;
-        flex-direction: column;
-        gap: var(--matcha-space-200, 16px);
-        padding: 0px;
-        border-radius: var(--matcha-radius-lg, 8px);
-        border-width: 0px;
-        transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
-
-        &.matcha-drop-list-receiving {
-            background-color: var(--matcha-color-primary-alpha);
-            border-color: var(--matcha-color-accent);
-            border-width: 2px;
-            border-style: dashed;
-            border-radius: var(--matcha-radius-lg, 8px);
-            padding: var(--matcha-space-100, 8px);
-            transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
-
-            &::before {
-                content: '';
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(45deg,
-                        transparent 25%,
-                        var(--matcha-color-primary-alpha) 25%,
-                        var(--matcha-color-primary-alpha) 50%,
-                        transparent 50%,
-                        transparent 75%,
-                        var(--matcha-color-primary-alpha) 75%,
-                        var(--matcha-color-primary-alpha));
-                background-size: 16px 16px;
-                animation: drop-zone-animation 2s linear infinite;
-                border-radius: var(--matcha-radius-md, 4px);
-                opacity: 0.4;
-            }
-        }
-
-        // Estados de aceitação de drop
-        &.matcha-drop-list-can-accept {
-            background-color: var(--matcha-color-success-alpha);
-            border-color: var(--matcha-color-success);
-            cursor: copy;
-
-            &::before {
-                background: linear-gradient(45deg,
-                        transparent 25%,
-                        var(--matcha-color-success-alpha) 25%,
-                        var(--matcha-color-success-alpha) 50%,
-                        transparent 50%,
-                        transparent 75%,
-                        var(--matcha-color-success-alpha) 75%,
-                        var(--matcha-color-success-alpha));
-                background-size: 16px 16px;
-                animation: drop-zone-animation 1.5s linear infinite;
-                opacity: 0.5;
-            }
-        }
-
-
-
-        &.matcha-drop-list-cannot-accept {
-            background-color: var(--matcha-color-danger-alpha);
-            border-color: var(--matcha-color-danger);
-            pointer-events: none;
-            cursor: default;
-
-            &::before {
-                background: linear-gradient(45deg,
-                        transparent 25%,
-                        var(--matcha-color-danger-alpha) 25%,
-                        var(--matcha-color-danger-alpha) 50%,
-                        transparent 50%,
-                        transparent 75%,
-                        var(--matcha-color-danger-alpha) 75%,
-                        var(--matcha-color-danger-alpha));
-                background-size: 16px 16px;
-                animation: drop-zone-animation 0.8s linear infinite;
-                opacity: 0.6;
-            }
-        }
-
-        &.matcha-drop-list-disabled {
-            color: var(--matcha-color-disabled-fg);
-            background-color: var(--matcha-color-disabled-bg);
-            pointer-events: none;
-            cursor: default;
-        }
-    }
-
-    // =============================================================================
-    // DROP ZONE (matchaDropZone directive — reparenting target)
-    // =============================================================================
-
-    .matcha-drop-zone-cannot-accept {
-        border: 2px dashed var(--matcha-color-danger) !important;
-        border-radius: 8px;
-        background-color: var(--matcha-color-danger-alpha);
-        cursor: not-allowed;
-        transition: background-color 0.15s linear, border-color 0.15s linear;
-    }
-
-    // Fix C: quando o drop zone pai está rejeitado (vermelho), a lista filha
-    // recebendo o drag também deve ficar vermelha — não verde.
-    .matcha-drop-zone-cannot-accept .matcha-drop-list-container.matcha-drop-list-receiving {
-        background-color: var(--matcha-color-danger-alpha);
-        border-color: var(--matcha-color-danger);
-
-        &::before {
-            background: linear-gradient(45deg,
-                transparent 25%, var(--matcha-color-danger-alpha) 25%, var(--matcha-color-danger-alpha) 50%,
-                transparent 50%, transparent 75%, var(--matcha-color-danger-alpha) 75%, var(--matcha-color-danger-alpha));
-            background-size: 16px 16px;
-            animation: drop-zone-animation 0.8s linear infinite;
-            opacity: 0.6;
-        }
-    }
-
-    // =============================================================================
-    // GHOST CLONE (criado dinamicamente no body durante o drag)
-    // =============================================================================
-
-    .matcha-drag-ghost {
-        pointer-events: none;
-        opacity: 0.85;
-        z-index: 9999;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-        border-radius: var(--matcha-radius-md, 4px);
-        will-change: transform;
-    }
-
-    // =============================================================================
-    // ITENS ARRASTÁVEIS — Template A
-    // =============================================================================
-
-    .matcha-drag-item {
-        position: relative;
-        display: flex;
-        padding: var(--matcha-space-150, 12px);
-        border-radius: var(--matcha-radius-md, 4px);
-        overflow: hidden;
-        transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
-        user-select: none;
-        background-color: var(--matcha-color-surface);
-        color: var(--matcha-color-fg);
-
-        // State layer (Template A)
-        &::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: currentColor;
-            opacity: 0;
-            border-radius: inherit;
-            pointer-events: none;
-            transition: opacity var(--matcha-duration-instant, 80ms) linear;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-
-        &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
-        &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
-
-        &:focus-visible:not([disabled]) {
-            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
-            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
-        }
-
-        @media (prefers-reduced-motion: reduce) {
-            &::before { transition: none; }
-        }
-
-        &.matcha-drag-dragging {
-            z-index: 1000;
-            cursor: grabbing;
-            position: relative;
-            box-shadow: 0 8px 25px var(--matcha-color-text-muted);
-            background-color: var(--matcha-color-surface);
-            transform: scale(1.02);
-            opacity: 0.95;
-
-            // Efeito de destaque sutil
-            &::before {
-                content: '';
-                position: absolute;
-                inset: 0;
-                border-radius: var(--matcha-radius-lg, 8px);
-                z-index: -1;
-                opacity: 0.1;
-                background: linear-gradient(45deg, var(--matcha-color-surface), var(--matcha-color-primary));
-                animation: drag-glow 1s ease-in-out infinite alternate;
-            }
-        }
-
-        &.matcha-drag-disabled {
-            pointer-events: none;
-            cursor: default;
-            color: var(--matcha-color-disabled-fg);
-            background-color: var(--matcha-color-disabled-bg);
-        }
-
-        &.disabled-item {
-            pointer-events: none;
-            cursor: default;
-            color: var(--matcha-color-disabled-fg);
-            background-color: var(--matcha-color-disabled-bg);
-        }
-    }
-
-    // =============================================================================
-    // HANDLE DE DRAG
-    // =============================================================================
-
-    .matcha-drag-handle {
-        cursor: grab;
-        touch-action: none;
-
-        &:active {
-            cursor: grabbing;
-        }
-
-        &.disabled {
-            pointer-events: none;
-            cursor: default;
-        }
-    }
-
-    // =============================================================================
-    // CONTEÚDO DOS ITENS
-    // =============================================================================
-
-    .item-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: var(--matcha-space-050, 4px);
-
-        .item-title {
-            font-weight: 500;
-            color: var(--matcha-color-fg);
-
-            &.completed {
-                text-decoration: line-through;
-                opacity: 0.7;
-            }
-        }
-
-        .item-id {
-            font-size: var(--matcha-text-body-sm, 12px);
-            font-family: monospace;
-            color: var(--matcha-color-text-muted);
-        }
-
-        small {
-            font-size: var(--matcha-text-p-tiny, 11px);
-            font-style: italic;
-            color: var(--matcha-color-fg-alpha);
-        }
-    }
-
-    // =============================================================================
-    // AÇÕES DOS ITENS
-    // =============================================================================
-
-    .item-actions {
-        display: flex;
-        align-items: center;
-        gap: var(--matcha-space-100, 8px);
-
-        i {
-            font-size: var(--matcha-icon-size-sm, 16px);
-        }
-    }
-
-    // =============================================================================
-    // INDICADOR DE DROP
-    // =============================================================================
-
-    .matcha-drop-indicator {
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 2px;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-        transform: translateY(-8px);
-        z-index: 1000;
-        pointer-events: none;
-        margin: 0;
-        border-radius: var(--matcha-radius-sm, 2px);
-        background-color: var(--matcha-color-accent);
-
-        &.active {
-            opacity: 1;
-        }
-    }
-
-    // =============================================================================
-    // PLACEHOLDER PARA LISTAS VAZIAS
-    // =============================================================================
-
-    .matcha-drop-list-placeholder {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-
-        .matcha-drop-list-empty-placeholder {
-            font-style: italic;
-            padding: var(--matcha-space-250, 20px);
-            text-align: center;
-            font-size: var(--matcha-text-body-md, 14px);
-            border-radius: var(--matcha-radius-md, 4px);
-            transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
-            color: var(--matcha-color-text-muted);
-            border-color: var(--matcha-color-fg-alpha);
-
-            &.can-accept {
-                color: var(--matcha-color-success);
-                border-color: var(--matcha-color-success);
-                background-color: var(--matcha-color-success-alpha);
-            }
-
-            &.cannot-accept {
-                color: var(--matcha-color-danger);
-                border-color: var(--matcha-color-danger);
-                background-color: var(--matcha-color-danger-alpha);
-                animation: shake 0.5s ease-in-out;
-            }
-        }
-    }
-
-    // =============================================================================
-    // HIGH CONTRAST MODE SUPPORT
-    // =============================================================================
-
-    @media (prefers-contrast: high) {
-        .matcha-drop-list-container.matcha-drop-list-receiving {
-            border-color: var(--matcha-color-fg);
-            background-color: var(--matcha-color-fg-alpha);
-        }
-
-        .matcha-drag-item.matcha-drag-dragging {
-            border: 2px solid var(--matcha-color-fg);
-        }
-    }
-}
-
-// =============================================================================
-// ANIMAÇÕES
-// =============================================================================
-
-@keyframes drop-zone-animation {
-    0% {
-        background-position: 0 0;
-    }
-    100% {
-        background-position: 32px 0, 32px 0, 32px 0;
-    }
-}
-
-@keyframes pulse-reject {
-    0% {
-        opacity: 0.5;
-        transform: scaleY(1);
-    }
-
-    100% {
-        opacity: 1;
-        transform: scaleY(1.5);
-    }
-}
-
-@keyframes shake {
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    25% {
-        transform: translateX(-2px);
-    }
-
-    75% {
-        transform: translateX(2px);
-    }
-}
-
-@keyframes drag-glow {
-    0% {
-        opacity: 0.1;
-    }
-
-    100% {
-        opacity: 0.3;
-    }
-}
+@use "sass:map";
+
+// =============================================================================
+// MATCHA DROP LIST STYLES
+// =============================================================================
+
+// Mixin para cores e temas
+@mixin matcha-drop-list-theme($theme) {
+
+    // =============================================================================
+    // COMPONENTE PRINCIPAL
+    // =============================================================================
+
+    .matcha-drop-list {
+        display: block;
+        position: relative;
+    }
+
+    // =============================================================================
+    // CONTAINER DAS LISTAS
+    // =============================================================================
+
+    .matcha-drop-list-container {
+        position: relative;
+        min-height: 48px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-200, 16px);
+        padding: 0px;
+        border-radius: var(--matcha-radius-lg, 8px);
+        border-width: 0px;
+        transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
+
+        &.matcha-drop-list-receiving {
+            background-color: var(--matcha-color-primary-alpha);
+            border-color: var(--matcha-color-accent);
+            border-width: 2px;
+            border-style: dashed;
+            border-radius: var(--matcha-radius-lg, 8px);
+            padding: var(--matcha-space-100, 8px);
+            transition: background-color 0.2s ease, border-color 0.2s ease, padding 0.2s ease;
+
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        var(--matcha-color-primary-alpha) 25%,
+                        var(--matcha-color-primary-alpha) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        var(--matcha-color-primary-alpha) 75%,
+                        var(--matcha-color-primary-alpha));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 2s linear infinite;
+                border-radius: var(--matcha-radius-md, 4px);
+                opacity: 0.4;
+            }
+        }
+
+        // Estados de aceitação de drop
+        &.matcha-drop-list-can-accept {
+            background-color: var(--matcha-color-success-alpha);
+            border-color: var(--matcha-color-success);
+            cursor: copy;
+
+            &::before {
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        var(--matcha-color-success-alpha) 25%,
+                        var(--matcha-color-success-alpha) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        var(--matcha-color-success-alpha) 75%,
+                        var(--matcha-color-success-alpha));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 1.5s linear infinite;
+                opacity: 0.5;
+            }
+        }
+
+
+
+        &.matcha-drop-list-cannot-accept {
+            background-color: var(--matcha-color-danger-alpha);
+            border-color: var(--matcha-color-danger);
+            pointer-events: none;
+            cursor: default;
+
+            &::before {
+                background: linear-gradient(45deg,
+                        transparent 25%,
+                        var(--matcha-color-danger-alpha) 25%,
+                        var(--matcha-color-danger-alpha) 50%,
+                        transparent 50%,
+                        transparent 75%,
+                        var(--matcha-color-danger-alpha) 75%,
+                        var(--matcha-color-danger-alpha));
+                background-size: 16px 16px;
+                animation: drop-zone-animation 0.8s linear infinite;
+                opacity: 0.6;
+            }
+        }
+
+        &.matcha-drop-list-disabled {
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    // =============================================================================
+    // DROP ZONE (matchaDropZone directive — reparenting target)
+    // =============================================================================
+
+    .matcha-drop-zone-cannot-accept {
+        border: 2px dashed var(--matcha-color-danger) !important;
+        border-radius: 8px;
+        background-color: var(--matcha-color-danger-alpha);
+        cursor: not-allowed;
+        transition: background-color 0.15s linear, border-color 0.15s linear;
+    }
+
+    // Fix C: quando o drop zone pai está rejeitado (vermelho), a lista filha
+    // recebendo o drag também deve ficar vermelha — não verde.
+    .matcha-drop-zone-cannot-accept .matcha-drop-list-container.matcha-drop-list-receiving {
+        background-color: var(--matcha-color-danger-alpha);
+        border-color: var(--matcha-color-danger);
+
+        &::before {
+            background: linear-gradient(45deg,
+                transparent 25%, var(--matcha-color-danger-alpha) 25%, var(--matcha-color-danger-alpha) 50%,
+                transparent 50%, transparent 75%, var(--matcha-color-danger-alpha) 75%, var(--matcha-color-danger-alpha));
+            background-size: 16px 16px;
+            animation: drop-zone-animation 0.8s linear infinite;
+            opacity: 0.6;
+        }
+    }
+
+    // =============================================================================
+    // GHOST CLONE (criado dinamicamente no body durante o drag)
+    // =============================================================================
+
+    .matcha-drag-ghost {
+        pointer-events: none;
+        opacity: 0.85;
+        z-index: 9999;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+        border-radius: var(--matcha-radius-md, 4px);
+        will-change: transform;
+    }
+
+    // =============================================================================
+    // ITENS ARRASTÁVEIS — Template A
+    // =============================================================================
+
+    .matcha-drag-item {
+        position: relative;
+        display: flex;
+        padding: var(--matcha-space-150, 12px);
+        border-radius: var(--matcha-radius-md, 4px);
+        overflow: hidden;
+        transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
+        user-select: none;
+        background-color: var(--matcha-color-surface);
+        color: var(--matcha-color-fg);
+
+        // State layer (Template A)
+        &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: currentColor;
+            opacity: 0;
+            border-radius: inherit;
+            pointer-events: none;
+            transition: opacity var(--matcha-duration-instant, 80ms) linear;
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &:hover:not([disabled])::before  { opacity: var(--matcha-state-hover, 0.08); }
+        &:active:not([disabled])::before { opacity: var(--matcha-state-active, 0.12); }
+
+        &:focus-visible:not([disabled]) {
+            outline: var(--matcha-state-focus-ring-width, 2px) solid var(--matcha-color-accent);
+            outline-offset: var(--matcha-state-focus-ring-offset, 2px);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            &::before { transition: none; }
+        }
+
+        &.matcha-drag-dragging {
+            z-index: 1000;
+            cursor: grabbing;
+            position: relative;
+            box-shadow: 0 8px 25px var(--matcha-color-text-muted);
+            background-color: var(--matcha-color-surface);
+            transform: scale(1.02);
+            opacity: 0.95;
+
+            // Efeito de destaque sutil
+            &::before {
+                content: '';
+                position: absolute;
+                inset: 0;
+                border-radius: var(--matcha-radius-lg, 8px);
+                z-index: -1;
+                opacity: 0.1;
+                background: linear-gradient(45deg, var(--matcha-color-surface), var(--matcha-color-primary));
+                animation: drag-glow 1s ease-in-out infinite alternate;
+            }
+        }
+
+        &.matcha-drag-disabled {
+            pointer-events: none;
+            cursor: default;
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
+        }
+
+        &.disabled-item {
+            pointer-events: none;
+            cursor: default;
+            color: var(--matcha-color-disabled-fg);
+            background-color: var(--matcha-color-disabled-bg);
+        }
+    }
+
+    // =============================================================================
+    // HANDLE DE DRAG
+    // =============================================================================
+
+    .matcha-drag-handle {
+        cursor: grab;
+        touch-action: none;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        &.disabled {
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    // =============================================================================
+    // CONTEÚDO DOS ITENS
+    // =============================================================================
+
+    .item-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: var(--matcha-space-050, 4px);
+
+        .item-title {
+            font-weight: 500;
+            color: var(--matcha-color-fg);
+
+            &.completed {
+                text-decoration: line-through;
+                opacity: 0.7;
+            }
+        }
+
+        .item-id {
+            font-size: var(--matcha-text-body-sm, 12px);
+            font-family: monospace;
+            color: var(--matcha-color-text-muted);
+        }
+
+        small {
+            font-size: var(--matcha-text-p-tiny, 11px);
+            font-style: italic;
+            color: var(--matcha-color-fg-alpha);
+        }
+    }
+
+    // =============================================================================
+    // AÇÕES DOS ITENS
+    // =============================================================================
+
+    .item-actions {
+        display: flex;
+        align-items: center;
+        gap: var(--matcha-space-100, 8px);
+
+        i {
+            font-size: var(--matcha-icon-size-sm, 16px);
+        }
+    }
+
+    // =============================================================================
+    // INDICADOR DE DROP
+    // =============================================================================
+
+    .matcha-drop-indicator {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 2px;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        transform: translateY(-8px);
+        z-index: 1000;
+        pointer-events: none;
+        margin: 0;
+        border-radius: var(--matcha-radius-sm, 2px);
+        background-color: var(--matcha-color-accent);
+
+        &.active {
+            opacity: 1;
+        }
+    }
+
+    // =============================================================================
+    // PLACEHOLDER PARA LISTAS VAZIAS
+    // =============================================================================
+
+    .matcha-drop-list-placeholder {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+
+        .matcha-drop-list-empty-placeholder {
+            font-style: italic;
+            padding: var(--matcha-space-250, 20px);
+            text-align: center;
+            font-size: var(--matcha-text-body-md, 14px);
+            border-radius: var(--matcha-radius-md, 4px);
+            transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
+            color: var(--matcha-color-text-muted);
+            border-color: var(--matcha-color-fg-alpha);
+
+            &.can-accept {
+                color: var(--matcha-color-success);
+                border-color: var(--matcha-color-success);
+                background-color: var(--matcha-color-success-alpha);
+            }
+
+            &.cannot-accept {
+                color: var(--matcha-color-danger);
+                border-color: var(--matcha-color-danger);
+                background-color: var(--matcha-color-danger-alpha);
+                animation: shake 0.5s ease-in-out;
+            }
+        }
+    }
+
+    // =============================================================================
+    // HIGH CONTRAST MODE SUPPORT
+    // =============================================================================
+
+    @media (prefers-contrast: high) {
+        .matcha-drop-list-container.matcha-drop-list-receiving {
+            border-color: var(--matcha-color-fg);
+            background-color: var(--matcha-color-fg-alpha);
+        }
+
+        .matcha-drag-item.matcha-drag-dragging {
+            border: 2px solid var(--matcha-color-fg);
+        }
+    }
+}
+
+// =============================================================================
+// ANIMAÇÕES
+// =============================================================================
+
+@keyframes drop-zone-animation {
+    0% {
+        background-position: 0 0;
+    }
+    100% {
+        background-position: 32px 0, 32px 0, 32px 0;
+    }
+}
+
+@keyframes pulse-reject {
+    0% {
+        opacity: 0.5;
+        transform: scaleY(1);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scaleY(1.5);
+    }
+}
+
+@keyframes shake {
+    0%,
+    100% {
+        transform: translateX(0);
+    }
+
+    25% {
+        transform: translateX(-2px);
+    }
+
+    75% {
+        transform: translateX(2px);
+    }
+}
+
+@keyframes drag-glow {
+    0% {
+        opacity: 0.1;
+    }
+
+    100% {
+        opacity: 0.3;
+    }
+}