.form-control {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-control-gap);

    label:has(input),
    label:has(select),
    label:has(textarea) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--form-control-gap);
    }


    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    input[type="file"],
    input[type="number"],
    input[type="color"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input[type="image"],
    select {
        height: var(--input-height);
    }


    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    select {
        width: 100%;
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        padding-block: var(--input-padding-y);
        padding-inline: var(--input-padding-x);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }


    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        border-radius: var(--input-border-radius);
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        padding-block: var(--input-padding-y);
        padding-inline: var(--input-padding-x);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }

    input[type="image"] {
        border-radius: var(--input-border-radius);
        overflow: clip;

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }


    input[type="range"] {
        width: 100%;
    }

    input[type="range"],
    input[type="radio"],
    input[type="checkbox"] {
        accent-color: var(--input-accent-color);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }

    input[type="file"] {
        width: 100%;
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }

        &::file-selector-button {
            background-color: var(--input-accent-color);
            color: var(--input-content-on-accent-color);
            padding-inline: var(--input-padding-x);
            padding-block: var(--input-padding-y);
            margin-right: var(--input-padding-x);
            height: 100%;
            border: none;
            display: inline-flex;
            align-items: center;
        }

        &::-webkit-file-upload-button {
            height: 100%;
            display: inline-flex;
            align-items: center;
        }
    }

    input[type="number"] {
        width: 100%;
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        padding-block: var(--input-padding-y);
        padding-left: var(--input-padding-x);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }

    select {
        appearance: none;
        -webkit-appearance: none;
        background-image: var(--input-icon-select-arrow-svg);
        background-repeat: no-repeat;
        background-position: right var(--input-padding-x) center;
        background-size: 1.5rem;

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }


    textarea {
        height: auto;
        resize: vertical;
        width: 100%;
        background-color: var(--input-background-color);
        border-radius: var(--input-border-radius);
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        padding-block: var(--textarea-padding-y);
        padding-inline: var(--textarea-padding-x);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }

    input[type="color"] {
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        border-radius: var(--input-border-radius);

        &:focus {
            outline: none;
            border-color: var(--input-border-focus-color);
            box-shadow: var(--input-box-shadow-focus);
        }
    }


    input[type="checkbox"][role="switch"] {
        appearance: none;
        -webkit-appearance: none;
        width: calc(var(--input-switch-height) * 2);
        height: var(--input-switch-height);
        border-radius: 50rem;
        border-color: var(--input-border-color);
        border-style: var(--input-border-style);
        border-width: var(--input-border-width);
        background-color: var(--input-background-color);
        background-image: var(--input-icon-switch-svg-before);
        background-repeat: no-repeat;
        background-position: left center;
        background-size: var(--input-switch-height);
        transition: background-color 0.1s, background-position 0.1s ease;

        &:checked {
            background-color: var(--input-accent-color);
            border-color: var(--input-accent-color);
            background-position: right center;
            background-image: var(--input-icon-switch-svg-after);
        }

        &:focus-visible {
            outline: none;
            box-shadow: var(--input-box-shadow-focus);
        }
    }


    input,
    select,
    textarea {
        &:disabled {
            color: var(--input-disabled-color);
            -webkit-text-fill-color: var(--input-disabled-color);
            background-color: var(--input-disabled-background-color);
            opacity: 0.5;
        }
    }

}


.validated {

    input[type="checkbox"][role="switch"] {
        &[aria-invalid="true"],
        &:invalid {
            background-color: var(--input-accent-color-invalid);
            border-color: var(--input-accent-color-invalid);
        }
    }

    input[type='file'] {
        &[aria-invalid="true"],
        &:invalid {
            &::file-selector-button {
                background-color: var(--input-accent-color-invalid);
                color: var(--input-content-on-accent-color-invalid);
            }
        }
    }

    input,
    select,
    textarea {
        &[aria-invalid="true"],
        &:invalid {
            accent-color: var(--input-accent-color-invalid);
            border-color: var(--input-accent-color-invalid);
            box-shadow: var(--input-box-shadow-focus-invalid);

            &:focus {
                accent-color: var(--input-accent-color-invalid);
                border-color: var(--input-accent-color-invalid);
                box-shadow: var(--input-box-shadow-focus-invalid);
            }
        }
    }
}


@mixin input-height($height) {
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    input[type="file"],
    input[type="number"],
    input[type="color"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"],
    input[type="image"],
    select {
        height: $height;
    }
}

@mixin switch-size($height) {
    input[type="checkbox"][role="switch"] {
        width: calc(#{$height} * 2);
        height: $height;
        background-size: $height;
    }
}

@mixin input-zoom($zoom) {
    input[type="range"],
    input[type="checkbox"]:not([role="switch"]),
    input[type="radio"] {
        zoom: $zoom;
    }
}


.form-control-sm {
    @include input-height(var(--input-height-sm));
    @include switch-size(var(--input-switch-height-sm));
    @include input-zoom(.9);
}

.form-control-md {
    @include input-height(var(--input-height-md));
    @include switch-size(var(--input-switch-height-md));
}

.form-control-lg {
    @include input-height(var(--input-height-lg));
    @include switch-size(var(--input-switch-height-lg));
    @include input-zoom(1.5);
}