@import '@/styles/mixins.less';
@import '@/styles/variables.less';

.fileModalDescriptions {
  margin-top: @gap-lg;

  .fileModalImage {
    max-width: 100%;
  }

  .fileModalVideo {
    border: none;
    width: 100%;
  }

  .fileModalAudio {
    width: 100%;
  }

  .fileModalIframe {
    border: none;
    width: 100%;
  }

  .fileModalPdf {
    border: none;
    width: 100%;
    min-height: 50vh;
  }
}

.fileGridList {
  @itemSize: 94px;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, @itemSize);
  grid-gap: @gap-lg;

  .listItem {
    .handler {
      width: 100%;
      height: @itemSize;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid @color-border-secondary;
      border-radius: @border-radius-sm;
      font-size: @font-size-h2;
      overflow: hidden;
      cursor: pointer;

      .image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      &:hover {
        color: @color-primary;
        border-color: @color-primary;
        & + .name {
          color: @color-text;
        }
      }
    }

    .name {
      margin: 0;
      margin-top: @gap-xx;
      max-width: 100%;
      font-size: small;
      text-align: center;
      color: @color-text-secondary;
      .text-truncate();
    }
  }
}
