.Container-outer { position: absolute; display: flex; flex-direction: column; left: 0; bottom: 100%; height: auto !important; max-height: 20rem; overflow: hidden; } .Container-inner { opacity: 1; display: flex; gap: 0.5rem; flex-direction: column-reverse; min-width: 13rem; max-width: 19rem; padding: 0.5rem; background-color: rgba(25, 25, 25, 75%); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; backdrop-filter: blur(15px); transform: none; transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; overflow: hidden; resize: horizontal; } .Container-outer:not(.Active) { pointer-events: none; } .Container-outer:not(.Active) .Container-inner { opacity: 0; transform: translateY(100px); } .Container-inner > div { margin-top: auto; } .Input { width: 100%; padding: 0.25rem 0.5rem; color: var(--foreground-color-a); background-color: rgba(0, 0, 0, 25%); border: none; border-radius: 0.5rem; outline: none; font-family: inherit; font-size: inherit; }