hummingbird-me/kitsu-web

.dropdown-menu {
  display: block;
  opacity: 0;
  transform: scale(.8);
  transition: all 200ms cubic-bezier(.24,.22,.015,1.56);
  backface-visibility: hidden;
  pointer-events: none;
  border: none;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  @if $theme == "kitsu-dark" {
    background-color: $secondary-background-color;
  }
  .dropdown-item {
    &:focus, &:hover {
      background-color: $secondary-background-color;
    }

    .dropdown-checkmark svg {
      fill: $body-text-color;
    }
  }
}

.dropdown-item {
  color: $body-text-color;
  
  &:hover {
    color: $body-text-color;
  }
}

.open > .dropdown-menu {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  display: block!important;
  overflow: hidden;
  @if $theme == 'kitsu-dark' {
    background-color: $secondary-background-color;
  }
  a {
    color: $body-text-color;
    
    &:hover {
      color: $body-text-color;
      background-color: $search-results-hover-background;
    }
  }
}
.open > .notification-drop {
  @if $theme == 'kitsu-dark' {
    background-color: $header-background-color;
  }
}

.dropdown-checkmark {
  svg {
    width: 14px;
    height: 14px;
  }
}

// ember-power-select
.ember-power-select-trigger {
  vertical-align: middle;
}

.ember-power-select-option {
  &[aria-selected="true"] {
    @if $theme == 'kitsu-light' {
      background-color: darken($background-color, 2);
    }
    @if $theme == "kitsu-dark" {
      background-color: $tertiary-background-color;
    }
  }
  &[aria-selected="false"] {
    @if $theme == 'kitsu-dark' {
      background-color: lighten($secondary-background-color, 5);
    }
  }
}

.ember-power-select-options {
  &[role="listbox"] {
    max-height: 16em;
  }
}

// ember-basic-dropdown
@keyframes fade-scale {
  0% {
    opacity: 0;
    transform: scale(.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.ember-basic-dropdown-content {
  z-index: 2000;
}

.ember-basic-dropdown-content:not(.ember-power-select-dropdown) {
  padding: 5px 0;
  font-size: 1rem;
  font-weight: 400;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 0.25rem;
  backface-visibility: hidden;
  will-change: opacity, transform;

  &.ember-basic-dropdown--transitioning-in {
    animation: fade-scale 200ms;
    animation-timing-function: cubic-bezier(.24, .22, .015, 1.56);
  }

  &.ember-basic-dropdown--transitioning-out {
    animation: fade-scale 200ms reverse;
    animation-timing-function: cubic-bezier(.24, .22, .015, 1.56);
  }

  &.ember-basic-dropdown--transitioning-in, &.ember-basic-dropdown--transitioning-out,
  &.ember-basic-dropdown--transitioned-in {
    a, a:hover {
      color: $body-text-color;
    }
  }
}