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

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

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

@collapsible-title__font-size: 1.7rem;
@collapsible-title__padding-top: 1.9rem;
@collapsible-title__color: @color-very-dark-gray-black;
@collapsible-title__padding-bottom: @collapsible-title__padding-top;
@collapsible-title__hover__color: darken(@collapsible-title__color, 15%);
@collapsible-title__disabled__color: lighten(@collapsible-title__color, 30%);

@control-collapsible-title-icon-open__size: 1.8rem;
@control-collapsible-title-icon-remove__size: @indent__base;
@control-collapsible-title__background-color: @color-white-fog;
@control-collapsible-title__padding-left: @control-collapsible-title-icon-open__size + @control-collapsible-title__padding__horizontal * 2;
@control-collapsible-title__padding-right: @control-collapsible-title-icon-remove__size + @control-collapsible-title__padding__horizontal * 2;
@control-collapsible-title__padding__horizontal: @indent__s;
@control-collapsible-title__padding__vertical: 1.6rem;

@control-collapsible-content__padding: @indent__s;

@control-collapsible-row__dragging__background-color: @color-light-gray0;

@control-collapsible-horizontal-dragover-mark__color: @color-blue-dodger;
@control-collapsible-horizontal-dragover-mark__height: 3px;

//
//  Table with collapsible panel
//  _____________________________________________

.admin__control-collapsible {
    width: 100%;

    ._dragged {
        .admin__collapsible-block-wrapper {
            .admin__collapsible-title {
                background: @control-collapsible-row__dragging__background-color;
            }
        }
    }

    ._dragover-top,
    ._dragover-bottom {
        .admin__collapsible-block-wrapper {
            &:before {
                background: @control-collapsible-horizontal-dragover-mark__color;
                content: '';
                display: block;
                height: @control-collapsible-horizontal-dragover-mark__height;
                left: 0;
                position: absolute;
                right: 0;
            }
        }
    }

    ._dragover-top {
        .admin__collapsible-block-wrapper {
            &:before {
                top: -@control-collapsible-horizontal-dragover-mark__height;
            }
        }
    }

    ._dragover-bottom {
        .admin__collapsible-block-wrapper {
            &:before {
                bottom: -@control-collapsible-horizontal-dragover-mark__height;
            }
        }
    }

    .admin__collapsible-block-wrapper {
        &.fieldset-wrapper {
            border: 0;
            margin: 0;
            position: relative;

            .fieldset-wrapper-title {
                background: @control-collapsible-title__background-color;
                border: 2px solid @control-collapsible__border-color;
            }
        }

        .fieldset-wrapper-title {
            .admin__collapsible-title {
                font-size: @font-size__base;
                font-weight: @font-weight__regular;
                line-height: 1;
                padding: @control-collapsible-title__padding__vertical @control-collapsible-title__padding-right
                         @control-collapsible-title__padding__vertical @control-collapsible-title__padding-left;

                &:before {
                    left: @control-collapsible-title__padding__horizontal;
                    right: auto;
                    top: 1.4rem;
                }
            }

            .action-delete {
                .action-icon();
                padding: 0;
                position: absolute;
                right: @control-collapsible-title__padding__horizontal;
                top: 1.4rem;

                &:before {
                    &:extend(.abs-icon all);
                    content: @icon-delete__content;
                    font-size: @control-collapsible-title-icon-remove__size;
                }

                > span {
                    display: none;
                }
            }

            .draggable-handle {
                &:extend(.abs-draggable-handle all);
            }
        }
    }

    .admin__collapsible-content {
        background-color: @color-white;
        margin-bottom: @indent__s;

        > .fieldset-wrapper {
            border: 1px solid @control-collapsible__border-color;
            margin-top: -1px;
            padding: @control-collapsible-content__padding;
        }

        .admin__fieldset {
            padding: 0;
        }

        .admin__field {
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}