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

//  ToDo UI: Consider all accordions, should be separated

//
//  Variables
//  _____________________________________________

@collapsible__border-color: @control-collapsible__border-color;

@collapsible-title-icon__size: 1.8rem;
@collapsible-title-support-text__font-size: 1.4rem;

@collapsible-sub-block__indent: 4rem;

@collapsible-content__indent: 2.6rem;

//
//  Mixins
//  _____________________________________________

.__collapsible-block-wrapper-pattern() {
    border-bottom: 1px solid @collapsible__border-color;
    .admin__fieldset > &:last-child {
        border-bottom-width: 0;
    }
}

.__collapsible-sub-block-wrapper-pattern() {
    margin-left: @collapsible-sub-block__indent;
}

.__collapsible-content-pattern() {
    border: 0;
    padding: 0 0 @collapsible-content__indent;
}

.__collapsible-title-pattern() {
    clear: both;
    color: @collapsible-title__color;
    cursor: pointer;
    display: block;
    font-size: @collapsible-title__font-size;
    font-weight: @font-weight__semibold;
    letter-spacing: .025em;
    padding: @collapsible-title__padding-top (@collapsible-title-icon__size + 1rem) @collapsible-title__padding-bottom 0;
    position: relative;
    text-decoration: none;
    transition: color .15s linear;

    &:hover,
    &:visited,
    &:focus {
        color: @collapsible-title__hover__color;
        text-decoration: none;
    }

    &:active {
        &:before {
            .scale();
        }
    }

    &._disabled,
    &.disabled {
        color: @collapsible-title__disabled__color;
        cursor: default;
    }

    &:before {
        &:extend(.abs-icon all);
        content: @icon-expand-open__content;
        font-size: @collapsible-title-icon__size;
        position: absolute;
        right: 1.3rem;
        top: 2.3rem;
    }

    &._loading {
        &:before {
            content: '';
        }
    }
}

.__collapsible-sub-title-pattern() {
    padding-left: (@collapsible-title-icon__size + 1rem);
    padding-right: 0;

    &:before {
        left: 0;
        right: auto;
    }
}

.__collapsible-text-pattern() {
    line-height: @line-height__l;
    margin-bottom: .5em;
    margin-top: 1rem;
}

//

.admin__collapsible-block-wrapper {
    .admin__collapsible-title[aria-expanded='true'] {
        &:before {
            content: @icon-expand-close__content;
        }
    } 
    
    .__collapsible-block-wrapper-pattern();
    .admin__collapsible-title {
        .__collapsible-title-pattern();
    }
    &.opened,
    &._show {
        > .fieldset-wrapper-title {
            .admin__collapsible-title {
                &:before {
                    content: @icon-expand-close__content;
                }
                &.active {
                    &:before {
                        content: @icon-expand-open__content;
                    }
                }
            }
        }

        &.fieldset-wrapper {
            .fieldset-wrapper-title {
                .actions {
                    display: block;
                }
            }
        }

        td.admin__collapsible-block-wrapper {
            .admin__collapsible-title {
                &:before {
                    content: @icon-expand-open__content;
                }
            }
            &._show {
                .admin__collapsible-title {
                    &:before {
                        content: @icon-expand-close__content;
                    } 
                }
            }
        }
    }

    &.fieldset-wrapper {
        border-bottom: 1px solid @collapsible__border-color;
        padding: 0;

        .fieldset-wrapper-title {
            border: 0;
            margin: 0;
            padding: 0;
        }

        .fieldset-wrapper-content {
            padding-bottom: @collapsible-title__padding-bottom;
        }
    }

    &.collapsible-block-wrapper-last {
        border-bottom: 0;
    }

    .admin__dynamic-rows.admin__control-collapsible {   
        td {
            &.admin__collapsible-block-wrapper {
                border-bottom: none;
            }
        }
    }
}

.admin__collapsible-content {
    max-height: 0;
    transform: scaleY(0);
    transform-origin: 0 0;
    transition: transform 100ms ease-in-out, max-height 100ms ease-in-out, visibility 100ms ease-in-out;
    visibility: hidden;

    &._show {
        max-height: 100%;
        transform: none;
        visibility: visible;
    }

    .admin__collapsible-title {
        font-size: 1.6rem;
        padding-left: (@collapsible-title-icon__size + 1rem);

        &:before {
            left: 0;
            right: auto;
            top: 2rem;
        }

        &._loading {
            .admin__page-nav-item-message-loader {
                left: 0;
                right: auto;
            }
        }
    }

    .admin__collapsible-block-wrapper {
        margin-left: @collapsible-sub-block__indent;
    }
}

.fieldset-wrapper {
    .admin__collapsible-block-wrapper {
        .fieldset-wrapper-title {
            .lib-css(user-select, none, 1);

            .actions {
                position: absolute;
                right: 1.3rem;
                top: 1.4rem;
            }

            .draggable-handle {
                top: 2.4rem;
            }
        }
    }

    .modal-slide & {
        .admin__collapsible-title {
            .__collapsible-title-pattern();

            &:before {
                left: auto;
            }
        }
    }
}

//
//  Legacy code
//  ---------------------------------------------

.admin__collapsible-block {
    .comment {
        .__collapsible-text-pattern();
    }

    //  Second level
    .admin__collapsible-block {
        border: 0;

        .entry-edit-head {
            > a {
                .__collapsible-sub-title-pattern();
            }
        }
    }

    ~ .admin__collapsible-block {
        .__collapsible-content-pattern();
    }
}

.section-config > .admin__collapsible-block > a,
.accordion > dt a,
.accordion .admin__collapsible-block > a {
    .__collapsible-title-pattern();

    > i {
        //  ToDo UI: change to .collapsible-sub-title
        display: block;
        font-size: @collapsible-title-support-text__font-size;
        font-style: italic;
        font-weight: @font-weight__regular;
        padding-top: .4rem;
    }
}

.section-config.active > .admin__collapsible-block > a:before,
.accordion > dt.open a:before,
.accordion .admin__collapsible-block.open a:before {
    content: @icon-expand-close__content;
}

.section-config.active > .admin__collapsible-block + input + fieldset,
.accordion > dt + dd.open,
.accordion .admin__collapsible-block.open + input + fieldset {
    display: block;
    margin: 0;
}

//  Sortable collapsible blocks

.sortable-wrapper {
    margin-bottom: 1.5rem;
}

//
//  Accordion
//  ---------------------------------------------

.accordion {
    margin: 0 0 .8rem;
    padding: 0;

    dt {
        border-bottom: 1px solid @collapsible__border-color;

        &.open {
            border-bottom: none;
        }
    }

    dd {
        border-bottom: 1px solid @collapsible__border-color;
        display: none;

        &.open {
            &:empty {
                background: @color-white url(../../../../../../web/mui/images/ajax-loader-big.gif) no-repeat center;
                height: 100px;
            }
        }
    }

    dt,
    dd {
        &:last-of-type {
            border-bottom: none;
        }
    }

    .form-inline {
        .config {
            td {
                padding: 2.2rem 1.5rem 0 0;
            }

            .scope-label {
                padding: 31px 1.5rem 0 0;
            }

            .use-default {
                padding: 29px 1.5rem 0 0;
            }

            .value {
                padding-right: 2rem;
            }
        }

        > .section-config {
            &:last-child {
                border-bottom: 0;
            }
        }
    }

    .config {
        .comment a,
        .link-more {
            color: @color-blue-pure;
            font-size: @font-size__base;
            font-weight: 400;

            &:focus,
            &:hover {
                text-decoration: underline;
            }
        }

        legend {
            display: none;
        }

        table {
            width: 100%;
        }

        td {
            padding: 2.2rem 1.5rem 0 0;
            vertical-align: top;
        }

        td[colspan] {
            padding: 0;
        }

        .admin__control-table {
            margin: 0 0 @indent__xs;

            td {
                padding: @control-table-cell__padding-vertical 2.5rem @control-table-cell__padding-vertical 0;

                &:first-child {
                    padding-left: 1.5rem;
                }
            }

            .cc-type-select {
                min-width: 20rem;
            }
        }

        input[type='text'],
        input[type='password'],
        select,
        textarea {
            width: 100%;
        }

        input {
            &.input-file {
                margin-top: 4px;
            }
        }

        select {
            &.select-date {
                width: 27%;
            }
        }

        .label {
            &:extend(.abs-word-wrap all);
            color: @color-gray19;
            float: none;
            font-size: 14px;
            font-weight: 600;
            padding-right: 30px;
            text-align: right;
            width: 33%;

            label {
                padding-top: 7px;
            }

            span {
                &[data-config-scope] {
                    display: inline-block;
                    position: relative;

                    &:before {
                        &:extend(.abs-config-scope-label all);
                    }
                }
            }
        }

        .scope-label {
            color: @color-gray60;
            font-size: @font-size__s;
            letter-spacing: .05em;
            padding: 31px 1.5rem 0 0;
        }

        .note {
            color: @color-gray19;
            font-size: 12px;
            margin: 5px 0;

            a {
                color: @color-blue-pure;
                font-size: 12px;
                font-weight: 400;

                &:focus,
                &:hover {
                    text-decoration: underline;
                }
            }
        }

        ._with-tooltip {
            select, // Fix for Chrome (Tooltip dropped to the bottom after select or text input)
            input[type='text'],
            input[type='password'] {
                float: left;
            }

            .note { // Fix for Chrome (Tooltip dropped to the bottom after select or text input)
                clear: both;
                margin: 0;
                padding: @indent__xs 0;
            }
        }

        .system-tooltip-box {
            position: absolute;
        }

        .value {
            padding-right: 40px;
            vertical-align: middle;
            width: 44%;

            &.with-tooltip {
                font-size: 0;

                .tooltip {
                    bottom: 0;
                    float: right;
                    left: 0;
                    margin: 6px -28px 0 0;
                    position: relative;
                    right: 0;
                    top: 0;
                }
      
                .time-separator {
                    font-size: 14px;
                    padding-left: 5px;
                } 

                .tooltip-content {
                    background: @color-very-dark-gray-black2;
                    background: rgba(49, 48, 43, .8);
                    border-radius: 5px;
                    bottom: 100%;
                    font-size: 13px;
                    line-height: 1.4;
                    margin: 0 -17px 10px 0;
                    max-width: 239px;
                    padding: 18px;
                    right: 0;
                    width: 239px;

                    &:before {
                        border-bottom: 0;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-top: 5px solid @color-very-dark-gray-black2;
                        bottom: -5px;
                        content: '';
                        height: 0;
                        left: auto;
                        opacity: .8;
                        position: absolute;
                        right: 20px;
                        top: auto;
                        width: 0;
                    }
                }

                .help {
                    margin: 0;
                    position: relative;
                    width: auto;
                }
            }

            .checkboxes {
                list-style: none;
                margin: -3px 0 0;
                padding: 0;

                li {
                    margin: 7px 0;
                }

                input,
                label {
                    vertical-align: middle;
                }

                label {
                    margin-left: 5px;
                }
            }

            .label {
                padding: 6px 5px 0 1.5rem;
                vertical-align: top;
                width: auto;
                &:first-child {
                    padding-left: 0;
                }
            }
        }
    }

    .paypal-selection-simplified {
        padding-left: 30px;
    }

    .paypal-selection {
        border-bottom: 2px solid @color-gray75;
        margin: 10px;
        width: 98%;

        th {
            padding: 6px 10px 7px;
        }

        input[type='checkbox'] {
            margin: -4px 7px 0 0;
        }
    }

    .paypal-payment-notice {
        margin: 10px;
    }

    .custom-options {
        border: 1px solid @color-gray60;
        margin: 0 0 20px;
        padding: 0 10px;
    }
}