/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
@import 'variables/_colors.less';
@import '_account-saved-payments.less';

//
//  3D Secure Container
//  ---------------------------------------------

& when (@media-common =true) {

    .braintree-three-d-modal {
        .lib-vendor-prefix-display();
        align-items: center;
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        visibility: visible;
        width: 100vw;
        z-index: @color-black;
    }

    .braintree-three-d-modal .bt-modal-frame {
        background-color: @color-white;
        border-radius: 6px;
        height: 420px;
        margin: auto;
        width: 440px;
        z-index: 2;
    }

    .braintree-three-d-modal .bt-modal-body {
        background-color: @color-white;
        border: 1px solid lightgray;
        height: 380px;
        margin: 20px;
    }

    .braintree-three-d-modal .bt-mask {
        background-color: @color-black;
        height: 100%;
        left: 0;
        opacity: 0.75;
        position: absolute;
        top: 0;
        width: 100%;
    }

    //
    //  Apple Pay button
    //  ---------------------------------------------

    .braintree-applepay-container-product {
        display: inline-block;

        .braintree-apple-pay-button {
            margin: 0;
            margin-bottom: 15px;
            padding: 10px 0;
        }
    }

    .braintree-apple-pay-button {
        -apple-pay-button-type: plain;
        -webkit-appearance: -apple-pay-button;
        background-color: @color-black;
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 100% ~'calc(60% + 2px)';
        border-radius: 5px;
        cursor: pointer;
        display: block;
        height: 40px;
        min-height: 40px;
        margin: 20px auto;
        transition: background-color .15s;
    }

    .braintree-applepay-minicart.minicart,
    .braintree-applepay-minicart.cart {
        .braintree-apple-pay-button {
            width: 100%;
        }
    }

    //
    //  PP Credit Calculator
    //  ---------------------------------------------

    .ppcredit-summary {
        background: linear-gradient(to right, @braintree_color-ppcredit-light, braintree_color-ppcredit-dark);
        color: @color-white;
        margin: 10px 0;
        padding: 15px;
        text-align: center;
    }

    .ppcreditcalc-container {
        background: @color-white;
        border: 1px solid @braintree_color-ppcredit-grey;
    }

    .ppcreditcalc-header {
        background: @color-white;
        padding: 15px;
    }

    .ppcreditcalc-legal {
        background-color: @color-gray-darken0;
        border-top: 1px solid @braintree_color-ppcredit-grey;
        font-size: 1.2rem;
        line-height: 2rem;
        padding: 15px;
    }

    .ppcreditcalc-instalments {
        background-color: @color-gray-darken0;
        border-bottom: 1px solid @braintree_color-ppcredit-grey;
        border-top: 1px solid @braintree_color-ppcredit-grey;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ppcreditcalc-instalments li {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .ppcreditcalc-instalments-term {
        color: @color-black;
        display: block;
        padding: 10px 15px;
    }

    .ppcreditcalc-instalments-term:hover {
        background: braintree_color-ppcredit-light;
        color: @color-white;
        text-decoration: none;
    }

    .ppcreditcalc-instalments-term.active {
        background: braintree_color-ppcredit-dark;
        color: @color-white;
    }

    .ppcreditcalc-instalment-summary {
        padding: 15px;

        dl {
            margin: 0;
        }

        dt {
            display: inline-block;
            width: 50%;
        }

        dd {
            display: inline-block;
        }
    }

    //
    //  CC FORM
    //  ---------------------------------------------

    #braintree_expirationDate {
        width: 90px;
    }

    //
    //  Google Pay
    //  ---------------------------------------------

    button.braintree-googlepay-button {
        background-origin: content-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        border: 0;
        border-radius: 4px;
        box-shadow: rgba(60, 64, 67, 0.3) 0 1px 1px 0, rgba(60, 64, 67, 0.15) 0 1px 3px 1px;
        cursor: pointer;
        height: 40px;
        min-height: 40px;
        padding: 11px 24px;
    }

    button.braintree-googlepay-button.black {
        background-color: @color-black;
        box-shadow: none;
        padding: 12px 24px @indent__s;
    }

    button.braintree-googlepay-button.white {
        background-color: @color-white;
    }

    button.braintree-googlepay-button.short {
        min-width: 90px;
        width: 160px;
    }

    button.braintree-googlepay-button.black.short {
        background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
    }

    button.braintree-googlepay-button.white.short {
        background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
    }

    button.braintree-googlepay-button.black:active {
        background-color: @braintree_color-gpay-black__active__background;
    }

    button.braintree-googlepay-button.black:hover {
        background-color: @braintree_color-gpay-black__hover__background;
    }

    button.braintree-googlepay-button.white:active {
        background-color: @color-white;
    }

    button.braintree-googlepay-button.white:focus {
        box-shadow: @braintree_color-gpay-white__focus__shadow 0 1px 1px 0, @braintree_color-gpay-white__focus__shadow 0 1px 3px;
    }

    button.braintree-googlepay-button.white:hover {
        background-color: @braintree_color-gpay-white__hover__background;
    }

    button.braintree-googlepay-button.long {
        width: 100%;
    }

    button.braintree-googlepay-button.white.long {
        background-image: url(https://www.gstatic.com/instantbuy/svg/light/en.svg);
    }

    button.braintree-googlepay-button.black.long {
        background-image: url(https://www.gstatic.com/instantbuy/svg/dark/en.svg);
    }

    .googlepay-minicart-logo {
        text-align: center;
    }

    .checkout-payment-method .credit-card-types.braintree-credit-card-types img {
        -webkit-filter: none;
        -webkit-transition: none;
        width: 30px;
    }

    .braintree-card-control {
        position: relative;
    }

    .braintree-credit-card-selected {
        left: @indent__s;
        position: absolute;
        z-index: 10;
    }

    .braintree-paypal-logo.oneclick-container {
        width: 100%;
    }

    #payment_form_braintree_ach_direct_debit {
        .field>.fields {
            .field {
                .label {
                    font-weight: @font-weight__semibold;
                }

                &.required>.label:after {
                    color: @color-red10;
                    content: '*';
                    .lib-font-size(18px);
                    margin: 0 0 0 5px;
                }

                .control {
                    margin: @indent__s @indent__s 0 0;

                    input[type='text']::placeholder,
                    input[type='number']::placeholder {
                        color: lightgrey;
                    }
                }
            }
        }
    }

    #payment-method-braintree-lpm {
        .primary {
            width: 100%;

            .action {
                margin-bottom: 12px;
                width: 100%;

                img {
                    height: 40px;
                }
            }
        }
    }

    #payment-method-braintree-applepay {
        #braintree_applepay_enable_vault {
            padding-top: 20px;
        }
    }

    #payment-method-braintree-cc-vault,
    #payment-method-braintree-applepay-vault {
        .field {
            &.required {
                .label {
                    font-weight: @font-weight__semibold;

                    &:after {
                        content: '*';
                        color: @color-red10;
                        .lib-font-size(18px);
                        margin: 0 0 0 5px;
                    }
                }
            }

            .hosted-control {
                background: @color-white;
                background-clip: padding-box;
                border: 1px solid @color-gray76;
                border-radius: 1px;
                box-sizing: border-box;
                font-family: @font-family__base;
                .lib-font-size(14px);
                height: 32px;
                padding: 0 9px;
                position: relative;
                vertical-align: baseline;
                width: 5rem;

                &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused)~.hosted-error {
                    height: auto;
                    opacity: 1;
                }
            }

            .hosted-error {
                clear: both;
                color: @color-red10;
                .lib-font-size(12px);
                height: 0;
                margin-top: 7px;
                opacity: 0;
            }
        }
    }

    #braintree-applepay-checkout-btn,
    #braintree-google-checkout-btn {
        width: 240px;
    }

    //
    //  Paypal
    //  ---------------------------------------------

    .braintree-paypal-fieldset {
        display: none;
    }

    .braintree-paypal-buttons,
    .braintree-paypal-vault {
        margin-top: @indent__base;
    }

    //
    //  Payment Method Braintree
    //  ---------------------------------------------

    .payment-method-braintree {
        .hosted-control {
            border: 1px solid @color-gray76;
            height: 32px;
            max-width: 300px;
            padding: 8px 15px;

            &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused)~.hosted-error {
                height: auto;
                opacity: 1;
            }
        }

        .hosted-error {
            clear: both;
            color: @color-red10;
            .lib-font-size(12px);
            height: 0;
            margin-top: 7px;
            opacity: 0;
        }
    }

    .payment-method-braintree .cvv {
        max-width: 200px;
        position: relative;

        .field-tooltip {
            right: @indent__l;
            top: @indent__s;
        }
    }

    #braintree_cc_number {
        padding-left: 68px;
    }

    .braintree-express-payments {
        display: flex;
        flex-wrap: wrap;

        >div {
            display: flex;
            flex-wrap: wrap;
            gap: @indent__s;
        }

        span {
            display: block;
            font-size: 18px;
            margin: @indent__base 0;

            &.express-payment-title {
                width: 100%;
            }

            &.express-payment-subtitle {
                align-items: center;
                display: flex;
                position: relative;
                width: 100%;

                >span {
                    background: @page__background-color;
                    display: block;
                    margin: 0 auto;
                    padding: 0 @indent__xs;
                }

                &:before {
                    background: @color-gray80;
                    content: '';
                    display: block;
                    height: 1px;
                    position: absolute;
                    width: 100%;
                    z-index: -1;
                }
            }
        }

        >div>div {
            width: 240px;
        }

        .braintree {

            &-googlepay-button,
            &-apple-pay-button {
                margin: 0;
                min-height: 30px;
            }

            &-googlepay-button {
                height: 35px;
            }

            &-apple-pay-button {
                height: 35px;
            }
        }
    }

    .paypal-braintree-paylater-message-container {
        &-pdp {
            padding: 0 10px 10px;

            .page-product-bundle,
            .page-product-giftcard & {
                padding: 0 0 10px;
            }
        }

        &-cart {
            padding: 0 15px;
        }
    }
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
    .braintree-three-d-modal .bt-modal-frame {
        width: 100%;
    }
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
    .braintree-applepay-container-product {
        display: block;

        .braintree-apple-pay-button {
            width: 100%;
        }
    }

    div.braintree-express-payments {
        >div>div {
            width: 100%;
        }

        .braintree {
            &-googlepay-button.long {
                height: 45px;
                width: 100%;
            }

            &-apple-pay-button {
                height: 45px;
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__m) {
    .braintree-express-paylater-message-container {
        order: 1;
    }

    .paypal-braintree-paylater-message-container {
        &-pdp {
            padding: 0 0 10px;
        }

        &-cart {
            padding: 0;
        }
    }
}