.cf-checkout-input {
    margin-bottom: var(--cf-checkout-input--margin-bottom, var(--cf-spacing-small));
}

.cf-checkout-input-field {
    &:not(.cf-checkout-radio-field__input):not(.cf-checkout-checkbox-field__input) {
        width: 100%;
        box-sizing: border-box;
        border-color: var(--cf-checkout-input-field--border-color, var(--cf-color-border));
    }

    &:focus {
        outline: 0;
        --cf-checkout-input-field--border-color: var(--cf-color-focus);
    }

    &--invalid {
        --cf-checkout-input-field--border-color: var(--cf-color-error);
    }

    &--valid {
        --cf-checkout-input-field--border-color: var(--cf-color-success);
    }

    &--hidden {
        display: none;
    }
}

.cf-checkout-radio-field {
    display: flex;
    align-items: flex-start;

    &__input {
        margin-inline-start: 0;
        margin-inline-end: var(--cf-spacing-tiny);
    }

    &__label {
        margin-inline-end: var(--cf-checkout-radio-field__label--margin-inline-end, var(--cf-spacing));
    }
}

.cf-checkout-checkbox-field {
    display: flex;
    align-items: flex-start;

    &__input {
        margin-inline-start: 0;
        margin-inline-end: var(--cf-spacing-tiny);
    }

    &__label {
        color: var(--cf-checkout-checkbox-field__label--color);
        margin-inline-end: var(--cf-spacing);
    }
}

.cf-checkout-input__error-message {
    display: block;
    color: var(--cf-color-error);
    width: 100%;
    padding: var(--cf-spacing-tiny) 0 0;
    font-size: var(--cf-font-size-small);
}