/*!
Pure v2.1.0
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE
*/
/*csslint adjoining-classes: false, box-model:false*/

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

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

.pure-menu-list, .pure-menu-item {
  position: relative;
}

.pure-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pure-menu-item {
  padding: 0;
  margin: 0;
  height: 100%;
  @include text-sm;
}

.pure-menu-link, .pure-menu-heading {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

/* HORIZONTAL MENU */

.pure-menu-horizontal {
  width: 100%;
  white-space: nowrap;

  .pure-menu-list {
    display: inline-block;
  }

  .pure-menu-item, .pure-menu-heading, .pure-menu-separator {
    display: inline-block;
    vertical-align: middle;
  }
}

/* Initial menus should be inline-block so that they are horizontal */

/* Submenus should still be display: block; */

.pure-menu-item .pure-menu-item {
  display: block;
}

.pure-menu-children {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 3;

  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.pure-menu-horizontal .pure-menu-children {
  left: 0;
  top: auto;
  width: inherit;
}

.pure-menu-allow-hover:hover > .pure-menu-children, .pure-menu-active > .pure-menu-children {
  display: block;
  position: absolute;
}

/* Vertical Menus - show the dropdown arrow */

.pure-menu-has-children > .pure-menu-link:after {
  padding-left: 0.35rem;
  font-family: sans-serif;
  content: "▸";
}

/* Horizontal Menus - show the dropdown arrow */

.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
  font-family: sans-serif;
  content: "▾";
}

/* scrollable menus */

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

  .pure-menu-list {
    display: block;
  }
}

.pure-menu-horizontal.pure-menu-scrollable {
  .pure-menu-list {
    display: inline-block;
  }

  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;

  /* a little extra padding for this style to allow for scrollbars */
  padding: .5em 0;
}

/* misc default styling */

.pure-menu-separator {
  background-color: #ccc;
  height: 1px;
  margin: .3em 0;
}

.pure-menu-horizontal {
  .pure-menu-children .pure-menu-separator {
    background-color: #ccc;
    height: 1px;
    margin: .3em 0;
  }

  .pure-menu-separator {
    width: 1px;
    height: 1.3em;
    margin: 0 0.3em;
  }

  .pure-menu-children .pure-menu-separator {
    display: block;
    width: auto;
  }
}

/* Need to reset the separator since submenu is vertical */

.pure-menu-heading {
  text-transform: uppercase;
  color: var(--color-text);
}

.pure-menu-link {
  color: var(--color-text);
  @include text-sm;
}

.pure-menu-children {
  background-color: var(--color-background);
}

.pure-menu-link, .pure-menu-heading {
  padding: .5rem;
}

.pure-menu-disabled {
  opacity: .5;

  .pure-menu-link:hover {
    background-color: transparent;
    cursor: default;
  }
}

.pure-menu-active > .pure-menu-link {
  background-color: var(--color-background-hover);
}

.pure-menu-link {
  &:hover, &:focus {
    background-color: var(--color-background-hover);
  }
}

.pure-menu-selected > .pure-menu-link {
  color: var(--color-navbar-item-active);

  &:visited {
    color: var(--color-navbar-item-active);
  }
}