$drop-themes: _pick($ui-colors, (dark, dark-blue, light, normal, off-light));

.dropdown-menu {
  &__content {
    padding: 0.5em;
    font-size: font-size(body, small);
    margin-top: -1px;

    @each $theme, $color in $drop-themes {
      &--#{$theme} {
        background: $color;

        @if ($theme == off-light or $theme == normal) {
          background: $white;
        }

        @if ($theme == light or $theme == off-light) {
          border: 1px solid palette(gray, light);
        }

        @if ($theme == dark or $theme == dark-blue) {
          background: darken($color, 5%);
          border: 1px solid darken($color, 10%);
        }
      }
    }
  }

  &__overlay {
    @include abs-overlay();
  }

  &__btn {
    border-radius: 0;
    font-size: font-size(body, small);
    padding: 0.875em 1em;
    margin-right: 0.5em;

    &:last-of-type {
      margin-right: 0;
    }

    &.btn--light,
    &.btn--off-light {
      border: 1px solid palette(gray);
      color: palette(gray);
    }
  }

  &__header {
    margin-bottom: 1em;
  }

  &__list {
    list-style: none;
    margin: 0;
    max-height: 200px;
    overflow: auto;
    padding: 0;
    width: 100%;
  }

  &__item {
    list-style: none;
    position: relative;
  }

  &__checkbox {
    padding: 0.5em 1em;
    display: flex;
    align-items: center;

    input {
      margin-right: 0.5em;
    }

    .dropdown-menu__content--dark &,
    .dropdown-menu__content--dark-blue & {
      label {
        color: $white;
      }
    }
  }

  &__link,
  &__span {
    @include pop();

    align-items: center;
    color: palette(gray, dark);
    display: flex;
    flex: 1;
    opacity: 0.6;
    outline: none;
    padding: 1em;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;

    &.device-link {
      text-align: left;
    }

    .ember-tether-element-attached-right & {
      justify-content: flex-end;
    }

    .dropdown-menu__content--dark &,
    .dropdown-menu__content--dark-blue & {
      color: $white;
    }

    &:hover {
      cursor: pointer;
      opacity: 1;
    }

    .align--center & {
      text-align: center;
    }

    .align--right & {
      text-align: right;
    }

    .align--left & {
      text-align: left;
    }
  }
}

.ember-tether {
  z-index: $zIndex-9;
}

// Probably becomes own component
.filter-bar {
  display: flex;
  padding: 0.5em 1em;

  &--light {
    background: $white;
  }

  &--off-light {
    background: $white;
  }

  .btn-group {
    .btn + .btn {
      margin-left: 0.5em;
    }
  }
}