.dropdown {
  display: none;
  opacity: 0;
  font-size: var(--text-sm);
}
.dropdown .wrapper {
  overflow: auto;
  height: fit-content;
  max-height: calc(100vh - 160px);
}
.dropdown.active {
  display: block;
  opacity: 1;
}
.dropdown.absolute.active {
  width: max-content;
}
.dropdown.static {
    position: static;
}
.dropdown.absolute {
  position: absolute;
  background: var(--color-white);
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);
}
.dropdown .arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-white);
  transform: rotate(45deg);
}
button[data-dropdown] .icon.arrow {
  width: .75rem;
}
button[data-dropdown][aria-expanded="true"] .icon.arrow {
  transform: scaleY(-1);
  transform-origin: center;
}