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

//
//  Toolbar Options Panel
//  _____________________________________________

//  Don't display the hover state when the stage is being interacted with
.pagebuilder-stage.interacting .pagebuilder-content-type.pagebuilder-toolbar-active:hover {
    box-shadow: 0 0 0 1px rgb(153, 153, 153);
}

.pagebuilder-toolbar-active {
    &.pagebuilder-content-type {
        box-shadow: 0 0 0 1px rgb(153, 153, 153);
    }

    .pagebuilder-toolbar-options {
        opacity: 1;
        visibility: visible;
    }
}

.pagebuilder-toolbar-container {
    overflow: hidden;
}

.pagebuilder-toolbar-options {
    -moz-transition: transform 200ms, opacity 200ms, visibility 200ms;
    -o-transition: transform 200ms, opacity 200ms, visibility 200ms;
    -webkit-transition: transform 200ms, opacity 200ms, visibility 200ms;
    background-color: @color-white;
    border: 1px solid @color-gray75;
    left: -2px;
    opacity: 0;
    position: absolute;
    transition: transform 200ms, opacity 200ms, visibility 200ms;
    visibility: hidden;
    width: calc(~'100% + 4px');
    z-index: 32;

    .pagebuilder-toolbar-options-wrapper {
        display: flex;
        flex-wrap: wrap;

        .pagebuilder-toolbar-options-links {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            vertical-align: middle;

            &:not(:first-child):before {
                background-color: @color-light-gray;
                content: '';
                left: 0;
                position: relative;
                width: 1px;
            }

            .pagebuilder-toolbar-options-link {
                display: flex;
                margin: 2px;

                > a {
                    border: 1px solid transparent;
                    color: @color-very-dark-grayish-orange;
                    display: block;
                    height: 32px;
                    text-align: center;
                    text-decoration: none;
                    width: 34px;

                    &:hover,
                    &.toolbar-active {
                        background-color: @color-light-gray;
                        border: 1px solid @color-gray80;
                    }

                    i {
                        font-size: 18px;
                        font-style: normal;
                        line-height: 30px;
                    }

                    span {
                        font-size: 15px;
                        font-weight: 600;
                        line-height: 32px;
                    }
                }
            }
        }
    }
}