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

@color-gray: #ccc;

//
//  Default appearance styles
//  _____________________________________________

div[data-content-type='tabs'],
.pagebuilder-content-type.pagebuilder-tabs {
    .tabs-navigation {
        border-bottom: 1px solid rgba(153, 153, 153, .3);
        display: block;
        font-size: 0;
        margin: 0;
        padding: 0;

        li:first-child {
            margin-left: 0 !important;
        }

        li.tab-header {
            background: @color-gray-light0;
            border: 1px solid @color-gray80;
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
            display: inline-block;
            margin: 0;
            max-width: 100%;
            overflow-wrap: break-word;
            position: relative;
            word-wrap: break-word;

            a.tab-title {
                border-right: 0;
                color: @color-black;
                cursor: pointer !important;
                display: block;
                font-size: 14px;
                font-weight: 600;
                padding: 1.4rem 2rem;
                position: relative;
                transition: all .3s;
                vertical-align: middle;
                white-space: normal;

                span.tab-title {
                    cursor: text;
                    display: block;
                }

                &:hover {
                    text-decoration: none;
                }

                .tab-drag-handle {
                    height: 100%;
                    left: 2px;
                    opacity: 0;
                    position: absolute;
                    top: 0;
                    transition: all .3s;
                    visibility: hidden;
                    width: 14px;

                    &.disabled:before {
                        color: @color-light-gray;
                        cursor: not-allowed;
                    }

                    &.disabled:active:before {
                        cursor: not-allowed;
                    }

                    &:before {
                        .abs-icon;
                        color: @color-dark-gray0;
                        content: @icon-gripper__content;
                        cursor: move; /* fallback if grab cursor is unsupported */
                        cursor: grab;
                        cursor: -moz-grab;
                        cursor: -webkit-grab;
                        display: block;
                        font-size: 16px;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    &:active:before {
                        cursor: grabbing;
                        cursor: -moz-grabbing;
                        cursor: -webkit-grabbing;
                    }
                }
            }

            &.sortable-placeholder {
                opacity: .3;
            }

            &.ui-sortable-helper {
                box-shadow: 0 1px 10px rgba(0, 0, 0, .3);
                opacity: .7;
                white-space: nowrap;

                a.tab-title .tab-drag-handle:before {
                    cursor: grabbing;
                    cursor: -moz-grabbing;
                    cursor: -webkit-grabbing;
                }
            }

            &:last-child {
                border-right: 1px solid @color-gray80;
            }

            &.ui-state-active {
                background: @color-white;
                z-index: 19;

                &:after {
                    border-bottom: 1px solid @color-white;
                    bottom: -1px;
                    content: '';
                    left: 0;
                    position: absolute;
                    width: 100%;
                }

                a.tab-title {
                    position: relative;
                    transition: all .3s;
                }
            }

            &.focused {
                a.tab-title .tab-drag-handle {
                    opacity: 1;
                    visibility: visible;
                }

                .pagebuilder-options {
                    .pagebuilder-options-visible;
                }
            }
        }
    }

    .tabs-content {
        border: 1px solid transparent;
        position: relative;

        > .element-children {
            min-height: inherit;
            padding: 0;

            > .pagebuilder-content-type-wrapper {
                display: block;

                ~ .pagebuilder-content-type-wrapper {
                    display: none;
                }
            }
        }
    }

    &.tab-align-left {
        .tabs-content {
            border-top-left-radius: 0 !important;
        }
    }
    &.tab-align-right {
        .tabs-content {
            border-top-right-radius: 0 !important;
        }
    }
}
div[data-content-type='tabs'] {
    .tabs-navigation {
        border: none;

        .tab-header:not(:first-child) {
            margin-left: -1px !important;
        }
    }
    .tabs-content {
        border: 1px solid @color-gray;
        border-top: none;

        [data-content-type='tab-item'] &:not(.empty-placeholder) {
            box-sizing: content-box;
            min-height: inherit;

            &:not(:first-child) {
                display: none;
            }

            > * {
                min-height: inherit;
            }
        }
    }
}

.pagebuilder-content-type-wrapper.ui-tabs-panel {
    margin-top: 0;
    min-height: inherit;
    padding: 0;
}

.pagebuilder-stage.focus-child .pagebuilder-content-type.pagebuilder-tabs .tabs-content {
    z-index: auto;
}

.pagebuilder-content-type-hidden .pagebuilder-content-type.pagebuilder-tabs .tabs-navigation li.tab-header.ui-state-active {
    z-index: 10;
}
