@include export-module('co-lightbox-layout') {
  .co-lightbox {
    .lightbox-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9999;
      opacity: $co-lightbox-overlay-opacity;
      animation-fill-mode: both;
      animation: fadeInOverlay 0.7s ease-in-out;
      &.fade-out {
        animation: fadeOutOverlay 0.7s ease-in-out;
      }
    }
    .lightbox-content {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      animation-fill-mode: both;
      animation: fadeIn 0.5s ease-in-out;
      &.fade-out {
        animation: fadeOut 0.5s ease-in-out;
        opacity: 0;
      }
    }
    .container {
      border-radius: $co-lightbox-container-border-radius;
      transform: scale(0);
      display: flex;
      flex-direction: column;
      pointer-events: all;
      animation: fadeInContent 0.7s ease-in-out both;
      animation-delay: 0.5s;
    }
    .data-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: $co-lightbox-data-container-height;
      font-size: 13px;
      .data-container-close {
        height: 100%;
        width: auto;
        aspect-ratio: 1 / 1;
        cursor: pointer;
      }
    }
  }
}

@keyframes fadeInOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: $co-lightbox-overlay-opacity;
  }
}

@keyframes fadeOutOverlay {
  0% {
    opacity: $co-lightbox-overlay-opacity;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInContent {
  0% {
    transform: scale(0%);
  }
  100% {
    transform: scale(100%);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
