body,
.editor-styles-wrapper {
    
    .block-editor-block-list__layout.is-root-container .areoi-header-container, 
    .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .areoi-header-container {
        position: relative !important;
    }

    .areoi-lightspeed-block {

        &:after {
            content: '';
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
    }
    .areoi-link-control {
        .block-editor-link-control {
            min-width: 1px;
        }
        .block-editor-link-control__search-item,
        .block-editor-link-control__tools {
            padding: 16px 0;
        }
        .components-base-control {
            margin: 0 0 24px 0;
        }
        .block-editor-link-control__search-results {
            padding: 0;

            button {
                padding: 16px;
            }
        }
    }

    .areoi-panel-row {
        .components-base-control {
            width: 100% !important;

            .rich-text {
                min-height: 35px;
                border: 1px solid #8c8f94;
                line-height: normal;
                margin: 0;
                padding: 8px;
                border-radius: 3px;

                &:focus {
                    border-color: #2271b1;
                    color: #0a4b78;
                    box-shadow: 0 0 0 1px #2271b1;
                }
            }
        }
    }
    .components-panel__row label,
    .areoi-link-control label {
        margin-bottom: 8px !important;
        display: block;
    }
    .responsive-tab-panel {
        border-top: 1px solid #e0e0e0;

        .components-tab-panel__tabs-item {
            padding: 3px 12px;
            flex: 1;
            text-align: center;

            &.active-tab {
                box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
            }
        }
    }
    .areoi-components-button-img {
        height: auto;
        margin-bottom: 8px;
    }
    .areoi-post-list,
    .areoi-icon-list {
        max-height: 300px;
        overflow-y: auto;
        border: 1px solid #757575;
        border-radius: 3px;
        padding: 6px 8px;
    }
    .areoi-icon-list-item {
        min-height: 40px;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px 10px 10px 50px;
        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        cursor: pointer;
    }
    .areoi-icon-list-item.selected {
        background: #007cba;
        color: #fff;
        border-color: #007cba;
    }
    .areoi-icon-list-item.highlighted {
        background-color: #fff;
        border-color: #007cba;
        color: #007cba;
        cursor: default;
    }
    .areoi-icon-base-control {
        margin-bottom: 10px !important;
    }
    .areoi-icon-list-item i {
        position: absolute;
        top: 50%;
        left: 10px;
        transform: translate( 0, -50% );
        font-size: 24px;
    }
    .areoi-panel-row {
        display: block;
        margin-bottom: 16px;
        padding-bottom: 16px;
        border-bottom: 1px dashed #ddd;

        &:last-of-type {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        .components-color-picker__body {
            padding-left: 0;
            padding-right: 0;
        }
        .components-base-control,
        .components-base-control:last-child {
            margin-bottom: 0;
        }
        .areoi-panel-row__label {
            font-size: 11px;
            font-weight: 500;
            line-height: 1.4;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: calc(8px);
            padding: 0px;
        }
        table {
            width: 100%;

            td {
                padding: 0;
                margin: 0;
            }
        }
        &.areoi-panel-row-no-border {
            border-bottom: none;
            padding-bottom: 0;
            margin-bottom: 0;
        }
    }
    .areoi-panel-row-color {
        .components-dropdown,
        .components-circular-option-picker__custom-clear-wrapper {
            display: none;
        }
        .components-color-picker,
        .react-colorful {
            width: 100% !important;
        }
        .react-colorful {
            padding: 10px 10px 0 10px;
        }
        .react-colorful__saturation {
            height: 150px !important;
        }
        .areoi-color-picker {
            border: 1px solid #ddd;
        }
        .components-circular-option-picker {
            border-top: 1px solid #ddd;
            padding: 10px;
            margin-top: 0;
        }
    }
    .areoi-panel-body {
        padding: 0 16px;
    }
    .areoi-device-specific {
        background:  #f2f2f2;
        padding: 20px;
        border-top: 1px solid #e0e0e0;
        text-align: center;
    }

    .responsive-tab-panel .components-tab-panel__tabs-item.areoi-tab-highlight {
        background-color: rgba( #42e695, 0.1 );
    }
    .responsive-tab-panel .components-tab-panel__tabs-item.active-tab.areoi-tab-highlight {
        box-shadow: inset 0 var(--wp-admin-border-width-focus) #42e695;
    }

    .block-editor-block-list__layout.is-root-container {

        .wp-block.container-fluid {
            max-width: 100%;
        }
        /*.wp-block:not([class*='container']) {
            max-width: 100%;
        }
        .wp-block[data-align="wide"]:not([class*='container']) {
            max-width: 100%;
        }*/
        .wp-block[data-align="full"]:not([class*='container']) {
            max-width: none;
        }
            
        .wp-block-areoi-banner,
        .wp-block-areoi-banner-item,
        .wp-block-areoi-content-with-media,
        .wp-block-areoi-strip,
        .wp-block-areoi-row {
            max-width: none;
        }

        .wp-block.strip,
        .wp-block.wp-block-areoi-container,
        .wp-block.row,
        .wp-block.grid,
        .wp-block.col {
            margin-top: 0;
            margin-bottom:  0;
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .wp-block.strip.is-selected,
        .wp-block.wp-block-areoi-container.is-selected,
        .wp-block.row.is-selected,
        .wp-block.col.is-selected,
        .wp-block.strip.has-child-selected,
        .wp-block.wp-block-areoi-container.has-child-selected,
        .wp-block.row.has-child-selected,
        .wp-block.col.has-child-selected {
            // padding: 28px 15px;

            .wp-block.wp-block-areoi-container,
            .wp-block.row,
            .wp-block.col {
                // padding: 28px 15px;
            }
        }
        .background,
        .areoi-background {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;

            .container-fluid,
            .row,
            .col {
                height: 100%;
            }
            .col {
                overflow: hidden;
            }
            img, video {
                max-width: none;
                width: auto;
                height: auto;
                min-width: 100%;
                min-height: 100%;
                display: block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50% );
            }
            &__image {
                background-size: cover;
                background-position: center;
            }
            &__image,
            &__color,
            &__overlay {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .div,
        .strip,
        .container,
        .row {
            & > .block-editor-inner-blocks {
                width: 100%;
                height: 100%;

                & > .block-editor-block-list__layout {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .block-list-appender {
            // width: 100%;
        }
        .block-editor-block-list__layout {
            // padding-bottom: 28px;
        }
    }
    .areoi-preview {
        height: 360px;
        background-color: red;
    }
    .wp-block.is-selected[class*="wp-block-areoi"]:not( 
        .wp-block-areoi-card-header, 
        .wp-block-areoi-card-body, 
        .wp-block-areoi-card-footer, 
        .wp-block-areoi-nav-and-tab-item, 
        .wp-block-areoi-dropdown-item, 
        .wp-block-areoi-button, 
        .wp-block-areoi-card-header,
        .wp-block-areoi-accordion-item,
        .wp-block-areoi-alert,
        .wp-block-areoi-breadcrumb,
        .wp-block-areoi-list-group-item,
        .wp-block-areoi-progress,
        .wp-block-areoi-modal-header,
        .wp-block-areoi-modal-body,
        .wp-block-areoi-modal-footer,
        .wp-block-areoi-offcanvas-header,
        .wp-block-areoi-offcanvas-body,
        .wp-block-areoi-toast-header,
        .wp-block-areoi-toast-body
     ),
    .wp-block.has-child-selected[class*="wp-block-areoi"]:not( 
        .wp-block-areoi-card-header, 
        .wp-block-areoi-card-body, 
        .wp-block-areoi-card-footer, 
        .wp-block-areoi-nav-and-tab-item, 
        .wp-block-areoi-dropdown-item, 
        .wp-block-areoi-button, 
        .wp-block-areoi-card-header,
        .wp-block-areoi-accordion-item,
        .wp-block-areoi-alert,
        .wp-block-areoi-breadcrumb,
        .wp-block-areoi-list-group-item,
        .wp-block-areoi-progress,
        .wp-block-areoi-modal-header,
        .wp-block-areoi-modal-body,
        .wp-block-areoi-modal-footer,
        .wp-block-areoi-offcanvas-header,
        .wp-block-areoi-offcanvas-body,
        .wp-block-areoi-toast-header,
        .wp-block-areoi-toast-body
     ),
    .is-selected .wp-block[class*="wp-block-areoi"]:not( 
        .wp-block-areoi-card-header, 
        .wp-block-areoi-card-body, 
        .wp-block-areoi-card-footer, 
        .wp-block-areoi-nav-and-tab-item, 
        .wp-block-areoi-dropdown-item, 
        .wp-block-areoi-button, 
        .wp-block-areoi-card-header,
        .wp-block-areoi-accordion-item,
        .wp-block-areoi-alert,
        .wp-block-areoi-breadcrumb,
        .wp-block-areoi-list-group-item,
        .wp-block-areoi-progress,
        .wp-block-areoi-modal-header,
        .wp-block-areoi-modal-body,
        .wp-block-areoi-modal-footer,
        .wp-block-areoi-offcanvas-header,
        .wp-block-areoi-offcanvas-body,
        .wp-block-areoi-toast-header,
        .wp-block-areoi-toast-body
     ),
    .has-child-selected .wp-block[class*="wp-block-areoi"]:not(
        .wp-block-areoi-card-header, 
        .wp-block-areoi-card-body, 
        .wp-block-areoi-card-footer, 
        .wp-block-areoi-nav-and-tab-item, 
        .wp-block-areoi-dropdown-item, 
        .wp-block-areoi-button, 
        .wp-block-areoi-card-header,
        .wp-block-areoi-accordion-item,
        .wp-block-areoi-alert,
        .wp-block-areoi-breadcrumb,
        .wp-block-areoi-list-group-item,
        .wp-block-areoi-progress,
        .wp-block-areoi-modal-header,
        .wp-block-areoi-modal-body,
        .wp-block-areoi-modal-footer,
        .wp-block-areoi-offcanvas-header,
        .wp-block-areoi-offcanvas-body,
        .wp-block-areoi-toast-header,
        .wp-block-areoi-toast-body
    ),
    .wp-block-areoi-div:hover {

        &:before {
            content: attr( data-type ) attr( data-anchor );
            background-color: rgba( 0, 0, 0, 0.6 );
            padding: 0 5px;
            color: #fff;
            font-size: 12px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 20;
        }
    }

    .row.is-selected,
    .row.has-child-selected {
        padding-bottom: 50px !important;

        & > .block-editor-inner-blocks {
            & > .block-editor-block-list__layout {
                & > .block-list-appender {
                    position: absolute;
                    bottom: -45px;
                }
            }
        }
    }
    .strip.is-selected,
    .strip.has-child-selected,
    .container.is-selected,
    .container.has-child-selected {
        padding-bottom: 50px !important;
    }
    .areoi-gallery-container {
        width: 100%;
    }
    .areoi-gallery {
        border: 1px solid #ddd;
        border-radius: 3px;
        overflow: hidden;

        .areoi-gallery-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid #ddd;

            &:last-of-type {
                border-bottom: none;
            }
            p {
                margin-bottom: 0;
            }
            .areoi-gallery-item-media {
                width: 50px;
                height: 50px;
                margin: 0 8px 0 0;

                img, video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
            .areoi-galery-item-label {
                flex-grow: 1;

                a {
                    margin-right: 20px;

                    &.areoi-remove-link {
                        color: red;
                    }
                }
            }
            .areoi-galery-item-arrows {
                margin-left: 8px;
                
                button {
                    background: #fff;
                    border: 1px solid #ddd;
                    width: 26px;
                    height: 26px;
                    padding: 0;
                    display: block;
                    border-radius: 3px 3px 0 0;
                    cursor: pointer;

                    &:last-of-type {
                        border-radius: 0 0 3px 3px;
                        border-top: none;
                    }
                }
            }
        }
    }
    .areoi-gallery-items {
        border: none;

        .areoi-gallery-item {
            border: none;
            border-top: 1px solid #ddd;
        }
    }
    .wp-block-widget-area {
        .components-panel__body-title {
            font-size: inherit !important;
        }
    }

    .areoi-field-reset .components-flex {
        display: block;
    }
}