/*
Property images component

Property Image modal (with placeholder on drag and drop)
* Image
* Image with caption
* Image hidden from listing
* Image with caption and hidden from listing
* Video
* Video with caption and hidden from listing
* Drag and drop placeholder

Markup:
<div>
  <div class="property-images-modal__item-container">
      <ul class="property-images-modal__item-list">
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay">
                  <span>
                      <img alt="property name here" class="property-images-modal__image" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                  </span>
              </div>
          </li>
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay icon-caption-overlay">
                  <span>
                      <img alt="property name here" class="property-images-modal__image" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                  </span>
              </div>
          </li>
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay property-images-modal__item-overlay--hide-in-listing">
                  <span>
                      <img alt="property name here" class="property-images-modal__image" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                  </span>
              </div>
          </li>
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay icon-caption-overlay property-images-modal__item-overlay--hide-in-listing">
                  <span>
                      <img alt="property name here" class="property-images-modal__image" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                  </span>
              </div>
          </li>
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay">
                  <span>
                      <img alt="property name here video" class="property-images-modal__video" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                      <div class="property-images-modal__play-button-overlay">
                          <span class="property-images-modal__play-button" style="background: url('http://platform.buildiumstaging.com/Manager/static-images/gallery-sprite.png') no-repeat 0px -180px;"></span>
                      </div>
                  </span>
              </div>
          </li>
          <li role="button" class="property-images-modal__item" tabindex="0">
              <div class="property-images-modal__item-overlay icon-caption-overlay property-images-modal__item-overlay--hide-in-listing">
                  <span>
                      <img alt="property name here video" class="property-images-modal__video" src="https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=80&w=80" />
                      <div class="property-images-modal__play-button-overlay">
                          <span class="property-images-modal__play-button" style="background: url('http://platform.buildiumstaging.com/Manager/static-images/gallery-sprite.png') no-repeat 0px -180px;"></span>
                      </div>
                  </span>
              </div>
          </li>
          <li class="fancy-placeholder property-images-sort-placeholder"></li>
      </ul>
  </div>
</div>

Name: propertyImages

Styleguide 2.37
*/

@property-image-size: 80px;

.property-images__container {
    display: inline-block;
    cursor: pointer;
}

.property-images__container--no-click {
    cursor: default;

    //Remove hover effect as well
    .property-images__property-placeholder:hover {
        background: url("@{static-images}photo-sprite-property.png") 0 0 no-repeat;
    }
}

.property-images__property-placeholder{
    width: 260px;
    height: 158px;
    background: url("@{static-images}photo-sprite-property.png") 0 0 no-repeat;

    &:hover {
        background: url("@{static-images}photo-sprite-property.png") 0px -200px no-repeat
    }
}

.property-images__first-image {
    max-width: 210px;
    height: auto;
    border-radius: @border-radius-default;
}

.property-images-modal__item-count {
    color: @theme-grey6;
    font-style: italic;
}

.property-images-modal__item-container {
    margin: 10px 0;
    padding: 20px 0 0 20px;
    border-radius: @border-radius-default;
    border: 1px solid @theme-grey4;
    background-color: #FFFFFF;
}

.property-images-modal__item {
    display: inline-block;
    border-radius: @border-radius-default;
    margin: 0 20px 20px 0;
    vertical-align: top;
    cursor: pointer;
}

.property-images-modal__image {
    height: @property-image-size;
    width: @property-image-size;
    border-radius: @border-radius-default;
}

.property-images-modal__video {
    height: @property-image-size;
    border-radius: @border-radius-default;
}

.property-images-modal__item-overlay {
    position: relative;

    &.icon-caption-overlay:after {
        height: 16px;
        width: 16px;
        position: absolute;
        right: 6px;
        bottom: 6px;
        content: " ";
    }
}

.property-images-modal__item-overlay--hide-in-listing {
    opacity: 0.4;
}

.property-images-sort-placeholder {
    display: inline-block;
    height: @property-image-size;
    width: 20px;
    margin: 0 20px 20px 0;
}

.property-images-modal__play-button-overlay {
    position: absolute;
    top: 22px;
    width: 100%;
    text-align: center;
}

.property-images-modal__play-button {
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url("@{static-images}gallery-sprite.png") no-repeat 0px -180px;
}

.property-images__image-edit-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.property-images__image-edit--rotate-90 {
    transform: rotate(90deg);
}

.property-images__image-edit--rotate-180 {
    transform: rotate(180deg);
}

.property-images__image-edit--rotate-270 {
    transform: rotate(270deg);
}