@import "mixins/all";

$listing-image-cellpadding: lines(0.5);

.listing-images {
  margin-top: lines(0.5);
  margin-bottom: lines(1);
  @include clearfix;

  margin-right: $listing-image-cellpadding * -1;
}

@mixin fileupload-thumbnail($border: 0) {
  $available-space: lines(19) - (2 * lines(0.5)) - (2 * $listing-image-cellpadding); // centered section, 19 lines minus 0.5 padding
  $width: ($available-space / 3);
  width: $width;
  height: $width;
  border-radius: 2 * $default-border-radius;

  // Colors
  border: darken(#EEE, 5%) dashed em($border);
}

.fileupload-remove-hover {
  &:hover > .fileupload-preview-remove-image,
  .touch & .fileupload-preview-remove-image {
    display: block;
  }
}

.fileupload-preview-image {
  @include fileupload-thumbnail;
}

.fileupload-preview-remove-image {
  // Position
  $width: lines(1.5);
  position: absolute;
  width: $width;
  height: $width;
  right: 0;
  top: 0;

  display: none;

  // Center
  line-height: $width;
  text-align: center;

  // Borders and background
  border-top-right-radius: 2 * $default-border-radius;
  border-bottom-left-radius: 2 * $default-border-radius;
  background-color: rgb(66, 66, 66); // Old browser fallback
  background-color: rgba(0, 0, 0, 0.5);

  // Color
  color: darken($background, 20%);

  &:hover {
    cursor: pointer;
    color: $background;
  }
}

.fileupload-removing {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  @include fileupload-thumbnail;

  background-color: rgba(255, 255, 255, 0.8);
}

.fileupload-text-container {
  padding-left: em(5);
  padding-right: em(5);

  @include fileupload-thumbnail(3);
  text-align: center;

  color: darken(#EEE, 33%);

  // Center multiline text
  @include vertical-centering-table-container;
}

.upload-image-placeholder {
  @include fileupload-thumbnail;
  float: left;
  background-color: #FAFAFA;

  &:hover .fileupload-text-container, &.hover .fileupload-text-container {
    border-color: darken(#EEE, 20%);
  }


  margin-right: $listing-image-cellpadding;
  margin-bottom: $listing-image-cellpadding;
}

.fileupload-centered-text {
  @include vertical-centering-table-content;
}

.fileupload-small-text {
  margin-top: em(5);
  @include small-type;
}