:host {
  outline: none;
  position: relative;
}

@keyframes scale-up {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes hide {
  from { opacity: 1; }
  to { opacity: 0; }
}

.top {
  bottom: 0;
}
.right {
  left: 1em;
}
.left {
  right: 1em;
}

.content {
  animation: scale-up 0.1s ease-out forwards;
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  z-index: 11;
  transform-origin: top right;
  background-color: var(--default-bg);
  box-shadow: 0px 1px 3px rgba(3, 3, 3, 0.2);
  border-radius: var(--radius);
  overflow: hidden;
}

.content.top {
  transform-origin: bottom right;
}

.isOpen {
  display: block;
}

.menu-trigger {
  cursor: pointer;
}

.listHide {
  animation: hide 0.2s forwards;
}