@import "../variables";
@import "bootstrap/scss/variables";
@import "checkoutComponents";
@import "bootstrap/scss/mixins/breakpoints";
@import "../components/formFields";
@import "../components/creditCardField";

$checkout-font-weight: 600;

.card.ghost {
    opacity: 0.5;
}

.arrival-time {
    white-space: pre;
}

.billing-address {
    display: block;
}

.checkout-checkbox {
    font-size: 0.875em;
}

.customer-information-block .btn-link {
    color: #{var(--skin-link-color-2)};
    padding: 0;
    vertical-align: baseline;
}

.edit-button,
.btn-show-details,
.btn-add-new {
    color: #{var(--skin-primary-color-1)};
    float: right;
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}

.edit-button {
    border: none;
    padding: 0;
    background: none;
}

.error-message {
    display: none;
}

.next-step-button {
    position: fixed;
    bottom: 0;
    z-index: 3;
    padding-right: 0;
    padding-left: 0;

    @include media-breakpoint-down(xs) {
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

        div {
            padding: $spacer;
        }
    }

    @include media-breakpoint-up(sm) {
        position: static;
        padding-right: 0.938em;
        padding-left: 0.938em;
    }
}

.shipping-methods {
    font-size: 1.125em;
    font-weight: $checkout-font-weight;
}

.shipping-method-option {
    font-size: 0.938em;
}

.shipping-method-pricing {
    font-weight: bolder;
}

.multi-ship .multi-shipping {
    display: block;
}

span.ship-to-name,
span.ship-to-address1,
span.ship-to-address2,
span.ship-to-phone,
span.ship-to-city-st-zip {
    display: block;
}

.data-checkout-stage {
    // Initial states ------------------------
    &[data-checkout-stage] {
        .card.payment-summary,
        .shipping-summary {
            display: none;
        }

        button.place-order {
            display: none;
        }

        button.submit-payment {
            display: none;
        }

        button.submit-shipping {
            display: none;
        }
    }

    // Customer ------------------------------
    &[data-checkout-stage=customer] {
        .card.ghost.customer {
            display: none;
        }

        .card.customer-summary {
            display: none;
        }

        .card.shipping-section {
            display: none;
        }

        .card.payment-form {
            display: none;
        }

        button.submit-customer {
            display: block;
        }
    }

    // Shipping ------------------------------
    &[data-checkout-stage=shipping] {
        .card.customer-section {
            display: none;
        }

        button.submit-customer {
            display: none;
        }

        .card.ghost.customer {
            display: none;
        }

        .card.ghost {
            display: none;
        }

        &.multi-ship .order-product-summary {
            display: none;
        }

        .card.payment-form {
            display: none;
        }

        button.submit-shipping {
            display: block;
        }

        .shipment-selector-block {
            .btn-show-details,
            .btn-add-new {
                border: none;
            }
        }

        [data-address-mode=customer] {
            .shipping-address-block {
                display: none;
            }
        }

        [data-address-mode=shipment] {
            .shipping-address-form {
                display: none;
            }
        }

        [data-address-mode=edit] {
            .shipping-address-block {
                display: none;
            }
        }

        [data-address-mode=new] {
            .btn-show-details,
            .btn-add-new {
                display: none;
            }
        }
    }

    // Payment -------------------------------
    &[data-checkout-stage=payment] {
        button.submit-customer {
            display: none;
        }

        .customer-section,
        .shipping-section,
        .card.ghost {
            display: none;
        }

        .card.payment-form,
        .shipping-summary {
            display: block;
        }

        button.submit-payment {
            display: block;
        }

        .address-selector-block {
            .btn-show-details,
            .btn-add-new {
                border: none;
            }
        }

        [data-address-mode=customer] {
            .billing-address {
                display: none;
            }
        }

        [data-address-mode=shipment] {
            .billing-address {
                display: none;
            }
        }

        [data-address-mode=edit] {
            .billing-address {
                display: none;
            }
        }

        [data-address-mode=new] {
            .btn-show-details,
            .btn-add-new {
                display: none;
            }
        }

        [data-address-mode=details] {
            .btn-show-details,
            .btn-add-new {
                display: none;
            }
        }
    }

    // Place Order -----------------------------
    &[data-checkout-stage=placeOrder] {
        button.submit-customer,
        .customer-section,
        .shipping-section,
        .card.payment-form,
        .card.ghost {
            display: none;
        }

        .card.payment-summary,
        .shipping-summary {
            display: block;
        }

        button.place-order {
            display: block;
        }
    }

    &[data-checkout-stage=submitted] {
        .shipping-form,
        .card.payment-form,
        button.submit-customer,
        .card.ghost {
            display: none;
        }

        .summary-section-label.shipping-addr-label {
            display: none;
        }

        .card.payment-summary,
        .shipping-summary {
            display: block;
        }

        button.place-order {
            display: none;
        }
    }

    option[value=new] {
        display: none;
    }

    h5 > span {
        font-size: 0.8em;
    }
}

[data-customer-type=guest] .single-shipping .shipment-selector-block {
    display: none;
}

.single-shipping .multi-ship-action-buttons {
    display: none;
}

.single-shipping .view-address-block {
    display: none;
}

.btn-show-details {
    padding-top: 0;
}

.multi-ship-address-actions .btn-save-multi-ship {
    margin-left: 10px;
}
