:host(.modal) {
  display: block;
}

.modal__overlay, .modal__wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 1000;
}

.modal__overlay {
  background-color: var(--neutral-03);
}

.modal__overlay--fadeIn {
  -webkit-animation: fadeInModal 0.4s linear forwards;
          animation: fadeInModal 0.4s linear forwards;
}

.modal__overlay--fadeOut {
  -webkit-animation: fadeOutModal 0.4s linear forwards;
          animation: fadeOutModal 0.4s linear forwards;
}

.modal__overlay--visible {
  display: block;
  opacity: 0.8;
}

.modal__overlay--hidden {
  display: none;
  opacity: 0;
}

.modal__wrap {
  overflow: auto;
  outline: 0;
  padding: 4.8rem 0;
}

.modal__close {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 1.6rem;
  margin-right: 1.6rem;
  outline: 0;
  display: block;
}

.modal__close--primary {
  color: var(--primary);
}

.modal__close--secondary {
  color: var(--secondary);
}

.modal__content {
  background-color: var(--neutral-04);
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.4rem;
  position: relative;
  box-shadow: 0 8px 32px -16px #4a4a4a;
  padding: 4.8rem 3.2rem 3.2rem;
  -webkit-transform-origin: top center;
          transform-origin: top center;
}

.modal__content--sm {
  max-width: 32rem;
}

.modal__content--md {
  max-width: 57.6rem;
}

.modal__content--zoomIn {
  -webkit-animation: zoomInModal 0.3s ease forwards;
          animation: zoomInModal 0.3s ease forwards;
}

.modal__content--zoomOut {
  -webkit-animation: zoomOutModal 0.3s ease forwards;
          animation: zoomOutModal 0.3s ease forwards;
}

@-webkit-keyframes fadeInModal {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.8;
  }
}

@-webkit-keyframes fadeOutModal {
  from {
    opacity: 0.8;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOutModal {
  from {
    opacity: 0.8;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes zoomInModal {
  from {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomInModal {
  from {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes zoomOutModal {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}

@keyframes zoomOutModal {
  from {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
}