/* <ul>...</ul>  */
@define-mixin dropdown-menu {
  min-width:     25rem;
  margin:        0;
  padding:       .2em 0;
  background:    white;
  border:        1px solid $mountain;
  border-radius: $timestamp-tooltip-border-radius;
  list-style:    none;
  text-align:    left;
  /*
   * TODO this is shared in several places ... should it be in a mixin
   */
  box-shadow:    -.1em .1em .4em rgba(0, 0, 0, .3);
}


/* <li>...</li>  */
@define-mixin dropdown-menu__list-item {
  margin:        .4em .7em;
  border-radius: $timestamp-tooltip-border-radius;
  padding:       .5em 1em;
  transition:
    background-color 0.1s ease,
    color 0.1s ease;
}

@define-mixin dropdown-menu__list-item__hover--positive {
  background: color($caribbean saturation(- 2%) shade(10%));
  color:      white;
  cursor:     pointer;
}

@define-mixin dropdown-menu__list-item__hover--negative {
  background: color($ruby saturation(- 2%) shade(10%));
  color:      $ruby;
  cursor:     pointer;
}


/* <a>...</a> */
@define-mixin dropdown-menu__anchor {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* <li class="divider"></li>  */
@define-mixin dropdown-menu__divider {
  width:         100%;
  height:        0;
  margin:        0;
  padding:       0;
  background:    none;
  border-bottom: 1px solid $mountain;
}