@layer forms {
    .form-input,
    .form-select,
    .form-multiselect,
    .form-textarea {
        background: inherit;
        color: inherit;
        border-radius: var(--radius-md);
        padding: theme("padding.1") theme("padding.2");

        .has-errors & {
            border-color: var(--color-red-800);
            --tw-ring-color: var(--color-red-800);
            @variant dark {
                border-color: var(--color-red-500);
                --tw-ring-color: var(--color-red-500);
            }
        }
    }

    /* search inputs */

    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
        display: none;
    }

    /* range inputs */

    input[type="range"] {
        --thumbSize: --spacing(4);
        --trackSize: --spacing(1);
        --thumbBg: var(--color-blue-600);
        --trackBg: var(--color-white);
        --progressBg: var(--color-blue-900);

        /* webkit progress workaround */
        --webkitProgressPercent: 0%;
    }
    input[type="range"]:disabled {
        --thumbBg: var(--color-gray-500);
        --trackBg: var(--color-gray-300);
        --progressBg: var(--color-gray-600);
    }

    input[type="range"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: var(--thumbSize);
        width: 100%;
        margin: 0;
        padding: 0;
    }
    input[type="range"]:focus {
        outline: none;
    }

    /* Thumb */
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--thumbSize);
        height: var(--thumbSize);
        background-color: var(--thumbBg);
        border-radius: calc(var(--thumbSize) / 2);
        border: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
        cursor: pointer;
    }
    input[type="range"]::-moz-range-thumb {
        -moz-appearance: none;
        appearance: none;
        width: var(--thumbSize);
        height: var(--thumbSize);
        background-color: var(--thumbBg);
        border-radius: calc(var(--thumbSize) / 2);
        border: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
        cursor: pointer;
    }
    input[type="range"]::-ms-thumb {
        -ms-appearance: none;
        appearance: none;
        width: var(--thumbSize);
        height: var(--thumbSize);
        background-color: var(--thumbBg);
        border-radius: calc(var(--thumbSize) / 2);
        border: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        margin-top: calc(((var(--thumbSize) - var(--trackSize)) / 2) * -1);
        cursor: pointer;
    }

    /* Track */
    input[type="range"]::-webkit-slider-runnable-track {
        height: var(--trackSize);
        background-image: linear-gradient(
            90deg,
            var(--progressBg) var(--webkitProgressPercent),
            var(--trackBg) var(--webkitProgressPercent)
        );
        border-radius: calc(var(--trackSize) / 2);
    }

    input[type="range"]::-moz-range-track {
        height: var(--trackSize);
        background-color: var(--trackBg);
        border-radius: calc(var(--trackSize) / 2);
    }
    input[type="range"]::-ms-track {
        height: var(--trackSize);
        background-color: var(--trackBg);
        border-radius: calc(var(--trackSize) / 2);
    }

    /* Progress */
    input[type="range"]::-moz-range-progress {
        height: var(--trackSize);
        background-color: var(--progressBg);
        border-radius: calc(var(--trackSize) / 2) 0 0 calc(var(--trackSize) / 2);
    }
    input[type="range"]::-ms-fill-lower {
        height: var(--trackSize);
        background-color: var(--progressBg);
        border-radius: calc(var(--trackSize) / 2) 0 0 calc(var(--trackSize) / 2);
    }
}
