@import 'themes/default';

.Menu {
  li,
  ul {
    margin-bottom: 0;
  }

  &--contained {
    background-color: var(--Menu____bg-color);
    border-radius: var(--Menu____radius);
    box-shadow: var(--Menu____box-shadow);
    padding: 0.25em 0;
  }

  &--modern {
    --Menu__Item____radius: var(--radius--med);
    padding: 0.5em;

    li {
      margin-bottom: 0.25em;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}

.Menu__Divider {
  border-top: 1px solid var(--color--gray-4);
  margin: 0.25em 0;
  padding: 0;
}

.Menu__List {
  list-style: none;
  padding: 0;
}

.Menu__Section {
  margin-bottom: 0;
}

.Menu__Title {
  font-size: var(--font-size--base);
  font-weight: var(--font-weight--bold);
  margin: 0;
}

.Menu__Subtitle {
  background-color: var(--color--gray-6);
  color: var(--color--gray-2);
  font-size: var(--font-size--s);
  font-weight: 600;
  letter-spacing: var(--tracked--looser);
  margin: 0.25em 0;
  padding: 1em;
  text-transform: uppercase;
}

.Menu__Toggle {
  color: inherit;
  cursor: pointer;

  &[disabled],
  &--disabled {
    opacity: 0.3;
  }
}

// These styles normalize some default properties on buttons, but to keep the
// specificity as low as possible, `button` is left out of the selector.
.Menu__Item,
.Menu__Toggle {
  appearance: none;
  background-color: transparent;
  font-family: inherit;
  font-size: inherit;
  line-height: var(--line-height--copy);
  position: relative;
  text-align: left;
  width: 100%;

  &--no-variant:active {
    color: inherit;
  }

  &[disabled],
  &--disabled {
    pointer-events: none;
  }
}

.Menu__Item {
  border-bottom: var(--Menu__Item____border-bottom);
  color: inherit;
  cursor: pointer;
  display: block;
  margin-bottom: 0;
  position: relative;
  transition: background var(--timing--hover);
  border-radius: var(--Menu__Item____radius);

  &:hover,
  &:focus-visible {
    background-color: var(--Menu__Item--hovered____bg-color);
  }

  &--selected {
    background-color: var(--Menu__Item--hovered____bg-color);
  }

  &--active:before {
    background-color: var(--Menu__Item--active____color);
    content: '';
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0px;
    width: 2px;
  }

  // Menu components do not at this time directly apply the .Menu__Item__dragging and
  // .Menu__Item--ghost classes, as Particle does not provide sorting or drag-n-drop
  // functionality. These classes exist for 3rd party sorting libraries to apply.

  &--dragging {
    background-color: var(--color--invert);
    box-shadow: var(--shadow--s);
    // Opacity may be applied with inline styles, so we need to use !important
    // to control the opacity of dragging menu items ourselves.
    opacity: 1 !important;
  }

  &--ghost {
    opacity: 0.3;
    z-index: 1;
  }

  &--neutral {
    color: var(--color--gray-800);
    --Menu__Item--hovered____bg-color: var(--color--gray-50);
    --Menu__Item--active____color: var(--color--gray-100);

    &--disabled,
    &[disabled] {
      color: var(--color--gray-300);
    }
  }

  &--critical {
    color: var(--color--red-500);
    --Menu__Item--hovered____bg-color: var(--color--red-50);
    --Menu__Item--active____color: var(--color--red-100);

    &--disabled,
    &[disabled] {
      color: var(--color--red-100);
    }
  }

  &--no-variant {
    &[disabled],
    &--disabled {
      opacity: 0.3;
      pointer-events: none;
    }
  }
}

.Menu--loose {
  --Menu__Item____padding: 1em 2em;
  --Menu__Divider____margin-left: 5.5em;
}

.Menu--tight {
  --Menu__Item____padding: 0.75em 1em;
  --Menu__Divider____margin-left: 4.75em;
}

.Menu--tightest {
  --Menu__Item____padding: 0.5em;
  --Menu__Divider____margin-left: 4.25em;
}

.Menu__Item,
.Menu__Title,
.Menu__Toggle,
.Menu__Subtitle {
  padding: var(--Menu__Item____padding);
}

.Menu__List--icon-first {
  .Menu__Divider {
    margin-left: var(--Menu__Divider____margin-left);
  }
}

.Menu__List--icon-first {
  .Menu__Item {
    align-items: center;
    display: flex;

    > .icon {
      margin-right: 2em;
    }
  }
}

.Menu__List--striped {
  --Menu__Item____border-bottom: 1px solid var(--color--gray-4);
}

.Menu__List--striped {
  li:last-child {
    &.Menu__Item,
    .Menu__Item {
      border-bottom: none;
    }
  }
}

.Menu__Toggle {
  .Menu__Toggle-Icon {
    color: var(--color--gray-1);
    transition: color var(--timing--hover);
  }

  &:hover,
  &:focus-visible {
    .Menu__Toggle-Icon {
      color: var(--color--main);
    }
  }
}