@import "../../../style/mixin.scss";

@include export-module('co-image-history-layout') {
  .co-image-history {
    .image-history-container {
      box-sizing: border-box;
      padding: 20px;

      .image-history-header {

      }

      .image-history-tiles {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;
      }
    }

    .larger-image-dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1000;
      display: flex;
      justify-content: center;
      align-items: center;

      .close-dialog-button {
        position: absolute;
        top: 20px;
        right: 20px;
        cursor: pointer;
      }

      .large-image {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
      }
    }
  }
}
