@use 'common-mixins';

.mat-menu-panel {
    border-radius: 8px !important;
    box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3);
    max-width: none !important;
    min-width: 180px !important;
    margin-top: 10px;
    @include common-mixins.scroll-bar;

    .mat-menu-content:not(:empty) {
        padding-top: 8px;
        padding-bottom: 24px;
    }

    &.padding-bottom-0 .mat-menu-content:not(:empty) {
        padding-bottom: 0;
    }

    &.padding-bottom-8 .mat-menu-content:not(:empty) {
        padding-bottom: 8px;
    }

    .mat-menu-item {
        font-size: 13px;
        color: var(--iqser-accent);
        padding: 0 26px 0 8px;
        margin: 0 8px 2px 8px;
        border-radius: 4px;
        width: -webkit-fill-available;

        display: flex;
        align-items: center;

        .dot {
            right: 8px;
        }

        > *:not(:last-child) {
            margin-right: 8px;
        }

        .arrow-wrapper {
            width: 16px;
            text-align: center;

            mat-icon {
                width: 16px;
                height: 16px;
                margin: 0;
            }
        }

        &.padding-left {
            padding-left: 56px;
        }

        &:last-of-type {
            margin-bottom: 0;
        }

        &:hover {
            background-color: rgba(var(--iqser-primary-rgb), 0.1);
        }
    }
}