@use 'mixins' as *;

.form {
    label {
        display: block;
        font-weight: 500;
    }

    input:not([type='checkbox'], [type='radio'], [type='range']),
    select,
    textarea {
        height: 2.25rem;
        margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: 1rem;
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        @include transitionColors();
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        background-color: transparent;
        border-color: hsl(var(--input));
        border-width: 1px;
        border-radius: calc(var(--radius) - 2px);
        width: 100%;
        font-size: 0.875rem;
        line-height: 1.25rem;

        &::placeholder {
            font-weight: 500;
            color: hsl(var(--muted-foreground));
        }

        &:disabled,
        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &[type='file'] {
            cursor: pointer;

            &::file-selector-button {
                background: transparent;
                color: hsl(var(--foreground));
                appearance: none;
                border: none;
                padding: 0.25rem;
                font-family: inherit;
                font-weight: 500;
                cursor: pointer;
            }
        }

        &[type='date'] {
            &::-webkit-calendar-picker-indicator {
                color: hsl(var(--foreground));
                cursor: pointer;
            }
        }
    }

    .form-description {
        color: hsl(var(--muted-foreground));
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        display: block;
        margin-top: -0.5rem;
        margin-bottom: 1rem;
    }

    textarea {
        height: auto;
        min-height: 2.25rem;
        resize: vertical;
    }

    .select {
        position: relative;

        &:after {
            @include icon('\f078');
            position: absolute;
            top: .75rem;
            right: .75rem;
            color: hsl(var(--muted-foreground));
            pointer-events: none;
        }

        select {
            padding-right: 2.2rem;
        }
    }

    select {
        cursor: pointer;

        option {
            background-color: hsl(var(--background));
            color: hsl(var(--foreground));
        }
    }

    .switch,
    .checkbox,
    .radio {
        margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;

        input:disabled+label,
        input.disabled+label {
            opacity: 0.7;
            cursor: not-allowed;
        }

        label {
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .switch input[type='checkbox'] {
        background-color: hsl(var(--input));
        border-radius: 9999px;
        width: 2.25rem;
        height: 1.25rem;
        border: none;
        position: relative;
        @include transitionColors();
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        flex-shrink: 0;
        cursor: pointer;

        &:disabled,
        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &:after {
            transition-property: transform;
            transition-timing-function: var(--ease);
            transition-duration: 0.15s;
            @include icon('\f111');
            position: absolute;
            font-size: 1rem;
            top: 50%;
            transform: translateY(-50%) translateX(3px);
            color: hsl(var(--background));
        }

        &:checked {
            background-color: hsl(var(--primary));

            &:after {
                transform: translateY(-50%) translateX(1.1rem);
            }
        }
    }

    .checkbox input[type='checkbox'],
    .radio input[type='radio'] {
        box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        border-color: hsl(var(--primary));
        border-width: 1px;
        border-radius: calc(var(--radius) - 4px);
        flex-shrink: 0;
        width: 1rem;
        height: 1rem;
        cursor: pointer;
        background: transparent;
        position: relative;

        &:disabled,
        &.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &[type='checkbox'] {
            &:checked {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background-color: hsl(var(--primary));

                &:after {
                    @include icon('\f00c');
                    color: hsl(var(--background));
                    font-size: 0.6rem;
                }
            }
        }

        &[type='radio'] {
            border-radius: 100%;

            &:checked {
                display: inline-flex;
                align-items: center;
                justify-content: center;

                &:after {
                    @include icon('\f111');
                    color: hsl(var(--primary));
                    font-size: 0.5rem;
                }
            }
        }
    }

    input[type='range'] {
        --slider-value: 50%;
        width: 100%;
        background: linear-gradient(to right, hsl(var(--primary)) var(--slider-value), hsl(var(--muted)) var(--slider-value));
        height: 8px;
        border-radius: 4px;

        &::-webkit-slider-thumb {
            position: relative;
            z-index: 1;
            width: 1rem;
            height: 1rem;
            background-color: hsl(var(--background));
            border-radius: 50%;
            border: 1px solid hsl(var(--foreground));
            cursor: pointer;
            appearance: none;
        }
    }
}