/*
 * Dashboard Activation Dropdown
 */

$dropdown-border: #C3D9DB

.dropdown--db
  @include resetul
  border-radius: 4px
  position: absolute
  padding: .8em .5em
  z-index: 90
  width: 12.5em;
  right: 0;
  top: 4em;
  border: 2px $dropdown-border solid;
  background-color: $white
  display: none
  a
    display: block
    padding: 0.4em 1em .2em
    &:hover
      background-color: $dropdown-color
      color: $white
  &:before
    content: ""
    width: 1.2em
    height: 1.2em
    display: block
    position: absolute
    top: -0.7em;
    right: 1.1em;
    background-color: $white
    border-top: solid 2px $dropdown-border;
    border-left: solid 2px $dropdown-border;
    transform: rotate(45deg);


/*
 * Dashboard Organizations Dropdown
 */
.filter
  position: relative
  img
    max-width: 20px
    max-height: 20px
    margin-right: .5em
    margin-top: -0.1em
    border-radius: 50%
    overflow: hidden

.filter--org
  float: left

.filter-current
  padding: .9em 0
  cursor: pointer
  a
    color: $teal-dark

.filter-dropdown
  @include resetul
  position: absolute
  top: 3em
  min-width: 14em
  background-color: $white
  border-radius: 2px
  overflow: hidden
  border: 1px solid $cream-dark
  border-top: none
  z-index: 40
  display: none
  li
    white-space: nowrap
  a
    display: inline-block
    width: 100%
    padding: 10px 10px 10px 20px
    &:hover
      color: $white
      background : $teal-dark
  .is-selected
    a
      font-weight: 600

  &.is-open
    display: block



.dropdown
  position: relative
.dropdown--classic
  width: 10.7rem

.dropdown-button
  height: 28px
  background-color: $grey-lighter
  border: none
  color: $white
  line-height: 1
  font-size: $font-size-normal
  &:hover,
  &:focus
    background-color: #8b9595
  .icon-cog-light
    position: relative
    top: 0.15em
    left: -0.2em
  .icon-arrow-down
    border-top-color: $white

  @media #{$medium-up}
    float: right

.dropdown-menu
  @include resetul
  @extend %border-bottom-4px
  position: absolute
  top: 29px // height of the button +1
  width: 100%
  z-index: 70
  overflow: hidden
  background-color: $grey-lighter
  display: none
  a
    @extend %inline-block
    width: 100%
    padding: .4em 2em
    color: $white
    &:hover
      background-color: darken($grey-lighter, 10)
  &.display
    display: block