/* please add layerrules to hyprland config:

layerrule = blur, hyprshell_overview
layerrule = ignorezero, hyprshell_overview
layerrule = blur, hyprshell_switch
layerrule = ignorezero, hyprshell_switch
layerrule = blur, hyprshell_launcher
layerrule = ignorezero, hyprshell_launcher
*/

:root {
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-active: rgba(46, 204, 113, 0.55);

    --bg-color: rgba(11, 61, 46, 0.12);
    --bg-color-hover: rgba(46, 204, 113, 0.18);

    --border-radius: 12px;
    --border-size: 1px;
    --border-style: solid;

    --text-color: rgba(245, 255, 248, 0.95);

    --window-padding: 10px;
    --bg-window-color: rgba(6, 20, 15, 0.75);
}

:root {
    --box-shadow-color: rgba(255, 255, 255, 0.05);
    --box-shadow-color-hover: rgba(46, 204, 113, 0.25);
}

.client-image {
    margin: 15px;
    -gtk-icon-transform: scale(1.2);
}

.monitor {
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 15px rgba(46, 204, 113, 0.03),
        0 8px 12px 0 rgba(0, 0, 0, 0.5);
    background-color: var(--bg-window-color);
    border-radius: var(--border-radius);
    padding: 30px;
}

.workspace {
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 0 12px var(--box-shadow-color);
    border-radius: calc(var(--border-radius) - 2px);
    margin: 6px;
    padding: 8px;
    background-color: rgba(46, 204, 113, 0.1);
}

.workspace.active {
    border-color: var(--border-color-active);
    animation: pulse-glow 1.5s infinite ease-in-out;
}

.client {
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 10px var(--box-shadow-color);
    border-radius: calc(var(--border-radius) - 4px);
    margin: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.02);
}

.client.active {
    border-color: var(--border-color-active);
    animation: pulse-glow-client 1.5s infinite ease-in-out;
}

.client:hover {
    border-color: rgba(46, 204, 113, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 0 15px rgba(46, 204, 113, 0.15);
    background-color: rgba(46, 204, 113, 0.12);
}

.launcher {
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 20px var(--box-shadow-color),
        0 8px 32px 0 rgba(0, 0, 0, 0.5);
    background-color: var(--bg-window-color);
    border-radius: var(--border-radius);
    padding: 14px;
}

.launcher-input {
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 6px var(--box-shadow-color);
    background-color: rgba(6, 20, 15, 0.35);
}

.launcher-input:focus-within {
    outline: none;
    border-color: var(--border-color-active);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 8px var(--box-shadow-color-hover),
        0 0 8px rgba(46, 204, 113, 0.35);
}

.launcher-item {
    padding: 0 8px;
    border-radius: 10px;
    box-shadow: inset 0 0 8px var(--box-shadow-color);
    border: var(--border-size) var(--border-style) transparent;
}

.launcher-plugin-inner {
    background: unset;
}

.launcher-item:hover {
    border-color: rgba(46, 204, 113, 0.4);
    box-shadow: inset 0 0 10px var(--box-shadow-color-hover);
    background-color: rgba(46, 204, 113, 0.08);
}

.launcher-plugin {
    padding: 4px;
    border-radius: 12px;
    box-shadow: inset 0 0 12px var(--box-shadow-color);
    border: var(--border-size) var(--border-style) rgba(255, 255, 255, 0.08);
}

.launcher-item-inner {
    background: unset;
}

.launcher-plugin:hover {
    border-color: var(--border-color-active);
    box-shadow: inset 0 0 12px var(--box-shadow-color-hover);
}

@keyframes background-moving {
    0% {
        background: linear-gradient(
            90deg,
            rgba(46, 204, 113, 0.25) 0%,
            transparent 0%
        );
    }
    100% {
        background: linear-gradient(
            90deg,
            rgba(46, 204, 113, 0.25) 100%,
            transparent 100%
        );
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 0 15px rgba(46, 204, 113, 0.12),
            0 0 10px rgba(46, 204, 113, 0.2);
        background-color: rgba(46, 204, 113, 0.05);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.35),
            inset 0 0 25px rgba(46, 204, 113, 0.25),
            0 0 20px rgba(46, 204, 113, 0.5);
        background-color: rgba(46, 204, 113, 0.08);
    }
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            inset 0 0 15px rgba(46, 204, 113, 0.12),
            0 0 10px rgba(46, 204, 113, 0.2);
        background-color: rgba(46, 204, 113, 0.05);
    }
}

@keyframes pulse-glow-client {
    0% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 0 10px rgba(46, 204, 113, 0.1),
            0 0 8px rgba(46, 204, 113, 0.15);
        background-color: rgba(46, 204, 113, 0.03);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.25),
            inset 0 0 15px rgba(46, 204, 113, 0.25),
            0 0 14px rgba(46, 204, 113, 0.35);
        background-color: rgba(46, 204, 113, 0.06);
    }
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 0 10px rgba(46, 204, 113, 0.1),
            0 0 8px rgba(46, 204, 113, 0.15);
        background-color: rgba(46, 204, 113, 0.03);
    }
}