.dropdown {
  position: relative;
  display: inline-block;

  &.dropdown-vp .dropdown-content {
    overflow-y: auto;
  }

  .dropdown-content {
    position: absolute;
    left: 0;
    display: none;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    z-index: var(getCssVar(dropdown-z-index));

    &.dropdown-right {
      right: 0;
      left: unset;
    }

    &.dropdown-constrain-width {
      right: 0;
      left: 0;
      word-break: break-word;
      white-space: normal;
    }

    .dropdown-item {
      color: inherit;
      padding: 1rem 1.25rem;
      transition: background-color 0.2s ease;

      &:hover,
      &.active {
        background-color: var(getCssVar(hover-background));
      }
    }
  }

  &.active-hover:hover .dropdown-content {
    display: flex;
  }

  &.dropdown-anim-fade {
    .dropdown-content {
      transition-timing-function: ease-in-out;
      transition-property: opacity;
      transition-duration: inherit;
      opacity: 0;
    }

    &.active .dropdown-content {
      opacity: 1;
    }
  }
}