.dropdown {
  position: relative;

  &_trigger {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
  }

  & > ul {
    padding: 0;
    list-style-type: none;

    &.over {
      @include absolute-fit;
      top: 100%;
      bottom: auto;
      z-index: 10;
      background-color: var(--color-neutral-weak-max);
      border-radius: 4px;
      border: 1px solid var(--color-neutral-weak-20);
    }

    &.open {
      animation: fade-in-down 0.2s forwards;
    }

    &.close {
      animation: fade-out-up 0.2s forwards;
    }

    @keyframes fade-in-down {
      from {
        margin-top: calc(0px - var(--space-light-md));
        opacity: 0;
      }
    }

    @keyframes fade-out-up {
      to {
        margin-top: calc(0px - var(--space-light-md));
        opacity: 0;
      }
    }
  }

  &_option {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
  }

  &.bottom &_trigger,
  &.bottom &_option,
  &.bottomStart &_trigger,
  &.bottomStart &_option {
    text-align: left;
  }

  &.bottomStart > ul.over {
    right: auto;
  }

  &.bottomEnd &_trigger,
  &.bottomEnd &_option {
    text-align: right;
  }

  &.bottomEnd > ul.over {
    left: auto;
  }
}

@media #{$media-md-above} {
  .dropdown {
    &_trigger:hover {
      color: var(--color-primary-base);
    }

    &_option:hover {
      background-color: var(--color-primary-weak-30);
    }
  }
}
