.media-gallery {
  @apply rounded-lg box-border overflow-hidden isolate relative w-full h-auto;

  &__item {
    @apply rounded-sm border-0 box-border block float-left relative overflow-hidden;

    &__icons {
      @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;

      .svg-icon {
        @apply size-24;
      }
    }

    &-overflow {
      @apply absolute w-full h-full inset-0 bg-white/75 z-[2] text-center font-bold text-5xl flex items-center justify-center pointer-events-none;
      color: #333;
    }

    &-thumbnail {
      @apply text-gray-400 cursor-zoom-in block no-underline leading-[0] relative z-[1] h-full w-full;

      video {
        @apply w-full h-full object-cover
      }
    }
  }

  &__preview {
    @apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
  }

  &__gifv {
    @apply h-full overflow-hidden relative w-full;
  }

  &__item-gifv-thumbnail {
    @apply rounded-md cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
  }

  &__gifv__label,
  &__filename__label,
  &__file-extension__label {
    @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90 text-xs leading-[18px];
    transition: opacity 0.1s ease;
  }

  &__gifv {
    &.autoplay {
      .media-gallery__gifv__label {
        @apply hidden;
      }
    }

    &:hover {
      .media-gallery__gifv__label {
        @apply opacity-100;
      }
    }
  }

  &--compact {
    .media-gallery__item {
      @apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};

      &-overflow {
        @apply text-xl;
      }

      &__icons .svg-icon {
        @apply h-8 w-8;
      }
    }

    .media-gallery__file-extension__label {
      @apply hidden;
    }
  }
}
