nebulosa-css/src/forms.scss

@use "palette";

form {
    display: grid;
    width: min(100%, 75ch);
    grid-template-columns: max-content min-content 1fr;

    > * {
        font-family: 'Manrope', sans-serif;
    }

    > label:not(.description) {
        grid-column: 1 / 2;
        margin-right: 1rem;
        place-self: center end;
    }

    > label.description {
        margin-left: .5rem;
        grid-column: 3 / 4;
        place-self: center start;
    }

    > input,
    select,
    textarea,
    p.hint {
        grid-column: 2 / 4;
    }

    p.hint {
        font-size: .75rem;
        margin: 0 .5rem;
    }

    input[type="checkbox"],
    input[type="radio"] {
        grid-column: 2 / 3;
    }
}

input,
textarea,
select {
    background-color: palette.$standout;
    border: .1rem solid palette.$standout;
    margin: .5rem;
    padding: .5rem .75rem;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    transition: border-color .3s;
    display: block;

    &:hover {
        border-color: palette.$primary;
    }

    &:active,
    &:focus {
        border-color: palette.$primary;
        outline: .1rem solid palette.$primary;
    }

    &::placeholder {
        color: palette.$grey600;
    }
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    appearance: none;
    height: 1rem;
    width: 1rem;
    padding: .75rem;
    display: block;

    background-color: palette.$standout;
    border: .15rem solid palette.$grey200;
    border-radius: .5rem;

    position: relative;

    transition: color .3s, background-color .3s, border-color .3s;

    &:checked {
        border-color: palette.$primary;
        background-color: palette.$primary;

        &::after {
            content: '✔';
            font-size: 125%;

            @if lightness(palette.$primary) > 50 {
                color: palette.$grey50
            }

            @else {
                color: palette.$grey900
            }

            position: absolute;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            transition: translate .3s,
            left .3s,
            background-color .3s;
        }
    }
}

textarea {
    resize: vertical;
}

input[type="radio"] {
    border-radius: 100%;

    &:checked::after {
        content: '';

        @if lightness(palette.$primary) > 50 {
            background-color: palette.$grey50
        }

        @else {
            background-color: palette.$grey900
        }

        border-radius: 100%;
        width: 80%;
        height: 80%;
        position: absolute;
    }
}

input[type="checkbox"].switch {
    height: 1px;
    width: 3rem;
    border-radius: 1rem;

    &::after {
        content: '';
        background-color: palette.$grey200;

        border-radius: 100%;
        height: 80%;
        aspect-ratio: 1 / 1;
        position: absolute;
        top: 50%;
        left: .1rem;
        translate: 0 -50%;
        transition: .3s;
    }

    &:checked::after {
        left: calc(100% - .1rem);
        translate: -100% -50%;

        @if lightness(palette.$primary) > 50 {
            background-color: palette.$grey50
        }

        @else {
            background-color: palette.$grey900
        }
    }
}

input[type="color"] {
    width: 3rem;
    height: 3rem;
    padding: .5rem;
    cursor: pointer;

    &::-moz-color-swatch,
    &::-webkit-color-swatch {
        width: 100%;
        height: 100%;
        border: 0 none transparent;
    }
}

input[type="file"] {
    font-family: 'Manrope', sans-serif;
    color: palette.$grey500;

    &::file-selector-button {
        font-family: 'Manrope', sans-serif;
        transition: .3s color, .3s background-color;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        margin: .5rem 1rem .5rem 0;
        padding: .5rem 1rem;
        border: 2px solid palette.$primary;

        @if lightness(palette.$primary) < 50 {
            color: palette.$grey50
        }

        @else {
            color: palette.$grey900
        }

        background-color: transparent;

        &:hover {
            background-color: palette.$primary;
        }
    }
}

input[type="range"] {
    color: transparent;
    background-color: transparent;
    border: 0 none transparent;
    padding: 0;

    &::-moz-range-track,
    &::-webkit-slider-runnable-track {
        background-color: palette.$primary;

        @supports selector(input[type="range"]::-moz-range-progress) {
            background-color: palette.$grey200;
        }

        height: .5rem;
        border-radius: .25rem;
    }

    &::-moz-range-thumb,
    &::-webkit-slider-thumb {
        background-color: palette.$grey50;
        height: 1.25rem;
        width: 1.25rem;
        border: 1px solid palette.$grey300;
        border-radius: .75rem;
        cursor: pointer;
    }

    &::-moz-range-progress {
        background-color: palette.$primary;
        height: .5rem;
        border-radius: .25rem;
    }
}