/* ==========================================================================
 * Menu
 * ========================================================================== */

.mds-c-menu {
  --mds-v-menu__spacing: var(--mds-d-spacing--sm);

  & + & {
    margin-top: 1.5rem;
  }

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  .mds-c-popout__menu-panel > & {
    margin: calc(var(--mds-d-spacing--sm) * -1);

    & + .mds-c-menu {
      /* Remove negative margin-top from adjacent menus */
      margin-top: var(--mds-d-spacing--med);
    }
  }

  &.mds-is-droppable {
    background-color: var(--mds-t-background-color--accent-muted);
    box-shadow:
      calc(var(--mds-d-spacing--xs) * -1) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted),
      var(--mds-d-spacing--xs) 0 0 var(--mds-d-spacing--xs)
        var(--mds-t-background-color--accent-muted);
    cursor: grabbing;
    list-style-type: none;
  }

  &--truncate {
    overflow: hidden;
  }
}

.mds-c-menu__list {
  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xl);
  }
}

.mds-c-menu__heading {
  @mixin mds-m-heading--size-sm;

  display: block;
  padding-bottom: calc(var(--mds-d-spacing--sm) + 1px);
  padding-top: calc(var(--mds-d-spacing--sm) + 1px);

  & .mds-c-button--size-med {
    margin: calc(var(--mds-d-spacing--sm) / 2 * -1);
  }

  & .mds-c-button--size-sm {
    margin: calc(var(--mds-d-spacing--xs) / 2 * -1);
  }

  & .mds-c-button--size-xs {
    margin: calc(var(--mds-d-spacing--xxxs) / 2 * -1);
  }
}

.mds-c-menu__item {
  width: 100%;

  &:not(:first-child) .mds-c-menu__heading {
    margin-top: var(--mds-d-spacing--lg);
  }
}

.mds-c-menu__action {
  @mixin mds-m-label--size-med;

  align-items: center;
  background-color: var(--mds-t-background-color);
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-text-color--secondary);
  cursor: pointer !important;
  display: block;
  min-height: var(--mds-d-spacing--xxl);
  padding: calc(var(--mds-d-spacing--sm)) var(--mds-v-menu__spacing);
  position: relative;
  text-align: left;
  transition:
    background-color 0.1s ease-out,
    color 0.1s ease-out;
  width: 100%;

  .mds-c-menu--size-sm & {
    border-radius: 0;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    min-height: var(--mds-d-spacing--xl);
    padding: var(--mds-d-spacing--sm) var(--mds-d-spacing--xl);
    width: calc(100% + 3rem);
  }

  &:hover,
  &:focus-visible,
  &.mds-is-entered {
    background-color: var(--mds-t-background-color--secondary);
    color: var(--mds-t-text-color--primary);
    text-decoration: none;
  }

  &:focus-visible {
    outline: 2px solid var(--mds-d-color-brand--primary);
    outline-offset: -2px;
  }

  > .mds-c-icon {
    bottom: 0;
    color: var(--mds-t-text-color--accent);
    font-size: var(--mds-d-font-size--xl);
    margin: auto;
    margin-right: var(--mds-d-spacing--xs);
    position: absolute;
    right: 0;
    top: 0;
  }

  &.mds-c-menu__action--appearance-active {
    background-color: var(--mds-t-background-color--tertiary);
    color: var(--mds-t-text-color--primary);

    &:focus-visible {
      box-shadow: $box-shadow-focus--spaced;
    }

    .mds-c-menu--size-sm & {
      border-right: 2px solid var(--mds-d-color-brand--primary);
    }
  }

  &.mds-c-menu__action--appearance-disabled,
  &.mds-c-menu__action--appearance-readonly {
    pointer-events: none;
    user-select: none;
  }

  &.mds-c-menu__action--appearance-disabled {
    opacity: 0.5;
    padding-right: calc(var(--mds-v-menu__spacing) * 3.5);

    > .mds-c-icon {
      color: var(--mds-t-color--blue);
    }
  }

  > * {
    /* Everything inside of a menu action should be non-clickable.
    This was added to prevent dragging when you clicked on a div nested inside of a menu action. */
    pointer-events: none;
  }

  &.mds-is-dragging {
    box-shadow:
      0 0 0 1px var(--mds-t-border-color--accent),
      var(--mds-d-elevation--4);
  }
}

.mds-c-menu__content {
  align-items: center;
  display: flex;

  > *:only-child {
    min-width: 100%;
  }

  .mds-c-menu__action.mds-is-selected & {
    padding-right: calc(var(--mds-v-menu__spacing) * 2);
  }
}

.mds-c-menu__text {
  &--truncate {
    @mixin mds-m-text-overflow-ellipsis;
  }

  vertical-align: middle;

  &:not(:first-child) {
    margin-left: var(--mds-d-spacing--sm);
  }

  &:not(:last-child) {
    margin-right: var(--mds-d-spacing--sm);
  }
}

.mds-c-menu__submenu {
  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--xxl);
  }
}

.mds-c-menu__separator {
  border-top: 1px solid var(--mds-t-border-color--secondary);
  left: calc(-1 * var(--mds-v-popout__padding));
  list-style: none;
  margin: var(--mds-d-spacing--sm) 0;
  position: relative;
  width: calc(100% + var(--mds-v-popout__padding) * 2);
}