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

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .body-full-checkout {
        .checkout-container {
            .opc-wrapper {

                //
                //  Shipping Address
                //  ---------------------------------------------

                .form-login,
                .form-shipping-address {
                    .lib-css(margin-top, unset);
                    .lib-css(margin-bottom, @theme-full-checkout-shipping-address__margin-top);

                    .fieldset {
                        .field {
                            .label {
                                font-weight: @font-weight__regular;
                            }
                        }

                        .note {
                            font-size: @font-size__base;
                            margin-top: @indent__s;
                        }
                    }
                }
                .form-login {
                    .fieldset {
                        &.hidden-fields {
                            margin: 0;
                            .actions-toolbar {
                                margin-left: @indent__xs;
                                margin-right: @indent__xs;
                            }
                        }
                    }
                }
                .shipping-address-items {
                    display: @theme-full-checkout-shipping-item__display;
                    font-size: 0;
                    grid-column-gap: @theme-full-checkout-shipping-item__grid-column-gap;
                    grid-row-gap: @theme-full-checkout-shipping-item__grid-row-gap;
                    grid-template-columns: @theme-full-checkout-shipping-item__grid-template-columns;
                    margin-bottom: @theme-full-checkout-shipping-items_margin-bottom;
                }

                .shipping-address-item {
                    &:extend(.abs-add-box-sizing all);
                    .lib-css(border, @theme-full-checkout-shipping-item__border);
                    .lib-css(border-radius, @theme-full-checkout__border-radius);
                    .lib-css(font-size, @font-size__base);
                    .lib-css(line-height, @theme-full-checkout-shipping-item__line-height);
                    .lib-css(margin, @theme-full-checkout-shipping-item__margin);
                    .lib-css(padding, @theme-full-checkout-shipping-item__padding);
                    .lib-css(transition, @theme-full-checkout-shipping-item__transition);
                    .lib-css(width, 100%);

                    display: inline-block;
                    position: relative;
                    vertical-align: top;
                    word-wrap: break-word;

                    &.selected-item {
                        .lib-css(border-color, @theme-full-checkout-shipping-item__active__border-color);

                        &::after {
                            .lib-css(background, @theme-full-checkout-shipping-item-icon__background-color);
                            .lib-css(color, @theme-full-checkout-shipping-item-icon__color);
                            .lib-css(content, @theme-full-checkout-shipping-item-icon__content);
                            .lib-css(font-family, @icons__font-name);
                            .lib-css(height, @theme-full-checkout-shipping-item-icon__selected__height);
                            .lib-css(width, @theme-full-checkout-shipping-item-icon__selected__width);

                            font-size: 19px;
                            line-height: 21px;
                            padding-top: 2px;
                            position: absolute;
                            right: 0;
                            text-align: center;
                            top: 0;
                        }

                        .action-select-shipping-item {
                            &:extend(.abs-no-display-s all);

                            visibility: hidden;
                        }
                    }
                }

                .field {
                    &.addresses {
                        &:extend(.abs-add-clearfix all);
                    }
                }

                .action-show-popup {
                    margin: 0 0 @indent__base;

                    > span {
                        &::before {
                            content: '+';
                            padding-right: @indent__xs;
                        }
                    }
                }

                .action-select-shipping-item {
                    float: right;
                    margin: @indent__base 0 0;
                }

                .edit-address-link {
                    &:extend(.abs-action-button-as-link all);

                    display: block;
                    float: left;
                    margin: 26px 5px 0 0;
                }
            }
        }
        //
        //  Shipping Methods
        //  ---------------------------------------------
        .full-checkout-shipping-methods {
            .lib-css(margin-bottom, @theme-full-checkout-step-content-mobile__margin-s);

            .shipping-information-method-options {
                .lib-css(background-color, @theme-full-checkout-step-content-mobile__background);
                .lib-css(cursor, pointer);

                border-left: @theme-full-checkout__border;
                border-right: @theme-full-checkout__border;

                &:first-child {
                    border-top: @theme-full-checkout__border;
                    border-top-left-radius: @theme-full-checkout__border-radius;
                    border-top-right-radius: @theme-full-checkout__border-radius;
                }

                &:last-child {
                    border-bottom: @theme-full-checkout__border;
                    border-bottom-left-radius: @theme-full-checkout__border-radius;
                    border-bottom-right-radius: @theme-full-checkout__border-radius;

                    .shipping-information-method-option {
                        border-bottom: unset;
                    }
                }

                .shipping-information-method {
                    &-option {
                        border-bottom: @theme-full-checkout__border;
                        .lib-css(padding, @theme-full-checkout-payment-method-title-mobile__padding);

                        display: table;
                    }

                    &-input {
                        display: table-cell;
                        vertical-align: middle;
                        width: 1%;
                    }

                    &-title {
                        display: table-cell;
                        padding-left: @indent__s;
                        width: 98%;

                        .shipping-carrier-title {
                            .lib-font-size(1.2rem);
                        }

                        .shipping-method-title {
                            .lib-font-size(1.6rem);
                        }
                    }

                    &-price {
                        display: table-cell;
                        font-weight: @font-weight__semibold;
                        vertical-align: middle;
                        width: 1%;
                    }
                }
            }
        }

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

            .no-quotes-block {
                margin: @indent__base 0;
            }
        }

        .methods-shipping {
            .lib-css(padding-top, unset);

            .actions-toolbar {
                .action {
                    &.primary {
                        &:extend(.abs-button-l all);

                        margin: @indent__base 0 0;
                    }
                }
            }
        }
    }
}

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    .body-full-checkout {
        .checkout-container {
            .opc-wrapper {
                .form-login,
                .form-shipping-address,
                .methods-shipping {
                    .lib-css(background, @theme-full-checkout-step-content-mobile__background);
                    .lib-css(margin, @theme-full-checkout-step-content-mobile__margin);
                    .lib-css(padding, 0 @theme-full-checkout-step-content-mobile__margin-s);
                    .lib-css(padding-top, unset);
                }

                .form-login {
                    + .form-shipping-address {
                        .lib-css(margin-top, -(@theme-full-checkout-step-content-mobile__margin-s));
                    }
                }

                .shipping-address-item {
                    .lib-css(margin, @theme-full-checkout-shipping-item-mobile__margin);
                    .lib-css(padding, @theme-full-checkout-shipping-item-mobile__padding);

                    &.selected-item {
                        .lib-css(padding, @theme-full-checkout-shipping-item-mobile__active__padding);

                        .edit-address-link {
                            .lib-css(right, @theme-full-checkout-shipping-item-icon__selected__width + @indent__s);
                        }
                    }
                }

                .action-select-shipping-item {
                    float: none;
                    margin-top: @indent__s;
                    width: 100%;
                }

                .action-show-popup {
                    width: 100%;
                }

                .edit-address-link {
                    margin: 0;
                    position: absolute;
                    right: 0;
                    top: 5px;
                }
            }
        }
    }
}

//
//  Tablet
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .body-full-checkout {
        .checkout-shipping-method {
            .actions-toolbar {
                > .primary {
                    float: right;
                }

                .action {
                    &.primary {
                        margin: 0;

                        &.button {
                            margin-top: 2px;
                        }
                    }
                }
            }
        }

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

                .form-login,
                .form-shipping-address {
                    .lib-css(margin-top, unset);
                    .lib-css(max-width, @theme-full-checkout-shipping-address__max-width);
                }

                .form-login {
                    .lib-css(border-bottom, @theme-full-checkout__border);

                    padding-bottom: @indent__base;
                }
            }
        }
    }
}

//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .body-full-checkout {
        .checkout-container {
            .opc-wrapper {
                .form-login,
                .form-shipping-address {
                    .lib-css(margin-top, unset);
                    .lib-css(max-width, @theme-full-checkout-shipping-address__max-width);
                }

                .shipping-address-items {
                    .lib-css(grid-template-columns, @theme-full-checkout-shipping-item-desktop__grid-template-columns);
                }

                .shipping-address-item {

                    &::before {
                        .lib-css(background, @theme-full-checkout-shipping-item-before__border-color);
                        .lib-css(height, @theme-full-checkout-shipping-item-before__height);

                        content: '';
                        left: 0;
                        position: absolute;
                        top: 0;
                        width: 1px;
                    }

                    &:nth-child(2n + 1) {
                        &::before {
                            display: none;
                        }
                    }

                    &.selected-item {
                        &::before {
                            display: none;
                        }

                        + .shipping-address-item {
                            &::before {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
