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

//
//  Admin section wrapper title @todo ui - find the right place
//  _____________________________________________

.fieldset-wrapper-title,
.admin__fieldset-wrapper-title {
    &:extend(.abs-clearfix all);
    border-bottom: 1px solid @color-gray80;
    line-height: 1.2;
    margin-bottom: 0;
    padding: 14px 0 16px;

    .title {
        font-size: 2rem;
        font-weight: 400;

        .admin__fieldset-wrapper-content & {
            font-size: 1.5rem;
            font-weight: 700;
        }

        &.active {
            ~ .actions {
                display: none;
            }
        }
    }

    .actions {
        display: block;
        float: right;
    }
}

.admin__fieldset-wrapper-content {
    .admin__fieldset {
        padding-bottom: 3rem;
        padding-top: 3rem;

        > .admin__collapsible-block-wrapper {
            &:first-child {
                margin-top: -3rem;
            }
        }

        > *:first-child {
            margin-top: 0;
        }

        > *:last-child {
            margin-bottom: 0;
        }
    }
}

//  @todo ui Move to other place - will be done in upcoming task 'Address Tabs':

.address-item-edit-content {
    background: @color-white;
    border: 1px solid @color-gray-brown;
    box-shadow: 0 2px 1px 0 rgba(217, 210, 202, .5);
    margin-left: 359px;
    max-width: 500px;
    padding: 15px 30px;

    .admin__field {
        &:extend(.abs-field-rows all);
    }

    .admin__legend {
        display: none;
    }
}

.address-list {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 360px;

    .address-list-item-actions {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }

    .address-list-item {
        background: @color-white-fog2;
        border: 1px solid @color-gray-brown;
        cursor: pointer;
        margin-bottom: -1px;
        padding: 10px 10px 15px;
        position: relative;
        z-index: 1;

        &.ui-state-active {
            background: @color-white;
            box-shadow: 0 1px 1px 0 rgba(217, 210, 202, 1);
            margin-left: -2px;
            padding-left: 12px;
            position: relative;
            z-index: 2;

            &:before,
            &:after {
                color: @color-white;
                content: '\e02a';
                font-family: 'MUI-Icons';
                font-size: 18px;
                font-style: normal;
                font-weight: normal;
                line-height: 11px;
                margin-top: -5px;
                position: absolute;
                right: -9px;
                speak: none;
                text-indent: -6px;
                top: 50%;
                width: 10px;
                z-index: 2;
            }

            &:before {
                color: @color-gray-brown;
                right: -11px;
                z-index: 1;
            }
        }
    }

    address {
        font-style: normal;
        line-height: 1.5;
        margin: 0 20px 15px 0;

        &:first-line {
            //  It does not work if First Name and Last Name are arranged in two lines
            font-weight: bold;
        }
    }

    .address-list-actions {
        background: none;
        border: 0;
        box-shadow: none;
        cursor: default;
        padding: 20px 0 0;
    }

    .action-delete {
        .lib-button-reset();
        .lib-icon-font(
            @icon-remove-small__content,
            @icons-admin__font-name,
            @_icon-font-size: 1.6rem,
            @_icon-font-line-height: 16px,
            @_icon-font-text-hide: true,
            @_icon-font-position: after,
            @_icon-font-color: @color-brown-darkie
        );

        span {
            max-height: 1px;
            max-width: 1px;
        }

        &:hover {
            position: relative;
            z-index: 2;

            &:after {
                color: darken(@color-brown-darkie, 20%);
            }

            //  @Todo ui - testing solution to show action hint without title attribute
            span {
                background-color: @color-very-light-gray;
                border: 1px solid @color-heathered-grey;
                border-radius: .4rem;
                bottom: 100%;
                clip: auto;
                font-size: @font-size__s;
                height: auto;
                left: auto;
                margin: 0 auto .1rem;
                max-height: 50px;
                max-width: 200px;
                padding: .5rem;
                right: auto;
                top: auto;
                transition: all .01s linear .7s;
                white-space: nowrap;
                width: auto;
            }
        }
    }
}

//
//  Login page form errors @todo ui - remove after validation consistency
//  _____________________________________________

[class*='admin__control-'].mage-error ~ [class*='admin__addon-']:before,
.admin__field-control > [class*='admin__control-'].mage-error {
    border-color: @field-error-control__border-color;
}

label.mage-error {
    &:extend(.admin__field-error);
}

//
//  Login page captcha reload @todo ui - remove after loader consistency
//  _____________________________________________

.page-layout-admin-login {
    .loading-mask {
        background: rgba(255,255,255,.2);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: @z-index-10;
    }

    .popup-loading {
        height: 149px;
        left: 50%;
        margin-left: -218px/2;
        margin-top: -149px/2;
        overflow: hidden;
        position: absolute;
        top: 50%;
        width: 218px;
    }
}

//
//  Login page captcha field @todo ui - Create new captcha markup - Change reload button
//  _____________________________________________

.page-layout-admin-login {
    .field-captcha {
        padding-left: 30px;
        vertical-align: middle;

        .captcha-reload {
            float: right;
            vertical-align: middle;
        }
    }
}

//
//  Form loader @todo ui - remove after loader consistency
//  _____________________________________________

.admin__form-loading-mask {
    background: rgba(255, 255, 255, .5);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: @loader-overlay__z-index;

    .spinner {
        font-size: @data-grid-spinner__size;
        left: 50%;
        margin-left: -(@data-grid-spinner__size / 2);
        margin-top: -(@data-grid-spinner__size / 2);
        position: absolute;
        top: 50%;
    }
}

//
//  Selectbox in calendar @todo ui - Remove after default select styles set
//  _____________________________________________

.ui-datepicker .ui-datepicker-title select {
    &:extend(.admin__control-select all);
}

//
//  Data grid
//  _____________________________________________

.data-grid {
    .head-massaction {
        .admin__control-select {
            min-width: 6rem;
        }
    }

    .data-grid-filters {
        td {
            border-bottom: 1px solid @color-gray84;
            padding: 1rem;
        }

        select,
        input[type='text'] {
            font-size: 1.3rem;
            height: 2.8rem;
            min-width: 5rem;
            padding: .2rem .4rem;
            width: 100%;
        }

        .admin__control-text {
            width: 100%;
        }

        select {
            background-position+: ~'calc(100% - 5px)' -37px;
            background-size+: auto;
            background-position+: 100%;
            background-size+: 18px 100%;
            background-position+: ~'calc(100% - 18px)' 0;
            background-size+: 1px 100%;
            height: 2.8rem;
            padding: .2rem 1.8rem .2rem .3rem;

            &:focus {
                background-position+: ~'calc(100% - 5px)' 11px;
                background-position+: 100%;
                background-position+: ~'calc(100% - 18px)' 0;
            }
        }

        td {
            ._has-datepicker {
                + .ui-datepicker-trigger {
                    height: 2.8rem;
                    margin-left: -3.2rem;
                    width: 2.8rem;

                    &:after {
                        line-height: 28px;
                    }
                }
            }
        }
    }

    .range-line {
        position: relative;

        + .range-line {
            margin-top: .5rem;
        }
    }

    .col-qty {
        .admin__control-text {
            &:extend(.abs-control-qty all);
        }
    }

    .field-row {
        display: inline-block;
    }
}

.mass-select-info {
    &:before {
        content: '(';
    }

    &:after {
        content: ')';
    }

    &._empty {
        display: none;
    }
}

.mass-select-wrap {
    margin-left: 1.1rem;
    margin-top: 3.3rem;
    position: absolute;
    top: 100%;

    select {
        cursor: pointer;
        height: 22px;
        left: 0;
        opacity: .01;
        position: absolute;
        top: 0;
        width: 22px;
        z-index: 2;

        + label {
            &:extend(.abs-action-default);
            height: 16px;
            line-height: 16px;
            padding: 0;
            width: 16px;
            z-index: 1;

            &:before {
                &:extend(.admin__control-checkbox + label:before);
                left: 0;
                position: absolute;
                top: 0;
            }

            &:after {
                &:extend(.action-multicheck-wrap .action-multicheck-toggle:after);
                top: 40% !important;
            }
        }

        &:focus {
            + label {
                &:after {
                    &:extend(.action-multicheck-wrap .action-multicheck-toggle._active:after);
                }
            }
        }

        &._checked {
            + label {
                &:before {
                    &:extend(.admin__control-checkbox:checked + label:before);
                }
            }

            &._indeterminate {
                + label {
                    &:before {
                        content: '-';
                        font-size: 2rem;
                        line-height: .7rem;
                    }
                }
            }
        }

        &._disabled {
            display: none;

            + label {
                cursor: not-allowed;
                opacity: .6;
            }
        }
    }
}

.admin__data-grid-toolbar {
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    .admin__data-grid-header-row {
        &:extend(.abs-cleafix);

        .action-select-multiselect {
            -webkit-appearance: menulist-button;
            height: 38px;
            left: -1rem;
            min-width: 0;
            opacity: .01;
            top: -1.2rem;
            width: 52px;
        }

        > div {
            margin-left: @temp_gutter;

            &:first-child {
                margin-left: 0;
            }
        }

        button {
            vertical-align: top;
        }
    }

    .admin__filter-actions {
        float: left;
    }

    .admin__control-filter {
        .admin__control-select {
            margin-right: @action__outer-indent;
        }
    }

    .admin__data-grid-export {
        float: right;

        .admin__control-select {
            margin-right: @action__outer-indent;
        }
    }

    .admin__grid-massaction {
        float: left;

        .admin__control-select {
            margin-right: @action__outer-indent;
        }

        + .admin__control-text {
            float: left;
        }

        .form-inline {
            display: inline;

            .admin__field-label {
                float: none;
                padding-left: 2rem;
                padding-right: 1rem;
                width: auto;
            }
        }

        .admin__grid-massaction-form {
            .admin__control-select {
                ~ button {
                    display: none;
                }

                &._selected {
                    ~ button {
                        display: inline-block;
                    }
                }

            }
        }

        .admin__control-select-placeholder {
            color: @color-darkie-gray;
            font-weight: @font-weight__bold;
        }
    }

    .admin__data-grid-pager-wrap {
        float: right;
    }

    .admin__data-grid-header-row {
        &._massaction {
            position: relative;
            z-index: 1;
        }
    }
}

//
//  Tablets
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
    .admin__data-grid-toolbar {
        .admin__data-grid-header-row {
            .admin__filter-actions {
                float: none;
                margin-bottom: @indent__base;
            }
        }

        .admin__data-grid-header-row {
            .admin__control-support-text {
                margin-left: 0;
            }
        }
    }
}

.admin__grid-control {
    .admin__grid-control {
        display: none;
    }
}

.ui-dialog {
    .admin__data-grid-header-row._massaction,
    .mass-select-wrap select,
    .mass-select-wrap,
    .admin__grid-massaction {
        z-index: 2000;
    }

    .admin__data-grid-wrap {
        z-index: 1999;
    }
}

.data-grid {
    td.col-action {
        a + a {
            &:before {
                content: '';
                display: block;
            }
        }
    }
}

//
//  Popups
//  _____________________________________________

.attribute-popup {
    background-color: @color-white;

    .edit-form {
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }
}

.product-configure-popup {
    .time-picker {
        display: block;
        margin-top: 1rem;
    }
}