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

//
//  Variables
//  _____________________________________________

@checkout-payment-option-title__border: @checkout-payment-method-title__border;
@checkout-payment-option-title__color: @link__color;
@checkout-payment-option-title__padding: @checkout-payment-method-title__padding;
@checkout-payment-option-title-mobile__padding: @checkout-payment-method-title-mobile__padding;

@checkout-payment-option-title-icon__font-size: 32px;
@checkout-payment-option-title-icon__line-height: 16px;
@checkout-payment-option-title-icon__margin: 0;
@checkout-payment-option-title-icon__color: @minicart-icons-color;
@checkout-payment-option-title-icon__hover__color: @primary__color;

@checkout-payment-option-content__padding__xl: @checkout-payment-method-content__padding__xl;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .checkout-payment-method {
        .payment-option {            
            &._active {
                .payment-option-title {
                    .lib-icon-font-symbol(
                    @_icon-font-content: '\74',
                    @_icon-font-position: after
                    );
                }                
            }

            &._collapsible {
                &:extend(.abs-discount-block all);
                .payment-option-title {
                    cursor: pointer;
                }

                .payment-option-content {
                    display: none;
                }
            }
        }

        .payment-option-title {
            cursor: pointer;
            font-weight: @font-weight__bold;
            .lib-icon-font(
                @_icon-font-content: '\75',
                @_icon-font: 'Athlete2',
                @_icon-font-line-height: 24px,
                @_icon-font-color: #000,
                @_icon-font-color-hover: #fff,
                @_icon-font-size: 12px,
                @_icon-font-text-hide: false,
                @_icon-font-position: after,
                @_icon-font-display: block
            );
            margin-bottom: 0;
            overflow: hidden;
            .lib-css(padding, 30px 30px 30px 0);
            position: relative;
            span{
                .lib-font-size(18);
                .at-headings();
                font-weight:800;
            }
            &:after {
                position: absolute;
                right: 0;
                top: 28px;
                width: 24px;
                height: 24px;
                transition: all 600ms ease-in-out;
            }

            &:hover{
                &:after {
                    transition: all 10ms ease-in-out;
                    background: #000;
                }                        
            }
            //.lib-css(border-top, @checkout-payment-option-title__border);
            //.lib-css(padding, @checkout-payment-option-title__padding 0);

            /*.action-toggle {
                .lib-css(color, @checkout-payment-option-title__color);
                .lib-icon-font(
                    @icon-down,
                    @_icon-font-size: @checkout-payment-option-title-icon__font-size,
                    @_icon-font-line-height: @checkout-payment-option-title-icon__line-height,
                    @_icon-font-color: @checkout-payment-option-title-icon__color,
                    @_icon-font-color-hover: @checkout-payment-option-title-icon__hover__color,
                    @_icon-font-color-active: @checkout-payment-option-title-icon__color,
                    @_icon-font-margin: @checkout-payment-option-title-icon__margin,
                    @_icon-font-position: after
                );
            }*/
        }
/*
        .payment-option-content {
            .lib-css(padding, 0 0 @indent__base @checkout-payment-option-content__padding__xl);
        }*/
/*
        .payment-option-inner {
            margin: 0 0 @indent__base;
        }*/

        .credit-card-types {
            padding: 0;

            .item {
                display: inline-block;
                list-style: none;
                margin: 0 @indent__xs 0 0;
                vertical-align: top;

                &._active {
                    font-weight: @font-weight__bold;

                    img {
                        -webkit-filter: grayscale(0%);
                    }
                }

                &._inactive {
                    opacity: .4;
                }

                span {
                    display: inline-block;
                    padding-top: 6px;
                    vertical-align: top;
                }
            }

            img {
                -webkit-filter: grayscale(100%); // For Webkit browsers
                -webkit-transition: all .6s ease; // Fade to color for Chrome and Safari
            }
        }

        .ccard {
            .legend {
                &:extend(.abs-visually-hidden all);
            }

            .fields {
                > .year {
                    padding-left: @indent__xs;
                }

                .select {
                    padding-left: @indent__xs;
                    padding-right: @indent__xs;
                }
            }

            .month {
                .select {
                    width: 140px;
                }
            }

            .year {
                .select {
                    width: 80px;
                }
            }

            .number {
                .input-text {
                    width: 225px;
                }
            }

            > .field.cvv {
                > .control {
                    padding-right: @indent__base;
                    width: auto;
                }
            }

            .cvv {
                .input-text {
                    width: 55px;
                }
            }

            &.fieldset {
                > .field {
                    .fields.group.group-2 {
                        .field {
                            width: auto !important;
                        }
                    }
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .checkout-payment-method {


        .payment-option-content {
            .payment-option-inner {
                + .actions-toolbar {
                    margin-left: 0;
                }
            }
        }
    }
}
