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

//
//  Variables
//  ---------------------------------------------

@admin__color1: #adadad;
@admin__color2: #d3d3d3;
@admin__color3: #e0e0e0;
@admin__color4: #666;

@spacing__base: 10px;
@spacing-xs: @spacing__base;
@spacing-s: @spacing__base;
@spacing-m: 15px;
@spacing-l: @spacing__base;
@spacing-xl: @spacing__base;

@size__base: 1rem;
@size-xs: @size__base;
@size-s: @size__base;
@size-m: @size__base * 1.2;
@size-l: @size__base;
@size-xl: @size__base;

@field-date-icon--color: #514943;

//

[class*="tab-nav-item"]:not(ul):active,
[class*="tab-nav-item"]:not(ul):focus {
    box-shadow: none;
    outline: none;
}

.customer-index-edit {
    .main-col {
        padding-left: 40px;
    }
}

.tab-nav {
    &.block {
        margin-bottom: 40px;

        &:first-child {
            margin-top: 16px;
        }

        .block-title {
            padding: 7px 20px;
        }
    }

    &-items {
        padding: 0;
        border: 1px solid @admin__color2;
        @_shadow: 0 0 4px rgba(50, 50, 50, .35);
        .lib-css(box-shadow, @_shadow);
        margin: 0 0 40px;
        background: #f7f7f7;
    }

    &-item {
        padding: 0;
        list-style-type: none;
        border-bottom: 1px solid @admin__color3;
        position: relative;
        margin: 0 @spacing-m;
        z-index: 1;

        &:last-child {
            border-bottom: 0;
        }

        &.ui-state-active {
            z-index: 2;
            background: @color-white;
            padding: 1px (@spacing-m - 1px);
            border: 2px solid #eb5202;
            margin: -1px;

            .tab-nav-item-link {
                padding: (@spacing-m - 2px) @spacing-m (@spacing-m - 2px);
                color: #eb5202;
            }
        }

        &.ui-tabs-loading {
            position: relative;
            z-index: 1;

            &:before {
                content: "";
                display: block;
                position: absolute;
                z-index: 2;
                background: url('../images/loader-2.gif') no-repeat 50% 50%;
                background-size: 120px;
                width: 20px;
                height: 20px;
                top: 13px;
                left: -10px;
            }

            &.ui-state-active:before {
                top: 12px;
                left: 4px;
            }
        }

        &-link {
            display: block;
            padding: @spacing-m;
            color: @admin__color4;
            line-height: 1;

            &:focus,
            &:active,
            &:hover {
                outline: 0;
                color: #eb5202;
                text-decoration: none;
            }

            &.changed {
                font-style: italic;
            }
        }
    }
}

.ui-state-active .tab-nav-item-link {
    color: @admin__color4;
    font-weight: 600;
}

.listing-tiles {
    overflow: hidden;
    margin-top: -10px;
    margin-left: -10px;

    .listing-tile {
        background-color: #f2ebde;
        display: block;
        width: 238px;
        height: 200px;
        float: left;
        border: 1px solid #676056;
        margin-top: 10px;
        margin-left: 10px;
        border-radius: 4px;
        text-align: center;

        &.disabled {
            border-color: red;
        }

        &.enabled {
            border-color: green;
        }
    }
}

.listing {
    .disabled {
        color: red;
    }
    .enabled {
        color: green;
    }
}

.pager {
    text-align: left;
    padding-bottom: 10px;
    .lib-clearfix();

    [data-part=left] {
        display: block;
        width: 45%;
        float: left;
        text-align: left;
    }

    [data-part=right] {
        display: block;
        width: 45%;
        text-align: right;
        float: right;
        -moz-user-select: none; // use in 36 Firefox
        -webkit-user-select: none; // use in 41 Chrome
        -ms-user-select: none; // use in 11 IE
        user-select: none;
    }

    .action-next {
        cursor: pointer;
    }

    .action-previous {
        cursor: pointer;
    }
}

.grid-actions {
    [data-part=search] {
        display: inline-block;
        margin: 0 30px;

        input[type=text] {
            vertical-align: bottom;
            width: 460px;
        }
    }
}

.grid {
    .col-title {
        min-width: 90px;
        text-align: center;
    }

    .actions-split {
        .lib-clearfix();
        display: inline-block;
        position: relative;
        z-index: 100;

        &.active {
            .dropdown-menu {
                display: block;
                opacity: 1;
                visibility: visible;
            }
        }

        .action-toggle,
        .action-default {
            float: left;
            margin: 0;
        }

        .action-default {
            margin-right: 3rem;
        }

        .action-toggle {
            border-left-color: rgba(0, 0, 0, .2);
            bottom: 0;
            padding-left: 0;
            padding-right: 3rem;
            position: absolute;
            right: 0;
            top: 0;

            &.active {
                &:after {
                    transform: rotate(180deg);
                }
            }

            &:after {
                border-color: #645d53 transparent transparent transparent;
                border-style: solid;
                border-width: .5rem .5rem 0 .5rem;
                content: '';
                height: 0;
                margin-top: -.25rem;
                position: absolute;
                right: 1rem;
                top: 50%;
                width: 0;
            }

            &:hover {
                &:after {
                    border-color: darken(#645d53, 10%) transparent transparent transparent;
                }
            }

            > span {
                .lib-visually-hidden();
            }
        }
    }

    .grid-actions {
        padding: 10px 0;
    }

    .hor-scroll {
        padding-top: 10px;
    }

    .select-box {
        display: inline-block;
        vertical-align: top;
        margin: -12px -10px -7px;
        padding: 12px 10px 7px;
        width: 100%;
    }
}

//
// Form Component
//

.field .control input[type='text'][disabled],
.field .control input[type='text'][disabled] ~ .addafter,
.field .control select[disabled],
.field .control select[disabled] ~ .addafter {
    background-color: #e9e9e9;
    border-color: #adadad;
    color: #303030;
    opacity: .5;
    cursor: not-allowed;
}

//  ToDo: remove after "Product Attributes Mass update" implementation
.attributes-edit-form {
    .field {
        .control {
            input[type='text'][disabled] ~ .addafter,
            select[disabled] ~ .addafter,
            .attribute-change-checkbox {
                background: none;
                color: #676056;
                cursor: inherit;
                opacity: 1;

                strong {
                    background: none;
                }
            }
        }
    }

    .weight-switcher {
        margin-bottom: 18px;

        .addafter {
            margin-top: 30px;
            position: absolute;
        }

        .mage-error {
            + .addafter {
                + .admin__addon-suffix,
                + .admin__addon-suffix:hover {
                    &:before {
                        border-color: #e22626 !important;
                    }
                }
            }

            &[disabled] {
                border-color: #eb8d8d !important;
            }
        }
    }

    .field-weight {
        .addon {
            + .mage-error {
                margin-top: 14px;
            }
        }
    }
}

.field .control input[type='text'][disabled],
.field .control select[disabled] {
    ~ .addafter strong {
        background-color: #e9e9e9;
    }
}

.field-price.addon {
    direction: rtl;
}

.field-price.addon > * {
    direction: ltr;
}

.field-price.addon .addafter {
    border-width: 1px 0 1px 1px;
    border-radius: 2px 0 0 2px;
}

.field-price.addon input:first-child {
    border-radius: 0 2px 2px 0;
}

.field-price input[type="text"] {
  border-width: 1px 1px 1px 0;
}

.field-price input ~ label.addafter strong {
    margin-left: 2px;
    margin-right: -2px;
}

.field-price.addon > input {
    width: 99px;
    float: left;
}

.field-price .control {
    position: relative;
}

.field-price label.mage-error {
    position: absolute;
    left: 0;
    top: 30px;
}