@use '@/styles/mastodon/mixins';

.menu {
  @include mixins.elevation-1;

  display: flex;
  flex-direction: column;
  padding: var(--space-2xs);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  overflow: hidden;

  &[data-elevation='2'] {
    @include mixins.elevation-2;
  }

  > hr {
    height: 1px;
    background-color: var(--color-border-primary);
    margin: var(--space-2xs) var(--space-sm);
    border: none;
  }
}

.menuItem {
  @include mixins.type-body-compact;

  --cursor: pointer;

  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  cursor: var(--cursor);
  transition:
    background 200ms,
    color 200ms;

  label {
    cursor: inherit;
    font-weight: inherit;
    font-size: var(--fs-sm);
  }

  &:hover:not(.menuItemDisabled) {
    background-color: var(--color-bg-highlight);
  }

  &:active:not(.menuItemDisabled),
  .menuItemActive {
    background-color: var(--color-bg-inverted);
    color: var(--color-text-inverted);

    label {
      color: var(--color-text-inverted);
    }
  }

  &:has(:disabled),
  .menuItemDisabled {
    --cursor: not-allowed;

    opacity: 0.5;
  }
}

.menuItemButton {
  appearance: none;
  background: none;
  border: none;
  width: 100%;
}

.menuItemIcon {
  width: var(--space-lg);
  height: var(--space-lg);
}

.menu > hr {
  height: 1px;
  background-color: var(--color-border-primary);
  margin: var(--space-2xs) var(--space-sm);
  border: none;
  width: calc(100% - (2 * var(--space-sm)));
}

.popoverMenu {
  width: 100%;
}
