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

//
//  Common
//  _____________________________________________

//  This rule has a specificity of [0,1,1]. I is override [0,1,0]
dd.admin__payment-method-wrapper {
    width: auto;
}

.payment-services-hosted-fields-form {
    @on-hover-grey: #757575;
    @hover-grey: #bbb;

    .card-container {
        display: none;
        .admin__field {
            margin-top: 20px;
        }
        .grid-container {
            align-items: end;
            display: grid;
            grid-gap: 10px;
            grid-template-areas: 'card-number-area card-number-area' 'expiration-date-area cvv-number-area';
            max-width: 400px;
            .display-lock {
                align-items: center;
                display: flex;
                flex-direction: row-reverse;
            }
            .card-number-area {
                grid-area: card-number-area;
                .card-field {
                    align-items: center;
                    display: grid;
                    grid-template-areas: 'credit-card-input-area lock-icon-area';
                    grid-template-columns: 1fr auto;
                    height: 32px;
                    .card-field-icon {
                        grid-area: credit-card-input-area;
                        height: inherit;
                    }
                    .lock-icon {
                        &:hover::before {
                            color: @on-hover-grey;
                        }
                        &:before {
                            color: @hover-grey;
                            content: '\e61b';
                            display: inline-block;
                            font-family: 'Admin Icons';
                            font-size: 18px;
                            font-weight: normal;
                            line-height: inherit;
                            overflow: hidden;
                            speak: none;
                            text-align: center;
                            vertical-align: middle;
                        }
                    }
                }
            }
            .expiration-date-area {
                grid-area: expiration-date-area;
            }
            .cvv-area {
                grid-area: cvv-number-area;
            }
        }
        .card-field {
            border: 1px solid @color-gray76;
            box-sizing: content-box;
            height: 32px;
            padding: 8px 15px;
        }
    }
    .message {
        display: none;
    }
}