

$colorHoverMenuShadow: rgba(64,53,80,0.10);

.cd-hover-menu {
    // position: relative;
    border-radius: 2px;
    border: 1px solid $colorLineNormal;
    background-color: $colorContainerBg;
    transition: all 200ms ease-in-out;

    &:hover {
        border-color: #efefef #efefef transparent #efefef;
        // box-shadow: 0 0 25px 0 $colorHoverMenuShadow;
    }

    &-hd {
        padding: 0 15px;
        line-height: 28px;
        font-size: $fontSizeSmall;
        color: $colorBlack;

        display: flex;
        align-items: center;
        justify-content: space-between;

        &-text {
            cursor: default;
        }

        &-arrow {
            margin-top: 5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px;
            border-color: $colorBase transparent transparent transparent;
        }
    }

    &-list {
        display: none;
        position: absolute;
        // left: -1px;
        // right: -1px;
        border-style: solid;
        border-width: 1px;
        border-color: transparent #efefef #efefef #efefef;
        background-color: $colorContainerBg;
        // box-shadow: 0 0 25px 0 $colorHoverMenuShadow;
    }
    &-item {
        padding: 0 15px;
        line-height: 30px;
        font-size: $fontSizeSmall;
        color: $colorBlack;
        text-align: left;
        cursor: default;
        transition: all 200ms ease-in-out;

        &:hover {
            background-color: $colorTableHover;
        }
    }

    &:hover {
        .cd-hover-menu-list {
            display: block;
        }
    }
}
