@use '../layout/flex';

form {
    @include flex.column;
    gap: 8px;
}

label {
    font-size: 1rem;
}

@mixin base {
    padding: 14px 16px;
    margin: none;

    font-size: 1.2rem;

    background-color: var(--background-tertiary);
    border: 4px solid var(--background-tertiary);
    border-radius: 12px;

    transition: border-color 0.2s ease-in-out;

    width: 100%;

    color: var(--text);

    &.error {
        border-color: var(--red);
    }

    &:active,
    &:focus {
        outline: none;
        border-color: var(--secondary);
    }
}

textarea {
    @include base;

    min-width: 100%;
    max-width: 100%;

    height: 150px;
    max-height: 250px;
}

input:not([type='checkbox'], [type='radio']) {
    @include base;
}

input[type='checkbox'] {
    margin: 0px 4px 0px 0px;
}

input[type='color'] {
    padding: 8px;
    height: 48px;
}

input,
textarea {
    &:disabled {
        cursor: not-allowed;
        opacity: 0.8;
    }
}

// Based on https://codepen.io/aaroniker/pen/ZEYoxEY

input[type='checkbox'],
input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;

    height: 22px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;

    border: 2px solid var(--background-tertiary);

    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;

    &:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;

        transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2),
            opacity 0.2s;
    }

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

    &:disabled {
        cursor: not-allowed;
        opacity: 0.8;
    }

    &:focus:not(&:disabled),
    &:hover:not(&:disabled) {
        border-color: var(--primary);
    }

    &:not(.switch) {
        width: 22px;

        &:after {
            opacity: 0;
        }

        &:checked:after {
            opacity: 1;
        }
    }
}

input[type='checkbox'] {
    &:not(.switch) {
        border-radius: 7px;

        &:after {
            width: 5px;
            height: 9px;
            border: 2px solid var(--text);
            border-top: 0;
            border-left: 0;
            left: 6.5px;
            top: 3.5px;
            transform: rotate(var(--rotation, 20deg));
        }

        &:checked {
            --rotation: 43deg;
        }
    }

    &.switch {
        width: 38px;
        border-radius: 11px;

        &:after {
            left: 2px;
            top: 1.5px;
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background: var(--switch-colour, rgba(var(--text-rgb), 0.7));
            transform: translateX(var(--x, 0));
        }

        &:checked {
            --switch-colour: var(--text);
            --x: 15px;
        }

        &:disabled {
            &:not(:checked) {
                &:after {
                    opacity: 0.6;
                }
            }
        }
    }
}

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

    width: 22px;
    height: 22px;
    padding: 12px;

    &:after {
        width: 20px;
        height: 20px;

        border-radius: 100%;
        background: var(--text);
        opacity: 0;

        top: 2.2px;
        left: 2.2px;

        transform: scale(var(--s, 0.8));
    }

    &:checked {
        --s: 0.6;
    }
}