// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@braintree-input-border__color: @color-gray76;

@braintree-error__color: @message-error__color;
@braintree-focus__color: @theme__color__primary-alt;
@braintree-success__color: @message-success__color;

@braintree-paypal-icon__height: 16px;
@braintree-paypal-icon__width: 16px;
@braintree-paypal-account__padding-right: 50px;
@braintree-paypal-account__padding-vertical: 15px;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .payment-method-braintree {

        .hosted-date-wrap {
            &:extend(.abs-add-clearfix all);
        }

        .hosted-control {
            .lib-form-element-input(@_type: input-text);
            position: relative;
            width: 225px;

            &.braintree-hosted-fields-focused {
                border-color: @braintree-focus__color;
            }

            &.braintree-hosted-fields-invalid:not(.braintree-hosted-fields-focused) {
                border-color: @braintree-error__color;

                & ~ .hosted-error {
                    height: auto;
                    opacity: 1;
                }
            }

            &.braintree-hosted-fields-valid {
                border-color: @braintree-success__color;
            }

            &.hosted-cid {
                width: 5rem;
            }

            &.hosted-date {
                @distance: 50px;

                float: left;
                margin-bottom: 7px;
                width: 6rem;

                &:first-of-type {
                    margin-right: @distance;

                    &:after {
                        content: '/';
                        display: inline;
                        padding-bottom: inherit;
                        padding-top: inherit;
                        position: absolute;
                        right: -@distance / 2;
                        top: 5px;
                    }
                }
            }
        }

        .field-tooltip {
            right: 0;
        }

        .hosted-error {
            clear: both;
            color: @braintree-error__color;
            font-size: 1.2rem;
            height: 0;
            margin-top: 7px;
            opacity: 0;
        }
    }

    .braintree-paypal-logo {
        margin-top: @indent__s;
        text-align: center;
    }

    .braintree-paypal-account {
        padding: @braintree-paypal-account__padding-vertical 0 @braintree-paypal-account__padding-vertical @braintree-paypal-account__padding-right;
        position: relative;

        .lib-icon-image(
            @_icon-image: '@{baseDir}Magento_Braintree/images/paypal-small.png',
            @_icon-image-position: before,
            @_icon-image-width: @braintree-paypal-icon__width,
            @_icon-image-height: @braintree-paypal-icon__height
        );

        &:before {
            left: @braintree-paypal-account__padding-right/2 - @braintree-paypal-icon__width/2;
            margin-top: -@braintree-paypal-icon__height/2;
            position: absolute;
            top: 50%;
        }

        .payment-method-type {
            font-weight: @font-weight__bold;
        }

        .payment-method-description {
            color: @color-gray34;
        }
    }

    .braintree-paypal-fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    .action-braintree-paypal-logo {
        .lib-button-reset();

        img {
            margin: 0;
            width: 114px;
        }
    }

    .payment-method {
        .payment-method-content {
            .actions-toolbar {
                &.braintree-paypal-actions {
                    margin-left: 0;
                }
            }
        }
    }

    //  My Account > Stored Payment Methods
    .account {
        .table {
            .col {
                &.paypal-account {
                    img {
                        vertical-align: middle;
                    }

                    + .actions {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .payment-method-braintree {
        .cvv {
            .field-tooltip {
                left: 6rem;
            }
        }
    }

    .braintree-paypal-account {
        border-color: @color-gray80;
        border-style: solid;
        border-width: 1px 0;
        display: inline-block;
        width: 50%;
    }

    //  My Account > Stored Payment Methods
    .account {
        .table-credit-cards {
            .col {
                &.actions {
                    width: 100px;
                }
            }
        }
    }
}