/* SPDX-License-Identifier: Apache-2.0 */
#swipe-up-panel {
  position: absolute;
  height: 100dvh;
  z-index: 20;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  overflow: hidden;
  backdrop-filter: blur(5px);
  background: var(--bkg-color);
}

@media (orientation: portrait) {
  #swipe-up-panel {
    width: 100vw;
  }
}

/*
  When on mobile in landscape mode, the panel takes about half the width,
  and has a margin on the left to not be stuck to the side of the screen
*/
@media (orientation: landscape) {
  #swipe-up-panel {
    width: max(min(calc(50vw - env(safe-area-inset-left) - 1.5rem), 550px), 440px);
    left: calc(env(safe-area-inset-left) + 1rem);
  }
}

.top-container {
  position: relative;
  width: 100%;
  height: 35px;
  z-index: 2;
  background: inherit;
  backdrop-filter: blur(5px);
}

.middle-container {
  width: calc(100% - 2rem);
  overflow: scroll;
  margin-top: -35px;
  padding-top: 35px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.handle-container {
  position: relative;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.handle {
  position: absolute;
  width: 3rem;
  height: 4px;
  border-radius: 10px;
  background-color: rgba(119, 119, 119, 0.6);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.close-button {
  opacity: 0.6;
  position: absolute;
  top: 0.3rem;
  right: 1rem;
}

.easeTransition {
  transition: all ease 0.3s;
}

.upsideDown {
  transform: rotate(180deg);
}

.hidden {
  visibility: none;
}

.dark-mode {
  background-color: #000000bb;
}

.dark-mode .close-button {
  filter: invert();
  opacity: 0.4;
}

.light-mode {
  background-color: #ffffffbb;
}