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

.modal {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0 none;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  min-height: 100vh;

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

  & .modal__body {
    overflow-y: auto;
    padding: $grid-gutter;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    position: fixed;
    inset: 0;
    animation: open-modal 0.25s ease normal;
  }
}

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

  20% {
    opacity: 0;
  }

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