/* Inspector Controls Tabs */
.vidplex__block-controls {
    & .components-button.components-tab-panel__tabs-item {
        width: 100%;
    }
}

/* Attribute tab control */
.vidplex__attr-tabs {
    & .components-tab-panel__tabs {
        margin-bottom: 16px;
    }
    & .components-button.components-tab-panel__tabs-item {
        width: 100%;
        display: block;
        justify-content: center;
        height: 36px !important;

        &:not(.active-tab) {
            border-bottom: 1px solid #e0e0e0;
        }

        &.active-tab {
            background-color: var(--vidplex--primary);
            color: white;
            /* border-bottom: 1px solid red; */
        }
    }
}

/* Two columns inside of Inspector Controls */
.vidplex__split-half {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: end;

    & .components-base-control__field {
        margin: 0 !important;
    }

    & > div {
        width: 100%;
    }
}

/* Responsive attributes with icons */
.vidplex__responsive-attribute {
    display: flex;
    align-items: center;
    gap: 6px;

    &.has-box-control {
        margin-bottom: -28px;
        position: relative;
        z-index: 1;
        width: fit-content;
    }
}
.vidplex-sidebar-responsive-icons {
    display: flex;

    & svg {
        cursor: pointer;
    }
}
.vidplex-responsive-icons svg {
    cursor: pointer;

    &.active {
        background-color: #e0e0e0;
    }
}

/* Light border */
.vidplex__light-border-bottom {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* Panel Color Settings */
.vidplex__color-attributes {
    padding: calc(16px) 0 !important;
}

/* Upsell Attribute */
.vidplex__upsell-attribute {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;

    & svg {
        color: #ff963a;
    }
}

/* Box Control */
#vidplex-box-control .components-base-control.components-input-control {
    margin-bottom: 0;
}

/* Tools Panel */
.vidplex__tools-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-top: none !important;

    &:not(:has(.components-tools-panel-item)) {
        padding: 0 !important;
        margin: 26px 0;
    }

    &:has(.components-tools-panel-item) {
        padding: 18px;
        border-top: 1px solid #e0e0e0 !important;
    }

    & .vidplex__split-half {
        grid-column: 1/-1;

        &:empty {
            display: none;
        }
    }
}

/* Upsell Component */
.vidplex__upsell-notice {
    padding: 12px 18px 12px 20px;
    border-left: 2px solid var(--vidplex--primary);
    margin: 16px 0 16px 10px;
    font-size: 14px;

    & .upsell__title {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: 500;
        text-transform: capitalize;
    }
    & .upsell__btn {
        padding: 10px 26px;
        margin-top: 6px;
        border-radius: 5px;
        text-decoration: none;
        background-color: var(--vidplex--primary);
        color: #fff;
        display: inline-block;
    }
}

/* Custom Video Picker Accordion */
.vidplex__custom-video-picker {
    list-style: none;

    & .video__item-wrapper {
        position: relative;
        padding: 0 20px;
        border: 1px solid #e0e0e0;
        &:not(:first-child) {
            margin-top: 16px;
        }

        &:has(.video__item-accordion-content.is-visible) {
            padding-bottom: 12px;
        }
    }

    & .video__item-accordion-title {
        display: flex;
        justify-content: space-between;
        gap: 10px;

        & legend {
            cursor: pointer;
            padding: 18px 0;
        }
    }
    & .icon__wrapper {
        display: flex;
        gap: 4px;
        align-items: center;
        & svg {
            cursor: pointer;
        }
    }

    & .video__item-accordion-content {
        height: 0;
        visibility: hidden;
        opacity: 0;

        &.is-visible {
            margin-top: 16px;
            height: auto;
            visibility: visible;
            opacity: 1;
        }
    }
}