@import '../../../../bootstrap/less/thumbnails';

//
// Thumbnails
// --------------------------------------------------

// Simple image thumbs with hover/focus zooming animation
// - See Pattern Library for examples of markup
.thumb-container {
  overflow: hidden;
  position: relative;
  background-color: @thumb-bg;

  & when (@thumbnail-border-radius > 0) {
    border-radius: @thumbnail-border-radius;

    .thumbnail & {
      border-radius: @thumbnail-border-radius - 1;
    }
  }
}

.thumb-container {
  @speed: .2s;
  @transform-speed: @speed*2.5;
  display: block;
  .transition(background-color @speed ease-out);

  &,
  > .thumb {
    .translate3d(0,0,0); // Overflow transform hack
  }

  > .thumb {
    .transition(~"opacity @{speed} ease-out, transform @{speed} ease-out");
  }

  &:hover,
  &:focus {
    background-color: @thumb-hover-bg;

    > .thumb {
      .scale(@thumb-hover-scale);
      .opacity(@thumb-hover-opacity);
      .transition(~"opacity @{speed} ease-out, transform @{transform-speed} ease-out");
    }
  }
}