@use 'ngx-tethys/styles/variables.scss';

.the-plugin-menu-container {
    display: block;
    width: 260px;
    &.expand-menu {
        overflow: initial;
    }
    > .the-plugin-menu-scroll-container {
        max-height: 420px;
        overflow: auto;
    }
    .icon-menu {
        flex-wrap: wrap;
        .thy-action {
            margin-right: calc((220px - 32px * 6) / 5);
            &.focus {
                color: variables.$primary;
                background-color: variables.$item-active-bg-color;
            }
            &:not(:hover):not(.active):not(.focus) {
                color: variables.$gray-700;
            }
        }
        :nth-child(6),
        :nth-child(12) {
            margin-right: 0;
        }
    }
    .dropdown-menu-group .dropdown-menu-group-title {
        margin: 4px 0;
        padding: 0 20px;
        color: variables.$gray-600;
        line-height: 32px;
    }
    .dropdown-menu-item {
        height: 44px;
        margin-bottom: 4px;
        .menu-icon {
            height: 28px;
            .thy-icon {
                font-size: 28px;
            }
        }
        .menu-content {
            flex: 1;
            flex-flow: wrap;
        }
        .dropdown-submenu {
            padding: 12px 0 8px 0;
        }
        &.focus,
        &.thy-popover-origin-active,
        &.thy-dropdown-origin-active {
            background-color: variables.$dropdown-menu-item-hover-bg;
        }
    }
    :last-child {
        margin-bottom: 0;
    }
    .empty {
        width: 260px;
        height: 280px;
    }
}

.plugin-menu-table-select-container .thy-popover-container {
    padding: 20px 13px 10px 20px;
}