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

//
//  Variables
//  _____________________________________________

@checkout-shipping-address__max-width: 600px;
@checkout-shipping-address__margin-top: 28px;

@checkout-shipping-item-icon__background-color: @theme-primary-color;
@checkout-shipping-item-icon__color: @color-white;
@checkout-shipping-item-icon__content: @icon-checkmark;

@checkout-shipping-item__border: 2px solid transparent;
@checkout-shipping-item__line-height: 30px;
@checkout-shipping-item__margin: 0 0 @indent__base;
@checkout-shipping-item__padding: @indent__base (@indent__l + 5px) @indent__base @indent__base;
@checkout-shipping-item__transition: .3s border-color;
@checkout-shipping-item__width: 100%/3;
@checkout-shipping-item-tablet__width: 100%/2;
@checkout-shipping-item-mobile__width: 100%;
@checkout-shipping-item__active__border-color: @theme-primary-color;
;

@checkout-shipping-item-icon__selected__height: 27px;
@checkout-shipping-item-icon__selected__width: 29px;

@checkout-shipping-item-mobile__padding: 0 0 15px;
@checkout-shipping-item-mobile__margin: @checkout-shipping-item-mobile__padding;
@checkout-shipping-item-mobile__active__padding: 15px (@indent__l + 5px) 15px 18px;

@checkout-shipping-item-before__border-color: @color-gray80;
@checkout-shipping-item-before__height: calc(~'100% - 20px');

@checkout-shipping-method__border: @checkout-step-title__border;
@checkout-shipping-method__padding: @indent__base;

//
//  Common
//  _____________________________________________

& when (@media-common =true) {

    .opc-wrapper {

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

        .form-login,
        .form-shipping-address {
            .lib-css(margin-top, @checkout-shipping-address__margin-top);
            margin-bottom: @indent__base;

            .fieldset {
                .note {
                    font-size: @font-size__base;
                    margin-top: @indent__s;
                }
            }
        }

        .shipping-address-items {
            font-size: 0;
        }

        .shipping-address-item {
            &:extend(.abs-add-box-sizing all);
            .lib-css(border, @checkout-shipping-item__border);
            .lib-css(line-height, @checkout-shipping-item__line-height);
            .lib-css(margin, @checkout-shipping-item__margin);
            .lib-css(padding, @checkout-shipping-item__padding);
            .lib-css(transition, @checkout-shipping-item__transition);
            .lib-css(width, @checkout-shipping-item-tablet__width);
            display: inline-block;
            font-size: @font-size__base;
            position: relative;
            vertical-align: top;
            word-wrap: break-word;

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

                a {
                    color: @checkout-shipping-item__active__border-color;
                }

                &:after {
                    .lib-css(background, @checkout-shipping-item-icon__background-color);
                    .lib-css(color, @checkout-shipping-item-icon__color);
                    .lib-css(content, @checkout-shipping-item-icon__content);
                    .lib-css(font-family, @icons__font-name);
                    .lib-css(height, @checkout-shipping-item-icon__selected__height);
                    .lib-css(width, @checkout-shipping-item-icon__selected__width);
                    font-size: 27px;
                    line-height: 21px;
                    padding-top: 2px;
                    position: absolute;
                    left: 0;
                    text-align: center;
                    top: 0;
                }
            }
        }

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

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

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

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

        .edit-address-link {
            &:extend(.abs-action-button-as-link all);
            display: block;
            float: right;
            margin: 26px 0 0 5px;
        }
    }

    //
    //  Shipping Methods
    //  ---------------------------------------------

    .checkout-shipping-method {
        .step-title {
            margin-bottom: 25px;
        }

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

    .methods-shipping {
        .actions-toolbar {
            .action {
                &.primary {
                    &:extend(.abs-button-l all);
                    margin: @indent__base 0 0;
                }
            }
        }
    }

    .table-checkout-shipping-method {
        thead {
            th {
                color: #2b2b2b;
                font-weight: 400;
                font-size: 16px;
                text-align: center;
                border: 1px solid #eaeaea;
                vertical-align: middle;
                padding: 14px 30px 11px;
                border-bottom: none;
                width: auto;
            }
        }

        tbody {

            tr {
                td {
                    border: 1px solid #eaeaea;
                    padding: 14px 30px 11px;
                    text-align: center;
                    vertical-align: middle;
                    cursor: pointer;
                    width: auto;

                    &.col-method input {
                        margin: 0 auto;
                        border-color: #2b2b2b !important;
                    }
                }
            }

            .row-error {
                td {
                    border-top: none;
                    padding-bottom: @indent__s;
                    padding-top: 0;
                }
            }
        }
    }

    .checkout-shipping-method {
        .actions-toolbar {
            margin-top: 30px;

            button.button.action.continue.primary {
                min-width: 200px;
                text-align: center;
                padding: 0 40px;
                border: 1px solid #222;
                text-transform: uppercase;
                font-size: 14px;
                letter-spacing: 0.1em;
                color: #fff;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                border-radius: 40px;
                height: 44px;
                font-weight: 600;

                &:hover {
                    border: 1px solid @theme-primary-color;
                    background-color: @theme-primary-color;
                }

                &:focus {
                    border-color: @theme-primary-color;
                }
            }
        }
    }

    .shipping-address-items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;

        .shipping-address-item {
            border: 2px solid var(--thim-mgs-color-03, #ddd);
            margin-bottom: 14px;
            color: #8e8e8e;
            padding: 15px;
            margin: 0;
            width: 100%;
        }

        .action {
            font-size: 13px;
            color: #6c6c6c;
            border: 1px solid #e6e6e6;
            background-color: #fff;
            margin-top: 10px;
            padding: 6px 15px;
            font-weight: 400;
            margin-left: 10px;
            min-width: 120px;
            float: right;
        }
    }

    .checkout-shipping-address {
        >.step-content {
            .action.action-show-popup {
                &:hover {
                    color: #fff;
                    border-color: @theme-primary-color;
                    background-color: @theme-primary-color;
                }

                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -o-border-radius: 0;
                font-size: 13px;
                padding: 9px 28px;
                color: #fff;
                border: 1px solid var(--thim-mgs-color-05);
                margin: 20px 0 0 20px;
                background-color: var(--thim-mgs-color-05);
                font-weight: 600;

                span {
                    &:before {
                        display: none;
                    }
                }
            }
        }
    }

    .opc-payment {
        .payment-methods {
            .payment-method {
                .actions-toolbar {
                    .primary {

                        button.action.action-update,
                        button.action.action-cancel {
                            color: #fff;
                            float: right;
                            margin: 0;
                            border: 1px solid @theme-primary-color;
                            background-color: @theme-primary-color;

                            &:hover {
                                text-decoration: none;
                                background-color: #222;
                                border: 1px solid #222;
                            }
                        }
                    }
                }
            }
        }
    }

    .checkout-payment-method {
        .checkout-billing-address {
            .billing-address-details {
                button.action.action-edit-address {
                    background-color: #222;
                    padding: 9px 35px;
                    color: #fff;
                    box-shadow: none;
                    border: 1px solid #222;
                    border-radius: 40px;
                    font-weight: 600;
                    height: 40px;

                    &:hover {
                        background-color: @theme-primary-color;
                        border-color: @theme-primary-color;
                    }
                }
            }
        }
    }

    form.form-shipping-address {
        .field-error {
            span {
                color: #ff0000;
                font-size: 12px;
                font-weight: 400;
                margin-top: 0;
                font-style: italic;
                padding-top: 5px;
                line-height: 1.4;
            }
        }

        .field._required {
            label.label:after {
                content: "*";
                color: #ff0000;
                margin: 0 2px 0 0;
            }
        }
    }

    .shipping-address-items {
        button.action.action-select-shipping-item {
            color: #222222;
            background-color: #fff;
            border-color: #222222;
            border-width: 2px;
            display: inline-block;
            font-size: 14px;
            line-height: 36px;
            font-weight: 600;
            height: 40px;
            padding: 0;

            &:hover {
                background-color: #222;
                color: #fff;
            }
        }
    }

}

//
//  Mobile
//  _____________________________________________
.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__m) {
    .opc-wrapper {
        form.form.form-shipping-address {
            fieldset.field.street.admin__control-fields {
                padding: 0;
                border: none;
            }
        }

        .table-checkout-shipping-method {
            tbody {
                tr {
                    td {
                        padding: 10px 10px;
                    }
                }
            }

            thead {
                th {
                    display: none;
                }
            }
        }

        .checkout-shipping-address {
            .form-login {
                fieldset {
                    .actions-toolbar {
                        button.action.login.primary {
                            height: 40px;
                            font-weight: 600;
                            padding: 0 35px;
                            line-height: 36px;
                            color: #fff;
                            border: 2px solid #222;
                            background-color: #222;
                            margin-bottom: 0;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum ='max') and (@break =@screen__s) {
    .opc-wrapper {
        .form-login {
            .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color);
            .lib-css(margin, @checkout-shipping-item-mobile__padding);
            .lib-css(padding, @checkout-shipping-item-mobile__padding);
        }

        .shipping-address-item {
            .lib-css(border-bottom, 1px solid @checkout-shipping-item-before__border-color);
            .lib-css(margin, @checkout-shipping-item-mobile__margin);
            .lib-css(padding, 15px 35px 15px 18px);
            width: 100%;

            &.selected-item {
                .lib-css(padding, @checkout-shipping-item-mobile__active__padding);
                border-bottom-width: 2px;

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

        .form-login,
        .form-shipping-address {
            .lib-css(margin-top, @checkout-shipping-address__margin-top);
        }

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

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

        .edit-address-link {
            .lib-icon-font(@icon-settings,
                @_icon-font-size: 28px,
                @_icon-font-line-height: 28px,
                @_icon-font-text-hide: true,
                @_icon-font-color: @color-gray19,
                @_icon-font-color-hover: @color-gray19,
                @_icon-font-color-active: @color-gray19 );
            margin: 0;
            position: absolute;
            left: 0;
            top: 1px;
        }

    }

}

//
//  Desktop
//  _____________________________________________

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

            .action {
                &.primary {
                    margin: 0;
                }
            }
        }

    }

    .checkout-shipping-address {
        .form-login {
            border-bottom: 1px solid #f0f0f0;
            margin-bottom: 18px;
            padding-bottom: 4px;

            fieldset#customer-email-fieldset {
                margin-bottom: 15px;
            }

            fieldset {
                .field {
                    margin-bottom: 15px;
                }

                .actions-toolbar {
                    margin-right: 0;
                    margin-bottom: 20px;

                    button.action.login.primary {
                        height: 40px;
                        font-weight: 600;
                        padding: 0 35px;
                        line-height: 36px;
                        color: #fff;
                        border: 2px solid #222;
                        background-color: #222;
                        margin-bottom: 0;

                        &:hover {
                            border: 2px solid @theme-primary-color !important;
                            background-color: @theme-primary-color !important;
                        }
                    }

                    .secondary {
                        margin-top: 0;
                    }
                }
            }
        }
    }

    form.form.form-shipping-address {
        fieldset.field.street.admin__control-fields {
            padding: 0;
            border: none;
        }
    }

    .table-checkout-shipping-method {
        width: 100%;
    }
}

.media-width(@extremum, @break) when (@extremum ='min') and (@break =@screen__l) {
    .opc-wrapper {
        .shipping-address-item {
            &:before {
                .lib-css(background, @checkout-shipping-item-before__border-color);
                .lib-css(height, @checkout-shipping-item-before__height);
                content: '';
                right: 0;
                position: absolute;
                top: 0;
                width: 1px;
            }

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

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

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

    .table-checkout-shipping-method {
        min-width: 100%;
    }
}