form {
    &.isolated {
        margin-top: var(--gap-big);
        margin-bottom: var(--gap-big);
    }

    &.narrow {
        width: min-content;
        min-width: min(100%, var(--content-width-narrower));
        margin: 0 auto;
    }

    display: flex;
    flex-direction: column;
    gap: var(--gap-big);

    clear: both;

    & > .cf-turnstile {
        margin-top: calc(var(--gap-big) * -2) !important;
    }
}

input,
textarea,
select {
    --bgColor: var(--color-background);
    --borderColor: var(--color-base-faintest);
    --fgColor: var(--color-base);
    min-width: auto;
    box-sizing: border-box;
    width: 100%;
}

input[type=text],
input[type=password],
textarea,
select {
    background: var(--bgColor);
    border: solid var(--borderColor) 1px;
    padding: 7px 9px;
    color: var(--fgColor);
    border-radius: var(--border-radius);

    font-size: var(--font-size);
    font-family: var(--font-family-main);
    line-height: var(--font-line-height);
    font-weight: var(--font-weight);

    &::placeholder {
        color: var(--fgColor);
        opacity: var(--faintOpacity);
    }

    &:hover {
        --borderColor: var(--color-base-fainter);
    }

    &:focus {
        --borderColor: var(--color-primary);
        outline: none;
    }
}

input[type=text].key {
    font-family: monospace;
    font-size: var(--font-size-smaller);
}

textarea {
    width: 100%;
    min-height: 300px;
    max-height: 50vh;
    resize: vertical;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2em;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23BCC7EC' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 20px;

    &:hover {
        background-image: url("data:image/svg+xml;utf8,<svg fill='%23889DDD' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    }
}

.formCheckbox {
    display: flex;
    align-items: flex-start;
    gap: 3px;

    --size: 20px;
    --color: currentColor;

    input[type=checkbox] {
        flex-shrink: 0;
        -webkit-appearance: none;
        appearance: none;
        background-color: #fff;
        margin: 0;
        font: inherit;
        color: var(--color);
        width: var(--size);
        height: var(--size);
        border: 1px solid var(--color-base-faint);
        border-radius: 50%;

        display: grid;
        place-content: center;
        cursor: pointer;

        &::before {
            content: "";
            width: calc(var(--size) / 3);
            height: calc(var(--size) / 5);
            transform: scale(0) rotate(-45deg) translate(0.5px, -0.5px);
            transition: var(--transition-animation-ms) transform ease-in-out;
            border-left: solid var(--color) 2px;
            border-bottom: solid var(--color) 2px;
        }

        &:checked::before {
            transform: scale(1) rotate(-45deg) translate(0.5px, -0.5px);
        }
    }

    > label {
        color: var(--color);
        cursor: pointer;
        padding-left: 5px;
    }

    & + & {
        margin-top: var(--base-gap);
    }

    &:hover {
        --color: var(--color-primary);
        > input[type=checkbox] {
            border-color: var(--color-primary);
        }
    }

    &:has(input:checked) {
        > input[type=checkbox] {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            --color: #fff;
        }
    }
}

.formCheckboxes {
    display: flex;
    flex-direction: column;
    gap: var(--base-gap);
}

.formInput {

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    > label {
        flex-shrink: 0;
        color: var(--color);
        margin-left: calc(var(--border-radius) * .7);
        font-size: var(--font-size-smaller);
        font-weight: 500;
        color: var(--color-base-faint);
    }

    label {
        position: relative;
        > .Badge {
            position: absolute;
            top: 0;
            right: 100%;
        }
    }
}

.formInput,
.formCheckbox,
.formInputWithButton {
    &:has(.Badge.error) {
        input[type=text],
        input[type=password],
        textarea {
            border-color: var(--color-error);
        }
    }
}