@forward './heading/checkout-heading.scss';
@forward './contact/checkout-contact.scss';
@forward './delivery/delivery-step.scss';
@forward './payment/payment-step.scss';
@forward './sections/address-selection.scss';

.cf-checkout-steps {
    background-color: var(--cf-checkout--background-color);
}

.cf-checkout-steps__error {
    display: flex;
    align-items: center;
    color: var(--cf-color-error);
    margin: var(--cf-checkout-general-error--margin, 0 0 var(--cf-spacing-large));
    font-weight: var(--cf-checkout-general-error--font-weight, bold);
    &::before {
        content: var(--cf-checkout-general-error-before--content, "!");
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--cf-color-text-inverted);
        background-color: var(--cf-color-error);
        border-radius: 35px;
        width: 35px;
        height: 35px;
        margin-inline-end: var(--cf-spacing-small);
    }    
}

.cf-checkout-steps__heading {
    margin-bottom: var(--cf-checkout-step-heading--margin-bottom, var(--cf-spacing));
}

.cf-checkout-steps__heading-title {
    margin-block-end: var(--cf-spacing-tiny);
    &:empty {
        display: none;
    }
}

.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);
}

.cf-indicator {
    color: var(--cf-color-error);
}