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

//
//  Default appearance styles
//  _____________________________________________

.pagebuilder-content-type {
    .pagebuilder-button-item {
        border: none;
        font-size: 0;
        max-width: 100%;
        width: auto;
        z-index: auto;

        [contenteditable=true] {
            display: block;
            min-height: 18px;
            min-width: 20px;
        }

        a {
            margin: 0;
        }

        a[data-element='link'] {
            margin: 0 10px 10px 0;
            max-width: 100%;
            min-width: 0;
            position: relative;
            transition: min-width 200ms ease;
            word-wrap: break-word;
            [data-element='link_text'] {
                max-width: 100%;
            }
        }

        .button-item-drag-handle {
            height: 100%;
            left: 1px;
            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;
            }
        }

        .pagebuilder-button-primary .button-item-drag-handle:before {
            color: @color-white;
            opacity: .7;
        }

        &.focused {
            .button-item-drag-handle {
                opacity: 1;
                visibility: visible;
            }

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

.pagebuilder-content-type-hidden .pagebuilder-content-type.pagebuilder-button-item:before {
    font-size: 28px;
    height: ~'calc(100% - 10px)';
    width: ~'calc(100% - 10px)';
}

//
//  Styles rendered through Blocks
//  ______________________________

[data-content-type='button-item'] {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;

    [data-element='link'] {
        max-width: 100%;
    }
}
