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

//
//  Variables
//  _____________________________________________

@braintree-error__color: @color-apricot;
@braintree-focus__color: @color-blue-pure;
@braintree-success__color: @color-green-apple;

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

.hosted-control {
    height: 3.4rem;
    position: relative;

    &.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-date {
        @distance: 50px;

        float: left;
        margin-bottom: .2rem;
        width: 5rem;

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

            &:after {
                content: '/';
                display: inline;
                padding-bottom: inherit;
                padding-top: inherit;
                position: absolute;
                right: -@distance * (2 / 3.5);
                top: 0;
            }
        }
    }

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

    .icon-type {
        background-image: url('@{baseDir}images/cards.png');
        background-position: -1000px 0;
        background-repeat: no-repeat;
        height: 26px;
        position: absolute;
        right: 5px;
        top: 3px;
        width: 40px;

        &.icon-type-discover {
            background-position: 0 0;
        }

        &.icon-type-visa {
            background-position: 0 -29px;
        }

        &.icon-type-master-card {
            background-position: 0 -58px;
        }

        &.icon-type-maestro {
            background-position: 0 -87px;
        }

        &.icon-type-american-express {
            background-position: 0 -114px;
        }

        &.icon-type-unionpay {
            background-position: 0 -140px;
        }

        &.icon-type-diners-club {
            background-position: 0 -168px;
        }
    }
}

.hosted-error {
    clear: both;
    color: @braintree-error__color;
    height: 0;
    opacity: 0;
}