/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / DROPDOWNS

   Responsabilidades:
   - dropdown genérico baseado em <details>;
   - gatilho, seta e painel suspenso;
   - posicionamento e tamanhos;
   - itens, ícones, textos e metadados;
   - cabeçalho, rodapé, grupos e divisores;
   - menu de conta;
   - painel e lista de notificações;
   - estados aberto, ativo, desabilitado, vazio e perigo;
   - painel mobile opcional.

   Não inclui:
   - posicionamento específico da topbar;
   - regras .ayw-topbar-*;
   - aparência de botões;
   - aparência de avatares;
   - aparência de badges;
   - lógica JavaScript de abertura;
   - estilos específicos de páginas.

   Dependências:
   - tokens.css;
   - buttons.css, quando o gatilho ou ações forem botões;
   - avatars.css, para avatares de notificações;
   - badges.css, para contadores e indicadores;
   - empty-states.css, quando usado estado vazio completo.

   Estrutura recomendada:

   <details class="ayw-dropdown">
       <summary class="ayw-dropdown-trigger">
           Abrir
       </summary>

       <div class="ayw-dropdown-menu">
           ...
       </div>
   </details>
   ========================================================== */


/* ==========================================================
   DROPDOWN BASE
   ========================================================== */

   .ayw-dropdown {
    --ayw-dropdown-width: 280px;

    --ayw-dropdown-max-width:
        calc(
            100vw -
            var(--ayw-space-6)
        );

    --ayw-dropdown-max-height:
        min(
            420px,
            calc(
                100dvh -
                var(--ayw-space-16)
            )
        );

    --ayw-dropdown-offset:
        var(--ayw-space-2);

    --ayw-dropdown-padding:
        var(--ayw-space-2);

    --ayw-dropdown-radius:
        var(--ayw-radius-lg);

    --ayw-dropdown-bg:
        var(--ayw-surface);

    --ayw-dropdown-color:
        var(--ayw-text);

    --ayw-dropdown-border:
        var(--ayw-border);

    --ayw-dropdown-shadow:
        var(--ayw-shadow-lg);

    position: relative;

    display: inline-block;

    flex: 0 0 auto;

    min-width: 0;
}


/* ==========================================================
   SUMMARY

   Remove o marcador nativo de details/summary.
   ========================================================== */

.ayw-dropdown > summary {
    list-style: none;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

.ayw-dropdown > summary::-webkit-details-marker {
    display: none;
}

.ayw-dropdown > summary::marker {
    content: "";
}


/* ==========================================================
   GATILHO PADRÃO

   Pode ser usado sozinho ou combinado com buttons.css.

   Exemplo com composição:

   class="
       ayw-btn
       ayw-btn-ghost
       ayw-dropdown-trigger
   "
   ========================================================== */

.ayw-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 44px;

    gap: var(--ayw-space-2);

    margin: 0;
    padding:
        var(--ayw-space-2)
        var(--ayw-space-3);

    border: 1px solid transparent;
    border-radius: var(--ayw-radius-md);

    background: transparent;
    color: var(--ayw-text-soft);

    font: inherit;
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-medium);
    line-height: 1;

    text-decoration: none;

    transition:
        border-color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast);
}

.ayw-dropdown-trigger:hover {
    background: var(--ayw-bg-soft);
    color: var(--ayw-text);
}

.ayw-dropdown-trigger:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}


/* ==========================================================
   ESTADO ABERTO DO GATILHO
   ========================================================== */

.ayw-dropdown[open] > .ayw-dropdown-trigger {
    border-color: var(--ayw-primary-border);

    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);
}


/* ==========================================================
   SETA DO GATILHO
   ========================================================== */

.ayw-dropdown-arrow {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    color: currentColor;

    line-height: 1;

    transition:
        transform var(--ayw-transition-fast);
}

.ayw-dropdown-arrow svg,
.ayw-dropdown-arrow img {
    display: block;

    width: 100%;
    height: 100%;
}

.ayw-dropdown[open] .ayw-dropdown-arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   PAINEL SUSPENSO
   ========================================================== */

.ayw-dropdown-menu {
    position: absolute;

    top:
        calc(
            100% +
            var(--ayw-dropdown-offset)
        );

    right: 0;
    z-index: var(--ayw-z-dropdown);

    display: none;

    width:
        min(
            var(--ayw-dropdown-width),
            var(--ayw-dropdown-max-width)
        );

    max-width:
        var(--ayw-dropdown-max-width);

    max-height:
        var(--ayw-dropdown-max-height);

    overflow-x: hidden;
    overflow-y: auto;

    border:
        1px
        solid
        var(--ayw-dropdown-border);

    border-radius:
        var(--ayw-dropdown-radius);

    background:
        var(--ayw-dropdown-bg);

    color:
        var(--ayw-dropdown-color);

    box-shadow:
        var(--ayw-dropdown-shadow);

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        var(--ayw-border-strong)
        transparent;

    -webkit-overflow-scrolling: touch;
}

.ayw-dropdown[open] > .ayw-dropdown-menu {
    display: block;
}


/* ==========================================================
   SCROLLBAR DO PAINEL
   ========================================================== */

.ayw-dropdown-menu::-webkit-scrollbar {
    width: 8px;
}

.ayw-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}

.ayw-dropdown-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--ayw-radius-pill);

    background: var(--ayw-border-strong);
    background-clip: padding-box;
}


/* ==========================================================
   POSICIONAMENTO
   ========================================================== */

.ayw-dropdown-left > .ayw-dropdown-menu {
    right: auto;
    left: 0;
}

.ayw-dropdown-right > .ayw-dropdown-menu {
    right: 0;
    left: auto;
}

.ayw-dropdown-center > .ayw-dropdown-menu {
    right: auto;
    left: 50%;

    transform: translateX(-50%);
}

.ayw-dropdown-top > .ayw-dropdown-menu {
    top: auto;

    bottom:
        calc(
            100% +
            var(--ayw-dropdown-offset)
        );
}


/* ==========================================================
   TAMANHOS DO PAINEL
   ========================================================== */

.ayw-dropdown-sm {
    --ayw-dropdown-width: 200px;
}

.ayw-dropdown-md {
    --ayw-dropdown-width: 280px;
}

.ayw-dropdown-lg {
    --ayw-dropdown-width: 360px;
}

.ayw-dropdown-xl {
    --ayw-dropdown-width: 440px;
}

.ayw-dropdown-auto {
    --ayw-dropdown-width: max-content;
}

.ayw-dropdown-fluid {
    --ayw-dropdown-width: 100%;
    --ayw-dropdown-max-width: 100%;
}


/* ==========================================================
   VARIANTES DO PAINEL
   ========================================================== */

.ayw-dropdown-flat {
    --ayw-dropdown-shadow: none;
}

.ayw-dropdown-borderless {
    --ayw-dropdown-border: transparent;
}

.ayw-dropdown-elevated {
    --ayw-dropdown-shadow: var(--ayw-shadow-xl);
}

.ayw-dropdown-soft {
    --ayw-dropdown-bg: var(--ayw-bg-soft);
}


/* ==========================================================
   CONTEÚDO INTERNO
   ========================================================== */

.ayw-dropdown-content {
    min-width: 0;

    padding: var(--ayw-dropdown-padding);
}


/* ==========================================================
   GRUPO DE ITENS
   ========================================================== */

.ayw-dropdown-group {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-1);
}


/* ==========================================================
   ITEM
   ========================================================== */

.ayw-dropdown-item {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    min-height: 44px;

    gap: var(--ayw-space-3);

    margin: 0;
    padding:
        var(--ayw-space-2)
        var(--ayw-space-3);

    border: 0;
    border-radius: var(--ayw-radius-md);

    background: transparent;
    color: var(--ayw-text-soft);

    cursor: pointer;

    font: inherit;
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-regular);
    line-height: var(--ayw-line-height-normal);

    text-align: left;
    text-decoration: none;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast);
}

.ayw-dropdown-item:hover,
.ayw-dropdown-item:focus-visible {
    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);
}

.ayw-dropdown-item:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: -2px;
}


/* ==========================================================
   ITEM ATIVO OU SELECIONADO
   ========================================================== */

.ayw-dropdown-item.is-active,
.ayw-dropdown-item[aria-current="true"],
.ayw-dropdown-item[aria-current="page"],
.ayw-dropdown-item[aria-selected="true"],
.ayw-dropdown-item[aria-checked="true"] {
    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);

    font-weight: var(--ayw-font-weight-semibold);
}


/* ==========================================================
   ITEM DE PERIGO
   ========================================================== */

.ayw-dropdown-item.is-danger {
    color: var(--ayw-danger);
}

.ayw-dropdown-item.is-danger:hover,
.ayw-dropdown-item.is-danger:focus-visible {
    background: var(--ayw-danger-soft);
    color: var(--ayw-danger);
}


/* ==========================================================
   ITEM DESABILITADO
   ========================================================== */

.ayw-dropdown-item:disabled,
.ayw-dropdown-item.is-disabled,
.ayw-dropdown-item[aria-disabled="true"] {
    color: var(--ayw-text-disabled);

    cursor: not-allowed;

    opacity: 0.6;

    pointer-events: none;
}


/* ==========================================================
   ÍCONE DO ITEM
   ========================================================== */

.ayw-dropdown-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    color: currentColor;

    line-height: 1;
}

.ayw-dropdown-icon svg,
.ayw-dropdown-icon img {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   CONTEÚDO DO ITEM
   ========================================================== */

.ayw-dropdown-item-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-dropdown-item-label,
.ayw-dropdown-item-meta {
    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-dropdown-item-label {
    color: currentColor;
}

.ayw-dropdown-item-meta {
    margin-top: var(--ayw-space-1);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-regular);
}


/* ==========================================================
   COMPATIBILIDADE PARA ITEM SIMPLES

   Mantém truncamento quando o item contém apenas um span.
   ========================================================== */

.ayw-dropdown-item > span:last-child {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   ELEMENTO FINAL DO ITEM
   ========================================================== */

.ayw-dropdown-item-end {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    margin-left: auto;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);

    white-space: nowrap;
}


/* ==========================================================
   CABEÇALHO E RODAPÉ
   ========================================================== */

.ayw-dropdown-header,
.ayw-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-3);

    padding:
        var(--ayw-space-3)
        var(--ayw-space-4);
}

.ayw-dropdown-header {
    border-bottom: 1px solid var(--ayw-border);
}

.ayw-dropdown-footer {
    border-top: 1px solid var(--ayw-border);
}


/* ==========================================================
   GRUPOS DO CABEÇALHO E RODAPÉ
   ========================================================== */

.ayw-dropdown-header-main,
.ayw-dropdown-footer-main,
.ayw-dropdown-header-actions,
.ayw-dropdown-footer-actions {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-2);
}

.ayw-dropdown-header-main,
.ayw-dropdown-footer-main {
    flex: 1 1 auto;
}

.ayw-dropdown-header-actions,
.ayw-dropdown-footer-actions {
    flex: 0 0 auto;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.ayw-dropdown-title {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-tight);

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   DIVISOR
   ========================================================== */

.ayw-dropdown-divider {
    width: 100%;
    height: 1px;

    margin:
        var(--ayw-space-2)
        0;

    border: 0;

    background: var(--ayw-border);
}


/* ==========================================================
   TÍTULO DE GRUPO
   ========================================================== */

.ayw-dropdown-heading {
    display: block;

    margin: 0;

    padding:
        var(--ayw-space-2)
        var(--ayw-space-3);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-normal);
    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   MENU DE CONTA

   Deve ser aplicado ao próprio painel:

   <div class="ayw-dropdown-menu ayw-account-menu">
   ========================================================== */

.ayw-account-menu {
    --ayw-dropdown-width: 240px;

    padding: var(--ayw-dropdown-padding);
}


/* ==========================================================
   PAINEL DE NOTIFICAÇÕES

   Deve ser aplicado ao próprio painel:

   <div class="ayw-dropdown-menu ayw-notifications-menu">
   ========================================================== */

.ayw-notifications-menu {
    --ayw-dropdown-width: 380px;
}


/* ==========================================================
   CABEÇALHO DAS NOTIFICAÇÕES
   ========================================================== */

.ayw-notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-4);

    padding: var(--ayw-space-4);

    border-bottom: 1px solid var(--ayw-border);
}

.ayw-notifications-heading {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-notifications-title {
    display: block;

    min-width: 0;

    overflow: hidden;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-tight);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-notifications-count {
    display: block;

    margin-top: var(--ayw-space-1);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}


/* ==========================================================
   AÇÃO DO CABEÇALHO DAS NOTIFICAÇÕES

   Pode ser composta com buttons.css.
   ========================================================== */

.ayw-notifications-view-all {
    flex: 0 0 auto;

    color: var(--ayw-primary);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-semibold);

    text-decoration: none;
    white-space: nowrap;
}

.ayw-notifications-view-all:hover {
    text-decoration: underline;
}

.ayw-notifications-view-all:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;

    border-radius: var(--ayw-radius-xs);
}


/* ==========================================================
   LISTA DE NOTIFICAÇÕES
   ========================================================== */

.ayw-notifications-list {
    max-height:
        min(
            360px,
            calc(
                100dvh -
                160px
            )
        );

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        var(--ayw-border-strong)
        transparent;

    -webkit-overflow-scrolling: touch;
}

.ayw-notifications-list::-webkit-scrollbar {
    width: 8px;
}

.ayw-notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.ayw-notifications-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--ayw-radius-pill);

    background: var(--ayw-border-strong);
    background-clip: padding-box;
}


/* ==========================================================
   ITEM DE NOTIFICAÇÃO
   ========================================================== */

.ayw-notification-item {
    position: relative;

    display: flex;
    align-items: flex-start;

    width: 100%;
    min-width: 0;

    gap: var(--ayw-space-3);

    padding:
        var(--ayw-space-3)
        var(--ayw-space-4);

    border-bottom: 1px solid var(--ayw-border);

    background: var(--ayw-surface);
    color: var(--ayw-text-soft);

    text-decoration: none;

    transition:
        background-color var(--ayw-transition-fast);
}

.ayw-notification-item:last-child {
    border-bottom: 0;
}

.ayw-notification-item:hover,
.ayw-notification-item:focus-visible {
    background: var(--ayw-surface-hover);
    color: var(--ayw-text-soft);
}

.ayw-notification-item:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: -3px;
}

.ayw-notification-item.is-unread {
    background: var(--ayw-primary-soft);
}


/* ==========================================================
   AVATAR DA NOTIFICAÇÃO

   A aparência deve vir de avatars.css.

   Exemplo:

   class="
       ayw-avatar
       ayw-avatar-sm
       ayw-notification-avatar
   "
   ========================================================== */

.ayw-notification-avatar {
    flex: 0 0 auto;
}


/* ==========================================================
   CONTEÚDO DA NOTIFICAÇÃO
   ========================================================== */

.ayw-notification-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-notification-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-width: 0;

    gap: var(--ayw-space-2);
}

.ayw-notification-author {
    min-width: 0;

    overflow: hidden;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-notification-time {
    flex: 0 0 auto;

    color: var(--ayw-text-muted);

    font-size: 0.6875rem;
    line-height: 1;

    white-space: nowrap;

    font-variant-numeric: tabular-nums;
}

.ayw-notification-message {
    display: -webkit-box;

    margin-top: var(--ayw-space-1);

    overflow: hidden;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: 1.4;

    overflow-wrap: anywhere;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* ==========================================================
   INDICADOR DE NÃO LIDA

   A aparência pode ser composta com badges.css.
   ========================================================== */

.ayw-notification-dot {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    margin-top: var(--ayw-space-2);

    border-radius: 50%;

    background: var(--ayw-primary);
}


/* ==========================================================
   ESTADO VAZIO COMPACTO

   Para estados vazios maiores ou com ações, usar:
   components/empty-states.css.
   ========================================================== */

.ayw-dropdown-empty,
.ayw-notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 190px;

    gap: var(--ayw-space-2);

    padding: var(--ayw-space-6);

    color: var(--ayw-text-muted);

    text-align: center;
}


/* ==========================================================
   ÍCONE DO ESTADO VAZIO
   ========================================================== */

.ayw-dropdown-empty-icon,
.ayw-notifications-empty-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    margin-bottom: var(--ayw-space-2);

    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);

    font-size: 1.25rem;
    line-height: 1;
}

.ayw-dropdown-empty-icon svg,
.ayw-dropdown-empty-icon img,
.ayw-notifications-empty-icon svg,
.ayw-notifications-empty-icon img {
    display: block;

    width: 1em;
    height: 1em;
}


/* ==========================================================
   TEXTOS DO ESTADO VAZIO
   ========================================================== */

.ayw-dropdown-empty-title,
.ayw-notifications-empty-title,
.ayw-notifications-empty strong {
    color: var(--ayw-text);

    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
}

.ayw-dropdown-empty-text,
.ayw-notifications-empty-text,
.ayw-notifications-empty > span:last-child {
    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-relaxed);
}


/* ==========================================================
   PAINEL MOBILE GENÉRICO

   Dropdowns genéricos podem se transformar em painel fixo
   usando:

   <details class="ayw-dropdown ayw-dropdown-mobile-panel">

   A topbar NÃO depende deste bloco. Seu posicionamento mobile
   pertence a navigation/topbar.css.
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-dropdown-mobile-panel
    > .ayw-dropdown-menu {
        position: fixed;

        top:
            calc(
                var(--ayw-topbar-height-mobile) +
                env(safe-area-inset-top)
            );

        right:
            calc(
                var(--ayw-space-3) +
                env(safe-area-inset-right)
            );

        left:
            calc(
                var(--ayw-space-3) +
                env(safe-area-inset-left)
            );

        width: auto;
        max-width: none;

        max-height:
            calc(
                100dvh -
                var(--ayw-topbar-height-mobile) -
                var(--ayw-space-6) -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom)
            );

        transform: none;
    }

    .ayw-dropdown-mobile-panel
    .ayw-account-menu,
    .ayw-dropdown-mobile-panel
    .ayw-notifications-menu {
        width: auto;
    }
}


/* ==========================================================
   MOBILE COMPACTO
   ========================================================== */

@media (max-width: 374px) {
    .ayw-dropdown-mobile-panel
    > .ayw-dropdown-menu {
        right:
            calc(
                var(--ayw-space-2) +
                env(safe-area-inset-right)
            );

        left:
            calc(
                var(--ayw-space-2) +
                env(safe-area-inset-left)
            );
    }

    .ayw-dropdown-header,
    .ayw-dropdown-footer,
    .ayw-notifications-header,
    .ayw-notification-item {
        padding-right: var(--ayw-space-3);
        padding-left: var(--ayw-space-3);
    }
}


/* ==========================================================
   ESTADO OCUPADO
   ========================================================== */

.ayw-dropdown[aria-busy="true"] {
    cursor: progress;
}

.ayw-dropdown[aria-busy="true"]
.ayw-dropdown-trigger,
.ayw-dropdown[aria-busy="true"]
.ayw-dropdown-item {
    pointer-events: none;

    opacity: 0.65;
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-dropdown-trigger,
    .ayw-dropdown-arrow,
    .ayw-dropdown-item,
    .ayw-notification-item {
        transition: none;
    }
}