@import "../settings/variables";
@import "../tools/forms";
@import "../tools/typography";
@import "../tools/ellipsis";

$size--sm: 40px;
$size--lg: 104px;
$row-layout-caption-width: 288px;
$label-height: 24px;

@mixin overlay_black {
  background-color: $core-black;
  opacity: 0.2;
}

@mixin overlay_white {
  background-color: $core-white;
  opacity: 0.5;
}

@mixin word_wrap {
  // for IE11, use word-wrap property
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@mixin thumbnail {
  $root: &;

  position: relative;
  overflow: hidden;
  border: 1px solid $thumbnail-border-color;
  border-radius: 4px;

  &--clickable {
    cursor: pointer;
  }

  &:focus,
  &--focused {
    @include focus();
  }

  &--disabled#{&}--clickable {
    cursor: not-allowed;
  }

  &--lg {
    width: $size--lg;
    height: $size--lg;
  }

  $tick_size: 24px;

  &__tick {
    position: absolute;
    top: spacing(sm);
    right: spacing(sm);
    width: $tick_size;
    height: $tick_size;
    opacity: 0;
    transform: scale(0.75);
    transition: transform 250ms ease-out, opacity 100ms ease-out;
  }

  &--selected {
    #{$root}__tick {
      opacity: 1;
      transform: scale(1);
    }
  }

  &--sm {
    width: $size--sm;
    height: $size--sm;

    #{$root}__tick {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -$tick_size/2;
      margin-left: -$tick_size/2;
    }
  }
}

.image-thumbnail {
  $root: &;
  $disabled: #{&}--disabled;

  @include thumbnail;

  &__preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  &--selected {
    &#{$root}--focused {
      #{$root}__tick {
        z-index: 1;
      }

      &#{$disabled} {
        #{$root}__tick {
          z-index: 0;
        }
      }
    }
  }

  &#{$disabled} {
    &,
    &:hover {
      #{$root}__overlay {
        display: block;
        @include overlay_white;
      }
    }

    #{$root}__image,
    #{$root}__preview,
    #{$root}__tick {
      filter: saturate(0);
    }
  }

  &__overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  &--focused,
  &--clickable:hover {
    &:not(#{$disabled}) {
      #{$root}__overlay {
        display: block;
        @include overlay_black;
      }
    }
  }
}

.placeholder-thumbnail {
  $root: &;

  @include thumbnail;

  &--clickable:hover {
    background-color: $thumbnail-placeholder-hover-background-color;
  }

  &--selected#{$root}--sm {
    #{$root}__file-icon {
      display: none;
    }
  }

  &--disabled {
    #{$root}__file-icon,
    #{$root}__tick {
      filter: saturate(0);
      opacity: 0.5;
    }

    &:hover {
      background-color: inherit;
    }
  }

  &--disabled:not(#{&}--selected) {
    #{$root}__tick {
      opacity: 0;
      transform: scale(0.75);
    }
  }

  &__file-icon {
    width: 36.5%;
    height: auto;
  }
}

.tooltip-content {
  @include word_wrap;
}

.caption {
  @include xs-regular--primary;

  &--row {
    margin-left: 8px;
    width: $row-layout-caption-width;
  }

  &--column {
    margin-top: 2px;
    width: $size--lg;
  }

  &--error {
    color: $core-red-50;
  }

  &--disabled {
    color: $core-gray-70;
  }
}

.multiline-caption {
  $root: &;

  @include word_wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  // limit height for browsers that do not support line-clamp CSS prop
  max-height: $typography-xs-line-height * 2;

  &--disabled {
    color: $core-gray-70;
  }

  &__text {
    // fix word wrap issue in IE
    width: 100%;
  }
}

.singleline-caption {
  &__body {
    @include ellipsis;
  }

  &__ending {
    max-width: 50%;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

.label {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  opacity: 0.85;

  height: $label-height;
  padding: (spacing(sm) / 2) spacing(sm);

  font-size: $typography-xs-font-size;
  background-color: $core-white;

  &__text {
    @include ellipsis;
  }
}