dialog {
  bottom: 0;
  position: fixed;
  padding: 0;
  max-height: calc(100dvh - var(--header-height));
  flex-direction: column;
  align-items: flex-start;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  box-shadow: 0 -4px 16px 0 rgba(0, 0, 0, 0.8);
  max-width: 100%;
  background: var(--bg-default, #1c1e24);
  margin: 0;
  border: none;
  translate: 0;
  transition: all 0.6s;
  animation-delay: 10s;
  outline: unset;
  width: 100%;
  z-index: 10;
  background-color: #1c1e24;
  top: 100%;
}

dialog[open] {
  animation: show 1s ease forwards;

  @media (min-width: 540px) {
    transform: translate(0, -3rem);
  }
}

dialog[open]::backdrop,
dialog[open]::-webkit-backdrop {
  animation: blurIn 1s ease forwards;
}

dialog.hide {
  animation: hide 1s ease-in-out forwards;
}

dialog.hide::backdrop,
dialog.hide::-webkit-backdrop {
  animation: blurOut 1s ease forwards;
}

dialog::-webkit-backdrop {
  background: rgba(0, 0, 0, 0.8);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
  transition-behavior: allow-discrete;
}

@keyframes show {

  0%,
  50% {
    opacity: 0;
    translate: 0 100%;
  }

  to {
    opacity: 1;
    translate: 0 -100%;
  }
}

@keyframes hide {

  0% {
    translate: 0 -100%;
  }

  to {
    translate: 0 100%;
  }
}

@keyframes blurIn {
  0% {
    backdrop-filter: blur(0);
    opacity: 0;
  }

  to {
    backdrop-filter: blur(15px);
    opacity: 1;
  }
}

@keyframes blurOut {

  0% {
    backdrop-filter: blur(15px);
    opacity: 1;
  }

  to {
    backdrop-filter: blur(0);
    opacity: 0;
  }
}

body:has(dialog[open]) {
  overflow: hidden;
}