html {
  opacity: 1 !important;
  transition: opacity 400ms ease-in-out;
}

button {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

hr {
  display: block;
  border: 0.5px solid #ddd;
  height: 0;
  margin: 12px 0;
}

[chooser] {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -500px;
  width: 320px;
  max-width: 100vw;
  z-index: 9999;
  /* color: #ececec; */
  background-color: white;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  transition: left 400ms ease-in-out;
  border: 1px solid orange;
}

[chooser][show] {
  left: 0;
}

[menu] {
  position: relative;
  width: 320px;
  height: 400px;
  border: 1px solid orange;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 400ms;
  margin-top: -2px;
  overflow: hidden;
}
[menu][show] {
  opacity: 1;
}

#test {
  font-size: 1em;
  height: 6em;
  display: flex;
  align-items: center;
}