@import '../../common/styles/variables';

.menu-header {
  text-transform: uppercase;
  color: $headers-color;
  padding: 0 $side-menu-item-hpadding;
}

.menu-cat-header {
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  color: $side-menu-item-color;
  text-transform: uppercase;
  background-color: $side-menu-bg-color;

  display: block;
  padding: $side-menu-item-vpadding $side-menu-item-hpadding;
}

.menu-cat:nth-of-type(even) .menu-cat-header {
  background-color: $side-menu-even-bg-color;
}

.menu-subitems {
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
}

.menu-subitems.active {
  height: auto;
}

.menu-subitems li {
  list-style: none inside none;
  cursor: pointer;

  padding: $side-menu-item-vpadding $side-menu-item-hpadding;
  padding-left: $side-menu-item-hpadding*2;
  background-color: $side-menu-bg-color;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-subitems li:nth-of-type(even) {
  background-color: $side-menu-even-bg-color;
}

// invert item colors for odd categories
.menu-cat:nth-of-type(odd) {
  .menu-subitems li {
    background-color: $side-menu-even-bg-color;
  }

  .menu-subitems li:nth-of-type(even) {
    background-color: $side-menu-bg-color;
  }
}

.menu-cat-header.active, .menu-subitems li.active {
  background-color: $side-menu-active-bg-color !important;
  font-weight: bold;
}