.dropdown{
  @include depth(dropdown);
  padding-left: 0;
  background-color: #FFF;
  margin: 0;
  top:0;
  left:0;
  overflow-y: auto;

  border-top:1px solid greys(10%);
  white-space: nowrap;
  width: auto;
  opacity: 0;
  position: absolute;
  pointer-events: none;
  max-height: 300px;
  @include shadow(1);

  > li {

    display: flex;
    align-items: center;
    color: black;
    padding: 0.5rem 1.2rem $gutter/2 0.5rem;
    cursor: pointer;
    width: 100%;
    text-align: left;

    a {
      font-size:1.4rem;
      color: color(text);
      text-decoration: none;
    }

    &:not(.title):hover {
      background-color: darken(greys(white), 5%);
    }

    &.title {
      font-size: 0.9em;
      justify-content: center;
      padding: 0.2rem 1.2rem 0.2rem 0.5rem;
      background-color: color(primary);
      color: white;
    }

    &.selected {
      background-color: darken(greys(white), 5%);
    }

    &.divider {
      min-height: 0;
      height: 1px;
    }
    
  }

  >li:not(:last-child){
    border-bottom:1px solid greys(10%);
  }

}

.dropdown-trigger.on-white {
  background-color: greys(5%);
}

.dropdown-trigger .iconfont {
  &:not(.normal-size) {
    font-size: 2rem;
  }
}

.dropdown.visible {
  pointer-events: auto;
  opacity: 1;
}

.dropdown-icon {
  flex: 0 0 5rem;
}
