// Common
// (for styles used in both mobile and desktop views)
& when (@media-common = true) {

    .checkout-index-index {
        .opc-wrapper {
            .opc-wrapper {
                .checkout-shipping-address {
                    background: #fff;
                    padding: 30px 20px;
                    border-top-right-radius: 30px;

                    .step-title {
                        font-size: 18px;
                        background: #004472;
                        color: #fff;
                        padding: 10px;
                        font-weight: 700;
                        border-top-right-radius: 10px;

                        &:before {
                            background: url('@{baseDir}SEL_LumaCheckout/images/shipping-title-icon.png');

                        }
                    }
                }
            }

            #shipping-new-address-form {
                > .field[name="shippingAddress.custom_attributes.kl_email_consent"] {
                    -ms-flex: 0 0 100%;
                    flex: 0 0 100%;
                    max-width: 100%;
                    line-height: 1;
                    accent-color: #004472;

                    input[type="checkbox"] {
                        width: 15px;
                        height: 15px;
                        float: left;
                        margin-top: -3px;
                    }
                }

                > .field.street {
                    legend {
                        display: none;
                    }

                    > .control > .field label {
                        position: relative;
                        bottom: 5px;
                        margin-bottom: 5px;
                    }
                }
            }
        }
    }
}

// shipping methods

@media (max-width: 769px) {
    form.methods-shipping .actions-toolbar > .primary:last-child {
        display: inline-block;
    }
}

& when (@media-common = true) {
    .checkout-index-index {
        form.methods-shipping {
            .actions-toolbar {
                .action.primary {
                    background: #004472;
                    border-radius: 3px;
                    border: 1px solid #004472;
                    font-family: 'Inter', sans-serif;
                    box-shadow: 0 4px 10px 0 rgba(134, 108, 70, 0.15);

                    &:focus{
                        background-color: #F8F6F1;
                        color: #004472;
                        border: 1px solid #004472;
                        box-shadow: none;
                    }
                    &:active{
                        background-color: #F8F6F1;
                        color: #004472;
                        border: 1px solid #004472;
                        box-shadow: none;
                    }
                }
            }
        }
    }
}

//
//  Common : radio button style on shipping-step
//  _____________________________________________
& when (@media-common = true) {
    .checkout-index-index {
        .table-checkout-shipping-method tbody td input[type='radio'] {
            margin: 4px 5px 0 0;
            accent-color: #004472;
        }

        #customer-email-fieldset {
            .actions-toolbar {
                > .primary {
                    .action.primary {
                        background: #004472;
                        border: 1px solid #004472;
                        color: #ffffff;
                        cursor: pointer;
                        display: inline-block;
                        font-weight: 600;
                        padding: 7px 15px;
                        font-size: 1.4rem;
                    }
                }
            }
        }
    }
}
