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

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .checkout-loader {
        width: 100%;
    }

    .body-full-checkout {
        .checkout-container {
            &:extend(.abs-add-clearfix all);
            .lib-css(margin, 0);

            .fieldset {
                &:last-child {
                    .lib-css(margin-bottom, unset);
                }
            }
        }

        .checkout-header {
            &:extend(.abs-add-clearfix all);
            .lib-css(max-width, @theme-full-checkout-step-identification__max-width);

            margin-top: @indent__s;

            .logo-checkout {
                width: 100%;
                text-align: @theme-full-checkout-header-logo-mobile__text-align;

                .img-logo-checkout {
                    max-width: @theme-full-checkout-header-logo-mobile__max-width;
                }
            }
        }

        .opc-wrapper {
            .lib-css(margin, 0 0 @theme-full-checkout-wrapper__margin);

            .opc {
                &:extend(.abs-reset-list all);
            }

            .step-title {
                &:extend(.abs-theme-full-checkout-title-sessions all);
            }

            .step-content {
                margin: 0 0 @indent__xl;
            }
        }

        .nav-sections,
        .nav-toggle {
            display: none;
        }

        .logo {
            margin-left: 0;
        }

        .page-title-wrapper {
            &:extend(.abs-visually-hidden all);
        }
    }

    .checkout-onepage-success {
        &:extend(.abs-add-clearfix all);

        .page-main {
            .lib-icon-font(@icon-checkmark, @_icon-font-position: before, @_icon-font-size: 3rem, @_icon-font-color: @color-white, @_icon-font-vertical-align: false);

            &::before {
                width: 50px;
                margin: 0 auto;
                display: block;
                border-radius: 50%;
                height: 50px;
                line-height: 50px;
                margin-top: 40px;
            }
        }

        &.account {
            .column.main {
                background-color: unset;
                box-shadow: unset;
                margin-top: 0;
                padding-left: 0 !important;
                padding-right: 0 !important;
                padding-top: 0 !important;

                .block {
                    margin-bottom: @indent__xl;

                    &-title {
                        margin-bottom: @indent__xl;
                    }

                    .title {
                        font-weight: normal;
                        margin-bottom: 0;
                    }

                    dd {
                        margin-bottom: 0;
                    }
                }

                .print {
                    display: none !important;
                    visibility: hidden;
                }

                .field.theme-full-checkout-fields-floating-label {
                    margin: 0 auto;
                    max-width: 545px;
                }
            }

            .return-status,
            .order-status {
                background-color: @theme__color__secondary;
            }

            .success-heading {
                .block.block-order-details-view {
                    .block-content {
                        align-items: center;
                        display: flex;
                        justify-content: space-between;
                    }
                }
            }

            .order-details-items {
                background-color: @color-white;
            }

            .block-order-details-view .box-title {
                font-weight: @font-weight__light;
                margin-bottom: @indent__base;
            }
        }

        .page-title-wrapper {
            text-align: center;

            .page-title {
                .lib-font-size(1.2rem);

                font-weight: 700;
                margin-right: 0 !important;
            }
        }

        .print {
            display: none !important;
        }

        .checkout-success {
            text-align: center;
        }

        .action {
            margin: 6px;

            &.order {
                .lib-button();
                .lib-button-primary();
            }
        }

        th,
        td {
            &.middle {
                vertical-align: middle;
            }
        }

        .page-main {
            .block {
                &.no-margin-bottom {
                    margin-bottom: 0;
                }
            }
        }

        .order-success {
            &.success-heading,
            &.success-data,
            &.success-items {
                margin-top: @indent__xl;
            }
        }

        table > thead > tr > th,
        table > tbody > tr > th,
        table > tfoot > tr > th,
        table > thead > tr > td,
        table > tbody > tr > td,
        table > tfoot > tr > td {
            padding-left: 0;
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .full-checkout {
        .custom-slide {
            .modal-inner-wrap {
                background-color: @color-white;
            }
        }

        .opc-wrapper {
            .step-title {
                &:extend(.abs-theme-full-checkout-title-sessions all);
            }

            .step-content {
                .lib-css(margin, 0 0 @theme-full-checkout-step-content-mobile__margin-s);
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .body-full-checkout {
        /**
         * @codingStandardsIgnoreStart
         */
        #maincontent {
            margin-left: unset;
            margin-right: unset;
            max-width: unset;
            overflow-x: hidden;
            padding-left: unset;
            padding-right: unset;

            #checkout {
                display: flex;
                flex-direction: row;
                margin: 0 auto;
                max-width: @layout__max-width;
                min-height: 100vh;

                .checkout-header {
                    .logo-checkout {
                        text-align: left;
                    }
                }

                &.checkout-container {
                    .checkout-content {
                        float: left;
                        margin: @indent__xl 0;
                        padding-left: @indent__xl;
                        padding-right: @indent__xl;
                        width: @theme-full-checkout-form__max-width * 1.5;
                        

                        .opc-wrapper {
                            max-width: @theme-full-checkout-form__max-width;
                            padding-right: 0;
                            width: 100%;
                        }

                        .checkout-header {
                            .logo-checkout {
                                text-align: @theme-full-checkout-header-logo-desktop__text-align;

                                .img-logo-checkout {
                                    max-width: @theme-full-checkout-header-logo-desktop__max-width;
                                }
                            }
                        }
                    }

                    .opc-right {
                        float: right;
                        position: relative;
                        width: @theme-full-checkout-item-base__width + @theme-full-checkout-item-base__width;

                        &::after {
                            content: '';
                            display: block;
                            width: 100vw;
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            background: @theme-full-checkout-step-content-mobile-dark__background;
                            z-index: -1;
                            background-position: left top;
                            box-shadow: 1px 0 0 @theme-full-checkout-step-content-mobile-dark__background inset;
                            box-shadow: 1px 0 0 @theme-full-checkout-step-content-mobile-dark__background inset;
                        }

                        .opc-sidebar {
                            float: unset;
                            position: relative;
                            width: 100%;
                        }
                    }
                }
            }
        }
        //  @codingStandardsIgnoreEnd
        .columns {
            .column {
                &.main {
                    padding-bottom: 0;
                }
            }
        }
    }

    .full-checkout {
        .opc-wrapper {
            &:extend(.abs-add-box-sizing-desktop-m all);
            .lib-layout-column(2, 1, @theme-full-checkout-wrapper__columns);

            padding-right: @indent__l;

            .step-title {
                &:extend(.abs-theme-full-checkout-title-sessions all);
            }

            .step-content {
                margin: unset;
            }
        }
    }
}
