// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------

$uiza-preview-padding: $uiza-tooltip-padding !default;
$uiza-preview-bg: $uiza-tooltip-bg !default;
$uiza-preview-radius: $uiza-tooltip-radius !default;
$uiza-preview-shadow: $uiza-tooltip-shadow !default;
$uiza-preview-arrow-size: $uiza-tooltip-arrow-size !default;
$uiza-preview-image-bg: $uiza-color-gray-2 !default;
$uiza-preview-time-font-size: $uiza-font-size-time !default;
$uiza-preview-time-padding: 3px 6px !default;
$uiza-preview-time-bg: rgba(0, 0, 0, 0.55);
$uiza-preview-time-color: #fff;
$uiza-preview-time-bottom-offset: 6px;

.uiza__preview-thumb {
  background-color: $uiza-preview-bg;
  border-radius: 3px;
  bottom: 100%;
  box-shadow: $uiza-preview-shadow;
  margin-bottom: $uiza-preview-padding * 2;
  opacity: 0;
  padding: $uiza-preview-radius;
  pointer-events: none;
  position: absolute;
  transform: translate(0, 10px) scale(0.8);
  transform-origin: 50% 100%;
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  z-index: 2;

  &--is-shown {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }

  // The background triangle
  &::before {
    border-left: $uiza-preview-arrow-size solid transparent;
    border-right: $uiza-preview-arrow-size solid transparent;
    border-top: $uiza-preview-arrow-size solid $uiza-preview-bg;
    bottom: -$uiza-preview-arrow-size;
    content: '';
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 2;
  }

  &__image-container {
    background: $uiza-preview-image-bg;
    border-radius: ($uiza-preview-radius - 1px);
    overflow: hidden;
    position: relative;
    z-index: 0;

    img {
      height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
      left: 0;
      max-height: none;
      max-width: none;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  // Seek time text
  &__time-container {
    bottom: $uiza-preview-time-bottom-offset;
    left: 0;
    position: absolute;
    right: 0;
    white-space: nowrap;
    z-index: 3;

    span {
      background-color: $uiza-preview-time-bg;
      border-radius: ($uiza-preview-radius - 1px);
      color: $uiza-preview-time-color;
      font-size: $uiza-preview-time-font-size;
      padding: $uiza-preview-time-padding;
    }
  }
}

.uiza__preview-scrubbing {
  bottom: 0;
  filter: blur(1px);
  height: 100%;
  left: 0;
  margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
  opacity: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  z-index: 1;

  &--is-shown {
    opacity: 1;
  }

  img {
    height: 100%;
    left: 0;
    max-height: none;
    max-width: none;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%;
  }
}