$menu--background: rgba(#fff, 0.98);
$menu--container--border: rgba($background, 0.075);
$menu--container--shadow: rgba($background, 0.15);
$menu--label: #abbac7;
$menu--value: #8899a8;
$menu--value--active: #4e6a7c;
$menu--header--border: rgba($background, 0.05);
$menu--item--background--hover: rgba($main-content--background, 0.4);
$menu--item--foreground: #95a2ad;
$menu--item--foreground--hover: darken($menu--item--foreground, 10%);
$menu--item--secondary--foreground: lighten($menu--item--foreground, 20%);
$menu--item--foreground--active: $blue;
$menu--item--separator--background: $menu--container--border;

.menu {
  background: $menu--background;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px $menu--container--border,
    0 1px 4px $menu--container--shadow,
    0 3px 15px $menu--container--shadow;
  color: $menu--item--foreground;
  text-align: left;

  &__item {
    padding: 5px 15px;

    &__label {

      &--primary {

        &.has-action {
          display: flex;

          .menu {

            &__item {

              &__label {
                flex: 1 1 auto;

                &__action {
                  flex: 0 0 auto;
                }
              }
            }
          }
        }
      }

      &--secondary {
        color: $menu--item--secondary--foreground;
        display: block;
        font-size: 0.85em;
      }
    }

    &--separator {
      background: $menu--item--separator--background;
      height: 1px;
      margin: 5px 0;
      padding: 0;
    }

    &.is-selectable {
      cursor: pointer;
      display: block;
      font-size: 0.9em;
      transition: background 0.25s, color 0.25s;

      &:hover {
        background: $menu--item--background--hover;
        color: $menu--item--foreground--hover;
      }

      &.is-selected {
        color: $menu--item--foreground--active;
      }
    }
  }

  &-enter {
    animation: fade-in 0.25s both;
  }

  &-leave {
    animation: fade-out 0.25s both;
  }
}