assayo/src/ts/components/ModalWindow/styles/index.module.scss

.modal_window,
.modal_window_fullscreen {
  display: block;
  width: 400px;
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0 0 5px gray;
  background-color: var(--color-white);
  border-radius: var(--border-radius-m);
}

.modal_window_fullscreen {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  max-height: 70vh;
  width: 100vw;
  max-width: 100vw;
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
  animation: modal_window_fullscreen 0.2s ease-out forwards;
}

@keyframes modal_window_fullscreen {
  from {
    bottom: -70vh;
  }
  to {
    bottom: 0;
  }
}

.modal_window {
  position: relative;

  &_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  &_halo {
    position: absolute;
    top: -50px;
    left: -80px;
    z-index: -1;
    display: block;
    width: 560px;
    animation: modal_window_halo 40s linear 0s infinite normal none running;
  }

  &_title,
  &_body,
  &_footer {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;

    text-align: left;
    white-space: normal;
  }

  &_title {
    position: relative;
    padding: 24px;
    border-radius: 8px 8px 0 0;
  }

  &_body {
    max-height: calc(60vh - 200px);
    padding: 0 24px;
    overflow: auto;
    line-height: 1.5;
  }

  &_footer {
    padding: 24px;
    text-align: right;
    border-radius: 0 0 8px 8px;
  }

  &_locker,
  &_close {
    position: absolute;
    top: 12px;
    right: 12px;
  }

  &_close {
    display: block;
    width: 32px;
    height: 32px;

    cursor: pointer;
    transition: transform 1s ease-in-out;

    &:hover {
      transform: rotate(180deg);
    }
  }
}

.modal_window_fullscreen .modal_window_close {
  display: none;
}

@keyframes modal_window_halo {
  from {
    transform: rotateZ(0deg);
    opacity: 0.4;
  }
  11% {
    opacity: 0.7;
  }
  89% {
    opacity: 0.7;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 0.4;
  }
}