.dropdown {
  position: relative;
  &-menu {
    position: absolute;
    top: 100%;
    z-index: 30;
    height: 0;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    width: 250px;
    opacity: 0;
    background: white;
    border-radius: 5px;
    &.to-right {
      left: auto;
      right: 0;
    }
    &.to-left {
      right: auto;
      left: auto;
    }
  }
  .nav {
    &-item {
      width: 100%;
    }
  }
}
.dropdown:hover {
  .dropdown-menu {
    height: fit-content;
    opacity: 1;
    box-shadow: 0 0 8px rgba($color: #000000, $alpha: 0.53);
  }
}