@use '../../assets/styles/mixins' as *;

.ff-overview-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  @include center-content;
}

.ff-overview-modal-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: var(--dotted-border-color);
  border: 2px solid var(--custom-table-header-bg-color);
  overflow: auto;
  border-radius: 8px;
  width: var(--modal-width, 800px);
  height: var(--modal-height, 432px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &.ff-overview-maximized-container {
    width: 100vw;
    height: 100vh;
    top: var(--modal-top, 0);
    left: 0;
    transform: none;
    border-radius: 0;
  }

  .ff-overview-modal-header {
    @include center-vertical;
    padding: 5px;
    background-color: var(--custom-table-header-bg-color);
    height: 32px;

    .ff-overview-modal-icons {
      margin-left: auto;
      @include center-vertical;
      gap: 16px;
      cursor: pointer;
    }
  }

  .ff-overview-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    &.ff-overview-modal-body--centered {
      @include flex-center;
    }

    .image-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: 50%;
      height: 100%;

      &--single {
        grid-template-columns: 1fr;
        grid-auto-rows: 1fr;
      }
    }

    .ff-overview-modal-image-item {
      position: relative;
      overflow: hidden;
      background-color: var(--base-bg-color);
      border: 2px solid var(--table-column-text-color);
      contain: paint;
      will-change: transform;
      video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: transform;
      }

      .ff-overview-modal-image-name {
        position: absolute;
        top: 5px;
        left: 5px;
        @include center-vertical;
        padding: 2px 8px;
        border-radius: 50px;
        background: var(--ff-chip-bg);
        z-index: 2;
      }

      .ff-overview-modal-image-time {
        position: absolute;
        bottom: 5px;
        left: 5px;
        @include center-vertical;
        padding: 2px 8px;
        border-radius: 50px;
        background: var(--dotted-border-color);
        z-index: 2;
      }

      .ff-overview-modal-image-action {
        position: absolute;
        top: 5px;
        right: 5px;
        cursor: pointer;
        z-index: 2;
      }
      .ff-overview-modal-scripts {
        @extend .ff-overview-modal-image-time;
        left: auto;
        right: 5px;
      }
    }
  }
}