@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;
@use '_bootstrap-variables' as *;

@mixin miniature-name {
  transition: color 0.2s;
  font-weight: $font-bold;
  color: pvar(--fg);

  @include peertube-word-wrap(false);

  &:hover {
    text-decoration: none;
  }
}

@mixin miniature-thumbnail {
  $play-overlay-transition: 0.2s ease;
  $play-overlay-height: 26px;
  $play-overlay-width: 18px;

  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  transition: filter $play-overlay-transition;

  @include disable-outline;

  .play-overlay {
    position: absolute;
    right: 0;
    bottom: 0;

    width: inherit;
    height: inherit;
    opacity: 0;
    background-color: rgba(46, 35, 35, 0.80);

    &,
    .icon {
      transition: all $play-overlay-transition;
    }

    .icon {
      @include play-icon($play-overlay-width, $play-overlay-height);

      &::before {
        $background-play-size: 49px;

        display: block;
        content: '';
        width: $background-play-size;
        height: $background-play-size;

        top: math.round(math.div($background-play-size, 2)) * -1;
        // Add some pixels at the end because it's visually better
        right: #{math.round(math.div($background-play-size - $play-overlay-width, 2)) * -1 + 3};

        border-radius: 100%;
        position: absolute;
        background-color: pvar(--primary-450);
        opacity: 0.3;
      }
    }
  }

  &:hover {
    text-decoration: none !important;

    .play-overlay {
      opacity: 1;

      .icon {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }

  img {
    width: inherit;
    height: inherit;

    &.blur-filter {
      --thumbnailBlur: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="thumbnailBlur" primitiveUnits="objectBoundingBox"><feGaussianBlur stdDeviation="0.07 0.125"></feGaussianBlur><feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix><feComposite in2="SourceGraphic" operator="in"></feComposite></filter></svg>#thumbnailBlur');
      
      filter: var(--thumbnailBlur);
    }
  }
}

@mixin thumbnail-size-component ($width, $height) {
  ::ng-deep .video-thumbnail {
    width: $width;
    height: $height;
  }
}

@mixin static-thumbnail-overlay {
  display: inline-block;
  background-color: rgba(17, 17, 17, 0.8);
  color: #E9DFDF;
}

@mixin grid-videos-miniature-margins {
  --grid-videos-miniature-margins: #{pvar(--x-margin-content)};

  @include margin-left(var(--grid-videos-miniature-margins) !important);
  @include margin-right(var(--grid-videos-miniature-margins) !important);

  @media screen and (max-width: $mobile-view) {
    --grid-videos-miniature-margins: 0;

    width: auto;
  }
}

@mixin grid-videos-miniature-layout ($rows-limit: 0) {
  @media screen and (min-width: $mobile-view) {
    .videos,
    .playlists {
      --co-miniature-min-width: #{$video-thumbnail-width - 25px};
      --co-miniature-max-width: #{$video-thumbnail-width};

      display: grid;
      column-gap: 30px;
      grid-template-columns: repeat(
        auto-fill,
        minmax(var(--co-miniature-min-width), 1fr)
      );

      @if ($rows-limit != 0) {
        grid-template-rows: repeat($rows-limit, auto);
        overflow: hidden;
        grid-auto-rows: 0;
      }

      .video-wrapper,
      .playlist-wrapper {
        margin: 0 auto;
        width: 100%;

        my-video-miniature,
        my-video-playlist-miniature {
          display: block;
          min-width: var(--co-miniature-min-width);
          max-width: var(--co-miniature-max-width);
        }
      }

      @media screen and (min-width: #{breakpoint(fhd)}) {
        column-gap: 2%;
      }
    }
  }
}

@mixin grid-videos-miniature-layout-with-margins ($rows-limit: 0) {
  @include grid-videos-miniature-margins;
  @include grid-videos-miniature-layout($rows-limit);
}
