/*
Copyright 2023 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.menu {
  border-radius: var(--cpd-space-3x);
  background: var(--cpd-color-bg-canvas-default);

  /* Here we use outline to create a border internal to the container. The Radix
  menu component may try to override it with outline: none, hence the need for
  !important. */
  outline: var(--cpd-border-width-1) solid
    var(--cpd-color-border-interactive-secondary) !important;
  outline-offset: calc(-1 * var(--cpd-border-width-1));
  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 10%);
  inline-size: fit-content;
  max-inline-size: 320px;
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-1x);
  padding-block: var(--cpd-space-5x) var(--cpd-space-4x);

  --cpd-separator-spacing: 0;
  --cpd-separator-inset: var(--cpd-space-4x);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translate(0, var(--cpd-space-3x));
  }
}

.menu[data-state="open"] {
  animation: slide-in 180ms;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion) {
  .menu[data-state="open"] {
    animation-name: fade-in;
  }

  .menu[data-state="closed"] {
    animation-name: fade-out;
  }
}

.title {
  /** Override MenuTitle margin top **/
  margin-block-start: 0 !important;
}