.document-show {

  &__section {
    @apply flex flex-row mt-4 gap-4;
  }

  &__content-side {
    @apply w-2/3 flex justify-center;

    img {
      @apply block;
    }

    video {
      @apply w-full;
    }

    div:has(iframe) {
      @apply w-full;
    }

    iframe {
      @apply aspect-square w-full border-0;
    }
  }

  &__details-side {
    @apply w-1/3;

    table {
      @apply mb-4;
    }
  }
}

.filemanager-container .mdi-icon {
  @apply text-6xl;
}

.filemanager-container .thumbnails-container {
  @apply flex justify-center;
}

.filemanager-container .thumbnails {
  @apply flex flex-wrap gap-2.5 justify-center;
}

.filemanager-container .thumbnail-item {
  @apply w-36 p-2 border border-gray-25 rounded-md text-center cursor-pointer;
}

.filemanager-container .thumbnail-item:hover {
  @apply bg-gray-15;
}

.filemanager-container .thumbnail-icon {
  @apply text-2xl w-24 h-24 object-cover flex items-center justify-center mx-auto;
}

.filemanager-container .thumbnail-title {
  @apply mt-2 text-base break-words;
}

.filemanager-container .thumbnail-actions {
  @apply mt-2 flex justify-center gap-1;
}

.filemanager-container .thumbnail-image {
  @apply w-24 h-24 object-cover;
}

.context-menu {
  @apply absolute bg-white shadow-lg z-50 rounded-md py-1 min-w-[150px] font-sans text-[14px];
}

.context-menu ul {
  @apply list-none m-0 p-0;
}

.context-menu li {
  @apply flex items-center px-4 py-2 cursor-pointer text-center transition duration-200 ease-in-out;
}

.context-menu li:hover {
  @apply bg-gray-15 shadow-inner;
}

.context-menu li .mdi {
  @apply mr-2;
}
