/**
 * Copyright Â© 2021 O2TI. All rights reserved.
 * @author  Bruno Elisei <brunoelisei@o2ti.com>
 * See LICENSE.txt for license details.
 */

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .full-checkout {
        .checkout-payment-method {
            .payment-option {
                &._active {
                    .payment-option-title {
                        .action-toggle {
                            &::after {
                                content: @icon-up;
                            }
                        }
                    }
                }

                &._collapsible {
                    .payment-option-title {
                        cursor: pointer;
                    }

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

            .payment-option-title {
                .lib-css(border-top, @theme-full-checkout-payment-option-title__border);
                .lib-css(padding, @theme-full-checkout-payment-option-title__padding 0);

                .action-toggle {
                    .lib-css(color, @theme-full-checkout-payment-option-title__color);
                    .lib-icon-font(
                        @icon-down,
                        @_icon-font-size: @theme-full-checkout-payment-option-title-icon__font-size,
                        @_icon-font-line-height: @theme-full-checkout-payment-option-title-icon__line-height,
                        @_icon-font-color: @theme-full-checkout-payment-option-title-icon__color,
                        @_icon-font-color-hover: @theme-full-checkout-payment-option-title-icon__hover__color,
                        @_icon-font-color-active: @theme-full-checkout-payment-option-title-icon__color,
                        @_icon-font-margin: @theme-full-checkout-payment-option-title-icon__margin,
                        @_icon-font-position: after
                    );
                }
            }

            .payment-option-content {
                .lib-css(padding, @theme-full-checkout-payment-method-content__padding);

                &:extend(.abs-discount-code all);

                .primary {
                    .action {
                        &.action-apply {
                            margin-right: 0;
                        }
                    }
                }
            }

            .payment-option-inner {
                margin: 0 0 @indent__base;
            }

            .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;
                    }
                }

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

                > .field.cvv {
                    > .control {
                        display: inline-block;
                        padding-right: @indent__base;
                    }
                }

                .cvv {
                    .label {
                        display: block;
                    }

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

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

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .full-checkout {
        .checkout-payment-method {
            .payment-option {
                .lib-css(margin, 0 -(@theme-full-checkout-payment-option-title-mobile__padding));

                .payment-option-title {
                    .lib-css(padding, @theme-full-checkout-payment-option-title-mobile__padding);
                }

                .payment-option-content {
                    .lib-css(padding, 0 @theme-full-checkout-payment-option-title-mobile__padding @indent__base);
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .full-checkout {
        .checkout-payment-method {
            .theme-full-checkout-payment-additional {
                display: none;
            }

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