/* Manifest Range */

@layer base, components, utilities;

@layer components {

    :where(input[type=range]):not(.unstyle) {
        appearance: none;
        background-color: transparent;
        border-radius: var(--radius, 0.5rem);
        cursor: default;

        &::-webkit-slider-runnable-track {
            height: calc(var(--spacing, 0.25rem) * 2);
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
            border-radius: var(--radius, 0.5rem);
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out)
        }

        &:hover::-webkit-slider-runnable-track {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent));
        }

        &::-webkit-slider-thumb {
            appearance: none;
            position: relative;
            top: 50%;
            width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            transform: translateY(-50%);
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, oklch(43.9% 0 0)));
            border-radius: 200px;
            box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out)
        }

        &::-webkit-slider-thumb:hover {
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, oklch(43.9% 0 0)));
        }
    }

    :where(datalist):not(.unstyle) {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;

        & option {
            width: 2ch;
            text-align: center;
            font-size: 0.875rem;
            color: var(--color-content-neutral, oklch(43.9% 0 0));
        }
    }

    :where(label:has(input[type=range])):not(.unstyle) {
        cursor: default;
    }
}