@use "sass:color";
@use "./../variables" as *;

.dialog {
  padding: var(--spacer);
  background-color: transparent;
  border: 0 none;
  max-width: 100%;
  max-height: 100%;
  width: 100%;

  & > * {
    margin: 0 auto;
  }

  &::backdrop {
    background: $modal-open-background;
    backdrop-filter: blur($modal-background-blur);
  }

  & .close {
    position: absolute;
    right: calc(var(--spacer) * 0.5);
    top: calc(var(--spacer) * 0.5);
    z-index: 1;
  }

  &[open] {
    animation: open-dialog 0.25s ease normal;
  }
}

@keyframes open-dialog {
  0% {
    opacity: 0;
    transform: translateY(-50vh);
  }

  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}