@keyframes d-menu-opening { 0% { opacity: 0; } 100% { opacity: 1; } } .fk-d-menu { width: max-content; position: absolute; top: 0; max-width: 600px; display: flex; padding: 0; z-index: z("dropdown"); &__trigger { .touch & { @include unselectable; } } &.-animated { animation: d-menu-opening 0.15s ease-in; &[data-placement^="bottom"] { transform-origin: top center; } &[data-placement^="top"] { transform-origin: bottom center; } &[data-placement^="right"] { transform-origin: center left; } &[data-placement^="left"] { transform-origin: center right; } } &[data-strategy="fixed"] { position: fixed; } &__inner-content { display: flex; border-radius: var(--d-border-radius); background-color: var(--secondary); border: 1px solid var(--primary-low); box-shadow: var(--shadow-menu-panel); } .arrow { z-index: z("max"); position: absolute; color: var(--secondary); } &[data-placement^="top"] { .arrow { bottom: -9px; rotate: 180deg; } } &[data-placement^="bottom"] { .arrow { top: -9px; } } &[data-placement^="right"] { .arrow { rotate: -90deg; left: -9px; } } &[data-placement^="left"] { .arrow { rotate: 90deg; right: -9px; } } }