@tailwind base;
@tailwind components;
@tailwind utilities;

@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1 * var(--text-width)));
    }
}

.animate-scroll-text {
    animation: scrollText;
}

/* global css vars */

:root {
    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.24);
    --rsbs-bg: rgba(1 1 1 1);
    --rsbs-handle-bg: hsla(329, 62%, 45%, 0.604);
    --rsbs-max-w: auto;
    --rsbs-ml: env(safe-area-inset-left);
    --rsbs-mr: env(safe-area-inset-right);
    --rsbs-overlay-rounded: 16px;

    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}

body {
    color: rgb(var(--foreground-rgb));
    background: linear-gradient(
            to bottom,
            transparent,
            rgb(var(--background-end-rgb))
        )
        rgb(var(--background-start-rgb));
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

/* ambilight filter */

.ambilight {
    filter: url(#ambilight);
}

/* Range sliders */
input[type="range"] {
    accent-color: #f490b6;
    height: 0.35rem;
    border-radius: 100%;
    border: 0;
    /* Remove default appearance */
    -webkit-appearance: none;
    appearance: none;
}

/* WebKit-specific styles */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    input[type="range"]::-webkit-slider-runnable-track {
        transition: all 0.3s ease;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        background: #fff;
        scale: 0.25;
        border-radius: 50%;
        box-shadow:
            -16px 0 0 0 #f490b6,
            -12px 0 0 0 #f490b6,
            -10px 0 0 0 #f490b6,
            -8px 0 0 0 #f490b6,
            -4px 0 0 0 #f490b6,
            2px 0 0 0 #f490b6,
            5px 0 0 0 #f490b6,
            10px 0 0 0 #f490b6,
            16px 0 0 0 #f490b6;
        border: 0;
        transition: all 0.1s ease;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
        scale: 1.2;
        box-shadow: 0px 0px 0px 0px #f490b6;
    }

    input[type="range"]:hover::-webkit-slider-thumb {
        scale: 1;
        box-shadow: 0px 0px 0px 0px #f490b6;
    }
}

/* Scrollbar */
html {
    scrollbar-color: hsla(128, 0%, 50%, 0.3) transparent;
    scrollbar-width: auto;
}

::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-thumb {
    background-color: hsla(128, 0%, 50%, 0.3);
    background-clip: padding-box;
    border: 4px solid transparent;
    border-radius: 16px;
    min-height: 30px;
}

/* Progress bar */
progress {
    border-radius: 7px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

progress::-webkit-progress-bar {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 7px;
}

progress::-webkit-progress-value {
    background-color: #f490b6;
    border-radius: 7px;
}
