dropdown.scss

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

  &:hover {
    .dropdown {
      pointer-events: inherit;
      visibility: visible;
      opacity: 1;
      transform: translateY(0px);
    }
  }

  .dropdown {
    background-color: #FFF;
    pointer-events: none;
    visibility: hidden;
    z-index: 10;
    color: #111;
    position: absolute;
    top:100%;
    right:0;
    min-width: 100%;
    border-radius: 3px;

    box-shadow: 1px 1px 5px rgba(0,0,0,.3);
    transform: translateY(-5px);
    opacity: 0;
    transition: opacity .3s, transform .3s cubic-bezier(0.19, 1, 0.22, 1);

    a {
      justify-content: flex-start;
      font-size: .9rem;
      padding: 8px 15px;
      cursor: pointer;

      &:hover {
        background-color: var(--bg-teritary);
      }
    }
  }
}