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

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

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

input,
textarea {
    --bgColor: transparent;
    --borderColor: var(--color-base-fainter);
    --fgColor: var(--color-base);
}

input[type=text],
textarea {
    background: none;
    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: 400;

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

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

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

.formInputWithButton {
    display: flex;
    align-items: center;

    --height: var(--button-height);

    input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        height: var(--height);
        padding-top: 0;
        padding-bottom: 0;
        border-right: none;
    }

    .Button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left: none;
        height: var(--height);
    }

    &.centered {
        margin-left: auto;
        margin-right: auto;
        width: min-content;
    }

    & > .Badge.error {
        margin-left: var(--base-gap) !important;
    }
}

.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);
        border-radius: 50%;

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

        &::before {
            content: "";
            width: calc(var(--size) / 2.5);
            height: calc(var(--size) / 4.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,
    &:has(input:checked) {
        --color: var(--color-primary);
    }
}

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

.formInput {

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

    > label {
        flex-shrink: 0;
        color: var(--color);
        width: 100px;
        margin-top: 3px;
    }

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

.formInput,
.formCheckbox,
.formInputWithButton {
    &:has(.Badge.error) {
        position: relative;

        --bracketsWidth: 1.5px;
        border-radius: 15px;
        padding: var(--base-gap);
        border: solid transparent var(--bracketsWidth);
        border-left: solid var(--color-error) var(--bracketsWidth);
        border-right: solid var(--color-error) var(--bracketsWidth);

        &:after,
        &:before {
            position: absolute;
            top: calc(50% - (var(--bracketsWidth) / 2));
            content: '';
            width: 7px;
            height: 0;
            border-top: solid var(--color-error) var(--bracketsWidth)
        }

        &:before {
            right: 100%;
        }

        &:after {
            left: 100%;
        }

        > .Badge.error {
            margin-left: auto;
        }
    }
}
