:root {
    --bs-border-color: var(--secondary-100);
    --bs-secondary-bg: var(--lavender-mist);
}

label, legend {
    display: inline-block;
    margin-bottom: .5rem;
    padding-bottom: 0;
}
.form-check,
.form-floating {
    label,
    legend {
        margin-bottom: 0;
    }
}

.bold-form-labels {
    label,
    legend {
        font-weight: bold;
    }
    /* Keep labels for checkboxes/radios and floating labels normal */
    .form-check,
    .form-floating {
        label,
        legend {
            font-weight: normal;
        }
    }
}

/**
 * Smaller spacing for Bootstrap's floating form fields
 */
.small-spacing-form .form-floating {
    > .form-control,
    > .form-control-plaintext,
    > .form-select {
        height: calc(2.5rem + calc(var(--bs-border-width) * 2));
        min-height: calc(2.5rem + calc(var(--bs-border-width) * 2));
        line-height: 1.25
    }

    > label,
    > .form-control,
    > .form-control-plaintext {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    > .form-control-plaintext:focus,
    > .form-control-plaintext:not(:placeholder-shown),
    > .form-control:focus,
    > .form-control:not(:placeholder-shown),
    > .form-control-plaintext:-webkit-autofill,
    > .form-control:-webkit-autofill,
    > .form-select {
        padding-top: 1rem;
        padding-bottom: .25rem;
    }

    > .form-control-plaintext ~ label,
    > .form-control:focus ~ label,
    > .form-control:not(:placeholder-shown) ~ label,
    > .form-select ~ label,
    > .form-control:-webkit-autofill ~ label {
        transform: scale(.8) translateY(-.6rem) translateX(.15rem)
    }

    > textarea:focus ~ label::after,
    > textarea:not(:placeholder-shown) ~ label::after {
        inset: calc(.5rem + calc(var(--bs-border-width) * 2)) 0.375rem;
        height: 1.25em;
    }
}

.char-input {
    padding-left: 1ch;
    padding-right: 1ch;
    width: auto;
    text-align: center;
}