// Tab Panel Style
*{
    margin: 0;
    padding: 0;
}
.block-editor-block-inspector .styble-tab-panel .components-base-control:last-child{
    margin-bottom: 0px;
}
div:has(>.styble-tab-panel) ~ div:has(>.block-editor-block-inspector__advanced) {
    display: none;
}
.styble-tab-panel{
    .components-tab-panel__tabs-item:focus:not(:disabled) {
        box-shadow: none;
    }
    .components-tab-panel__tabs {
        justify-content: center;
    }
    .components-tab-panel__tabs > button {
        padding: 0;
    }
    .components-tab-panel__tabs button {
        background-color: #008DB4;
        color: #fff;
        height: 40px;
        width: 100%;
        justify-content: center;
    }
    .components-tab-panel__tabs button:not(:last-child) {
        border-right: 1px solid #fff;
    }
    .components-tab-panel__tabs button span{
        display: flex;
        align-items: center;
        svg{
           margin-right: 4px;
           fill: #fff;
        }
    }
    .components-tab-panel__tabs button.active-tab {
        background-color: #ffffff;
        color: #008DB4;
        border-bottom-color: transparent;
        border-top: 2px solid;
        span{
           svg{
              fill: #008DB4;
           }
        }
    }
    .components-panel__body.is-opened > .components-panel__body-title{
        background-color: #F0F0F0;
        margin-bottom: 12px;
    }
    .components-panel__body .components-panel__body-title button:focus:not(:disabled){
        box-shadow: none;
        outline: none;
    }

    // Styble accordion item style.
    .styble-accordion{
       margin: 12px 0; 
    }
    // Styble component margin bottom.
    .styble-component-mb{
        margin-bottom: 24px;
    }
    .styble-component-mb:last-child{
        margin-bottom: 0px;
    }

    // Styble title style
    .styble-component-top {
        display: flex;
    }
    .styble-ranger-title,
    .components-base-control__label,
    .components-input-control__label,
    .components-toggle-control__label,
    .styble-component-title {
        text-transform: uppercase;
        color: #757575;
        font-weight: 700;
        font-size: 11px;
        margin-bottom: 8px;
        display: inline-block;
    }

    .components-input-control__label{
        margin-bottom: 0;
        font-weight: 700 !important;
    }

    // Header button controls style.
    .styble-header-control{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        &-left{
            display: flex;
        }
        &-right{
            display: flex;
            margin-top: 2px;
        }
        &-reset{
            height: 18px;
            padding: 0;
            margin-right: 10px;
            &.active{
                color: #008DB4;
            }
            &:focus:not(:disabled){
                outline: none;
                box-shadow: none;
            }
        }
    }

    // Styble units button style.
    .styble-units{
        position: relative;
        color: #8C8F94;
        &-btn{
            box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.15);
            position: absolute;
            z-index: 999;
            margin-top: 2px;
            opacity: 0;
            visibility: hidden;
            transition: .3s;
        }
        &:hover .styble-units-btn{
            opacity: 1;
            visibility: visible;
        }
        &:hover{
            span{
                border-color: #008DB4;
                color: #008DB4;
                svg {
                    fill: #008DB4;
                }
            }
        }
        span{
            display: inline-block;
            font-size: 10px;
            padding: 0px;
            width: 23px;
            height: 20px;
            border: 1px solid #8C8F94;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 2px;
            cursor: pointer;
            text-transform: capitalize;
            svg {
                fill: #8C8F94;
            }
        }
        span.box-unit{
            width: 45px !important;
        }
        button {
            padding: 0;
            width: 23px;
            height: 20px;
            display: flex;
            justify-content: center;
            background-color: #fff;
            font-size: 10px;
            border: none;
            color: #8C8F94;
            border-radius: 0;
            box-shadow: none;
            &:focus:not(:disabled){
                outline: none;
                box-shadow: none;
            }
            &.active{
                background-color: #008DB4;
                color: #fff;
            }
        }
    }
    .styble-units.box{
        .styble-units-btn {
            button{
                width: 45px;
            }
        } 
    }
}

p.styble-child-block-notice {
    padding: 20px;
    margin: 0 16px 16px;
    background-color: #f1f1f1;
}

.edit-post-editor__list-view-panel-content .is-selected .styble-block-icon {
    svg{
        fill: #fff !important;
    }
}

.styble-block-icon {
    display: inline-flex;
    svg{
        fill: #008DB4 !important;
    }
}
 
.block-editor-block-inspector .styble-tab-panel .components-panel__body:first-child {
    border-top: none;
}