@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);
    overscroll-behavior: contain;
  }

  .arrow {
    position: absolute;
    color: var(--secondary);
  }

  &[data-placement^="top"] {
    .arrow {
      bottom: -9px;
      rotate: 180deg;
    }
  }

  &[data-placement^="bottom"] {
    .arrow {
      top: -10px;
    }
  }

  &[data-placement^="right"] {
    .arrow {
      rotate: -90deg;
      left: -9px;
    }
  }

  &[data-placement^="left"] {
    .arrow {
      rotate: 90deg;
      right: -9px;
    }
  }
}