.dropdown {
  position: relative;
  transition: all $transition-speed $transition-easing;
  &-trigger {
    cursor: pointer;
  }
  &-menu {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 1;
    min-width: 16rem;
    &.right {
      right: 0;
    }
    &.center {
      left: 50%;
      transform: translate(-50%);
    }
  }
  &-content {
    margin-top: 0.6rem;
    background-color: $white;
    border-radius: 0.6rem;
    padding: 0.8rem;
    box-shadow: 0 0.5em 1em -0.125em rgb(44 44 44 / 10%), 0 0 0 1px rgb(44 44 44 / 2%);
    p {
      color: $black-800;
    }
  }
  &.active,
  &.hover:hover {
    .dropdown-menu {
      display: block;
    }
  }
}