.menu {
  box-sizing: border-box;
  padding: calc(var(--vertical-rhythm) / 4 - 1px) 0;
  border: 1px solid var(--medium-dark-color);
  border-radius: 4px;
  background-color: var(--x-light-color);
  will-change: opacity;
}

.menu:empty {
  display: none;
}

.menu:focus {
  outline: none;
}

.menu-item,
a.menu-item {
  display: flex;
  align-items: center;
  padding: calc(var(--vertical-rhythm) / 4)
           24px
           calc(var(--vertical-rhythm) / 4)
           0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  min-height: var(--vertical-rhythm);
}

.menu-item:not(.is-disabled):hover,
.menu-item:focus {
  background-color: var(--medium-light-color);
  outline: none;
}

.menu-item.is-disabled,
a.menu-item.is-disabled {
  color: var(--dark-color);
  cursor: default;
}

.menu-item-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
}

.menu-item-primary-text {
  flex: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.menu-item-primary-text:first-child {
  margin-left: 32px;
}

.menu-item-primary-text + .menu-item-secondary-text {
  margin-left: 24px;
}

.menu-item-secondary-text {
  color: var(--dark-color);
  font-size: calc(1rem * $type-scale-7);
  line-height: calc(var(--vertical-rhythm) * $type-height-7);
}

.menu-heading {
  padding: 0 24px 0 32px;
  color: var(--dark-color);
  font-weight: bold;
  font-size: calc(1rem * $type-scale-7);
  line-height: calc(var(--vertical-rhythm) * $type-height-7);
}

.menu-form {
  margin: 0;
  padding: calc(var(--vertical-rhythm) / 4)
           24px
           calc(var(--vertical-rhythm) / 4)
           32px;
}

.menu-divider {
  height: 1px;
  margin: calc(var(--vertical-rhythm) / 4) 0 calc(var(--vertical-rhythm) / 4 - 1px);
  overflow: hidden;
  background-color: var(--medium-dark-color);
}

.menu-exit.menu-exit-active {
  transition: opacity 0.2s ease-in-out;
}

.menu-enter,
.menu-exit.menu-exit-active {
  opacity: 0;
}

.menu-enter.menu-enter-active,
.menu-exit {
  opacity: 1;
}
