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

@layer utilities {
    input[type='number']::-webkit-inner-spin-button,
    input[type='number']::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type='number'] {
        appearance: textfield;
    }
}

@layer base {
    [v-cloak] {
        display: none;
    }

    h1,
    h2 {
        font-family: 'Rubik', sans-serif;
        font-weight: 200;
    }

    html {
        font-family: 'DM Sans', sans-serif;
    }

    @supports (scrollbar-width: thin) {
        .scrollbar-thin {
            scrollbar-width: thin;
        }
    }

    /* PULSE */
    @keyframes detect-scroll {
        from,
        to {
            --can-scroll: ;
        }
    }

    /* Custom scrollbar track width */

    @supports selector(::-webkit-scrollbar) {
        .scrollbar-minimal::-webkit-scrollbar {
            width: 0.35rem;
        }

        .scrollbar-minimal-x::-webkit-scrollbar {
            height: 0.35rem;
        }

        .scrollbar-minimal::-webkit-scrollbar-track,
        .scrollbar-minimal-x::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 9999px;
        }

        .scrollbar-minimal::-webkit-scrollbar-thumb,
        .scrollbar-minimal-x::-webkit-scrollbar-thumb {
            background: #8a8a8a;
            border-radius: 9999px;
        }

        .scrollbar-minimal::-webkit-scrollbar-thumb:hover,
        .scrollbar-minimal-x::-webkit-scrollbar-thumb:hover {
            background: #636363;
        }

        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb,
        .scrollbar-minimal-x:is(.dark *)::-webkit-scrollbar-thumb {
            background: #9e9e9e;
        }

        .scrollbar-minimal:is(.dark *)::-webkit-scrollbar-thumb:hover,
        .scrollbar-minimal-x:is(.dark *)::-webkit-scrollbar-thumb:hover {
            background: #d0d0d0;
        }

        .scrollbar-minimal.scrollbar-hover::-webkit-scrollbar {
            width: 0rem;
        }

        .group:hover .scrollbar-minimal.scrollbar-hover::-webkit-scrollbar {
            width: 0.35rem;
        }

        .scrollbar-minimal-x.scrollbar-hover::-webkit-scrollbar {
            height: 0rem;
        }

        .group:hover .scrollbar-minimal-x.scrollbar-hover::-webkit-scrollbar {
            height: 0.35rem;
        }

        /* PULSE */
        .supports-scrollbars {
            animation: detect-scroll linear;
            animation-timeline: scroll(self);

            padding-right: var(--can-scroll) theme('spacing.3');
        }
    }

    .slider {
        --thumb-size: 2;
        --thumb-rounded: 9999px;
        --track-color: rgba(255, 255, 255, 0.3);
        --track-rounded: 9999px;
        --progress-color: #111827;
        --buffer-color: rgba(255, 255, 255, 0.3);
        --thumb-color: #ffffff;
        --buffer: 0;

        appearance: none;
        cursor: pointer;
        overflow: hidden;

        transition-property: height, border-radius, margin-top, margin-bottom;
        transition-duration: 200ms;
        transition-timing-function: ease-in-out;
        will-change: transform;

        background-color: var(--track-color);
        border-radius: var(--track-rounded);
    }

    .slider.volume {
        --progress-color: #9333eaca;
    }

    .slider.timeline {
        --thumb-size: 1;
        height: calc(var(--thumb-size) * 0.25rem);
        margin-top: calc(var(--thumb-size) * 0.125rem);
        margin-bottom: calc(var(--thumb-size) * 0.125rem);
    }

    .slider.timeline:hover {
        --thumb-size: 2;
        height: calc(var(--thumb-size) * 0.25rem);
        margin-top: 0rem;
        margin-bottom: 0rem;
        border-radius: 1px;
    }

    /* WebKit (Chrome, Safari) */
    .slider::-webkit-slider-thumb {
        transition: all 200ms ease-in-out;
        appearance: none;
        border: 0;
        background: var(--thumb-color);
        border-radius: var(--thumb-rounded);
        width: calc(var(--thumb-size) * 0.25rem);
        height: calc(var(--thumb-size) * 0.25rem);
        box-shadow: -995px 0 0 992px var(--progress-color);
    }

    .slider.timeline::-webkit-slider-thumb,
    .slider.timeline::-moz-range-thumb {
        box-shadow: -995px 0 0 993px var(--progress-color);
    }

    .slider.timeline:hover::-webkit-slider-thumb,
    .slider.timeline:hover::-moz-range-thumb {
        box-shadow: -995px 0 0 991px var(--progress-color);
    }

    .slider::-webkit-slider-runnable-track {
        background: linear-gradient(
            to right,
            var(--buffer-color) 0%,

            var(--buffer-color) calc(var(--buffer, 0) * 1%),
            rgba(0, 0, 0, 0) calc(var(--buffer, 0) * 1%),
            rgba(0, 0, 0, 0) 100%
        );
    }

    /* Firefox */
    .slider::-moz-range-thumb {
        transition: all 200ms ease-in-out;
        appearance: none;
        border: 0;
        background: var(--thumb-color);
        border-radius: var(--thumb-rounded);
        width: calc(var(--thumb-size) * 0.25rem);
        height: calc(var(--thumb-size) * 0.25rem);
        box-shadow: -995px 0 0 992px var(--progress-color);
    }

    .slider::-moz-range-track {
        transition: all 200ms ease-in-out;

        background: linear-gradient(
            to right,
            var(--buffer-color) 0%,

            var(--buffer-color) calc(var(--buffer, 0) * 1%),
            rgba(0, 0, 0, 0) calc(var(--buffer, 0) * 1%),
            rgba(0, 0, 0, 0) 100%
        );

        border-radius: var(--track-rounded);
        height: calc(var(--thumb-size) * 0.25rem);
    }

    .slider::-moz-range-progress {
        transition: all 200ms ease-in-out;

        background: transparent;

        height: calc(var(--thumb-size) * 0.25rem);
    }
}
