// Dropdowns
.dropdown-menu {
    font-size        : $dropdown-font-size;
    background-color : $white;
    border           : 1.33px solid $g-900;
    box-shadow       : 4px 4px 0 $g-200;
    border-radius    : $border-radius;
    padding          : 8px 0;
    line-height      : 20px;
    .divider {
        background-color : $gray-06;
    }
    .larger-dropdown {
        min-width : 240px;
    }
    i {
        margin-right : 4px;
    }
    [class^="ri-"], [class*=" ri-"]  {
        vertical-align: -0.15em;
    }
    .dropdown-item {
        padding : 8px 16px;
        @include state-border(1px, transparent);
        &:hover {
            border-color: transparent;
            background-color: $g-200;
        }
        &:focus-visible,
        &:active {
            color: $g-800;
            outline: none;
            border-color: $grape;
            background-color: $white;
        }
        &.disabled {
            color: $g-600;
            i {
                color: $g-600 !important; // important because icons usually have a helper class that sets !important
            }
        }
    }
    > li:not(.dropdown-item):focus-visible {
        outline: none;
    }
    > {
        li:not(.dropdown-item) > a,
        li:not(.dropdown-item) > button {
            color : $g-800;
            &:hover {
                color            : $g-800;
                background-color : $g-200;
            }
            &:focus {
                background-color : $white;
            }
        }
        .active > a,
        .active > button {
            color            : $white;
            background-color : var(--bs-primary);
            &:hover {
                color            : $white;
                background-color : var(--bs-primary);
            }
            &:focus {
                color            : $white;
                background-color : var(--bs-primary);
            }
        }
        .disabled > a,
        .disabled > button {
            color : $g-600;
        }
    }
}

.dropdown-header {
    color       : $g-600;
    font-weight : 600;
    font-size   : $dropdown-font-size;
}

.dropdown-divider {
    margin : 8px 0;
}

// GridActionsWidget
.ls-action_dropdown {
    > .btn {
        line-height : 16px;
        .ri-more-fill {
            vertical-align : bottom;
        }
    }
}

/* Submenu */
.has-submenu > a::after {
    content   : "›";
    position  : absolute;
    right     : 16px;
    color     : $g-900;
    font-size : $dropdown-font-size;
}

.dropdown-submenu {
    display          : none;
    position         : absolute;
    top              : 50%;
    left             : 100%;
    z-index          : 1000;
    font-size        : $dropdown-font-size;
    background-color : $white;
    border           : 1.33px solid $g-900;
    box-shadow       : 4px 4px 0 $g-200;
    border-radius    : $border-radius;
    padding          : 8px 0;
    line-height      : 20px;
    list-style       : none;

    &.dropdown-submenu-left {
        left         : auto;
        right        : 100%;
        margin-left  : 0;
        margin-right : 0;
    }
}

.has-submenu:hover > .dropdown-submenu {
    display : block;
}
