.menu {
  box-sizing: border-box;
}


/* menu__list */

.menu__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}


/* menu__dropdown-list */

.menu__dropdown-list {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 3;
  background-color: #fff;
  list-style-type: none;

}


/* menu__item */

.menu__item {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
}

.menu__item--active {
  & .menu__link,
  & .menu__link:visited {
    background-color: #eee;
    color: #000;
  }
}

.menu__item--disabled {
  opacity: .5;
  padding: .8rem 1.6rem;

  & .menu__link:hover {
    background-color: transparent;
    cursor: not-allowed;
  }
}


/* menu__link */

.menu__link {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  color: #777;
  padding: .8rem 1.6rem;

  &:hover,
  &:focus {
    background-color: #eee
  }
}


/* menu__heading */

.menu__heading {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  text-transform: uppercase;
  color: #565d64;
  padding: .8rem 1.6rem;
}


/* menu__separator */

.menu__separator {
  background-color: #ccc;
  height: 1px;
  margin: .48rem 0;
}


/* Modifier */


/* menu--fixed */
.menu--fixed {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3
}


/* menu--scrollable */
.menu--scrollable {
  overflow-y: scroll;
  overflow-x: hidden;

  & .menu__list {
    display: block;
  }
}

.submenu {
  /* .submenu > .menu__link:after */
  &>.menu__link:after {
    padding-left: 0.8rem;
    content: "\25B8";
    font-size: small;
  }
}

.submenu--active {
  background-color: #eee;

  &>.menu__dropdown-list {
    display: block;
    position: absolute;
  }
}

.submenu--allow-hover {
  &:hover>.menu__dropdown-list {
    display: block;
    position: absolute;
  }
}
