// Dropdown Menu
.easydocs-dropdown {
    @include shadow(0, 10px, 35px, #000, 0.06);
    right: -20px;
    position: absolute;
    top: calc(100% + 20px);
    width: 260px;
    background-color: var(--clr-white);
    border-radius: 0.5rem;
    z-index: 999;
    @include property;
    display: none;

    &.is-active {
        opacity: 1;
        visibility: visible;
        top: 130%;
    }
}

/** === Notification CSS === **/
$clr-white: #ffffff;

.notification-dropdown {
    width: 320px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    border-left: 1px solid rgba(0,0,0,0.05);
    border-radius: 3px;
    box-shadow: 3px 2px 7px 1px rgba(0,0,0,0.08);

    &:after {
        content: '';
        position: absolute;
        top: -10px;
        right: 2.0rem;
        @include triangle(top, 20px, 10px, $clr-white);
    }
}

.notification-head {
    padding: 15px 25px !important;
    box-shadow: none !important;

    &.ez-pb-0 {
        padding-bottom: 0 !important;
    }

    .header-text {
        font-size: 16px !important;
    }
}

.notification-body {
    .easydocs-filters {
        .dashicons {
            font-size: 14px;
            color: gray;
            padding-top: 2px;

            .easydocs-btn {
                &.mixitup-control-active {
                    &:hover,
                    &.mixitup-control-active {
                        .dashicons {
                            color: #1877f2;
                        }
                    }
                }

                &:hover {
                    .dashicons {
                        color: gray;
                    }
                }
            }
        }
    }

    .notification-item {
        .notification-image {
            img {
                border-radius: 50%;
                height: auto;
                width: auto;
                max-width: 40px;
                min-height: auto;
                object-fit: contain;
            }
        }
    }

    .no-notification-text {
        color: var(--clr-text-light);
    }

    a.notification-item-permalink {
        text-decoration: none;
    }
}
