#bikes_show,
#bike_versions_show {
  // Stock photo text
  .stock-photo {
    position: absolute;
    top: 0;
    left: 0;
    padding: $vertical-height;
    background: rgba($blue-dark, 0.85);
    box-shadow: 0 0 2px rgba(black, 0.2);
    border-radius: $border-radius;
    border: 1px solid lighten($blue-dark, 10%);
    border-left: none;
    border-right: none;
    width: 100%;
    color: white;
    text-align: center;

    em {
      display: block;
      color: rgba(white, 0.8);
    }
  }

  .bike-photos {
    position: relative;

    a {
      overflow: hidden;
      display: block;
    }

    .image-holder {
      z-index: 1;

      img {
        transition: opacity ease-in-out 0.3s;

        // cursor: zoom-in;
        opacity: 0;
        margin: 0 auto;
      }

      .current-photo {
        z-index: 10;

        img {
          transition: opacity ease-in 1s;
          opacity: 1;
          margin: 0 auto;
          display: block;
        }
      }

      .current-photo .transitioning-photo,
      .transitioning-photo {
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    img {
      padding: 0;
      width: 100%;
      height: auto;
    }

    .clickable-image {
      transition: all ease-in-out 0.2s;
      cursor: pointer;
      border-radius: $border-radius;
      box-shadow: none;
      position: relative;
      padding: 0;
      margin: 0;
      display: block;
      border: 1px solid $gray-lightest;
      overflow: hidden;

      // because they are square images, and we don't care
      &.current-thumb {
        transition: all ease-in-out 0.2s;
        border-color: $blue;
        box-shadow: 0 0 3px rgba($blue, 0.8);
      }
    }
  }

  .photo-list {
    border-radius: $border-radius;
    position: relative;
    background: $body-bg;
    padding: 1px;

    ul {
      list-style-type: none;
      position: absolute;
      left: 0;
      top: 0;
      overflow: visible;
      height: 100%;
      margin: 0;
      padding: 0;
      border: none;

      li {
        position: relative;
      }
    }
  }

  .thumbnail-shadow,
  .thumbnail-shadow-r {
    display: none;
    position: absolute;
    z-index: 20;
  }

  .bike-photos.overflown {
    .thumbnail-shadow,
    .thumbnail-shadow-r {
      display: block;
    }
  }

  &.zoom-overlay-open .bike-photos {
    z-index: $zoom-img-wrap-z-index;

    // because of inheritance, otherwise below the zoom mask
    .image-holder {
      overflow: visible;
    }

    .photo-list,
    .thumbnail-shadow,
    .thumbnail-shadow-r {
      opacity: 0;
    }

    // Or else they z-indexes over the background too
  }
}

//
// Horizontal thumbnail list (below the main image)
@media (max-width: $grid-breakpoint-md - 1px) {
  #bikes_show .bike-photos,
  #bike_versions_show .bike-photos {
    $thumbnails-height: 120px;
    $thumbnails-width: 178px;

    // Maybe the below is needed for cross browsers?
    // .current-photo .transitioning-photo, .transitioning-photo { width: 100%; }
    .image-holder {
      overflow: hidden;
    }

    &.overflown {
      .photo-list ul {
        padding: 1px 5px;

        // To give space for scrolling, covering shadows - and highlighted current photo
        left: -2px;

        // to line up correctly with the shadows
      }
    }

    .thumbnail-shadow,
    .thumbnail-shadow-r {
      bottom: -2px;
      height: $thumbnails-height + 2px;
      width: 10px;

      // shadow width
    }

    .thumbnail-shadow {
      left: 0;
      box-shadow: inset 8px 0 6px -8px rgba($gray-lighter, 0.95);
    }

    .thumbnail-shadow-r {
      right: 0;
      box-shadow: inset -8px 0 6px -8px rgba($gray-lighter, 0.95);
    }

    .photo-list {
      @include clearfix;

      clear: both;
      height: $thumbnails-height;
      width: 100%;
      margin: 10px 0 0;
      overflow-y: hidden;
      overflow-x: scroll;

      li {
        position: relative;
        float: left;
        height: 100%;
        width: $thumbnails-width;
        margin: 0 10px 5px 0;

        &:last-of-type {
          margin-right: 0;
          border-right: none;
        }
      }

      a {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: block;
      }
    }
  }
}

//
// Vertical thumbnails (to the right of the main image)
@media (min-width: $grid-breakpoint-md) {
  #bikes_show .bike-photos,
  #bike_versions_show .bike-photos {
    $thumbnails-height: 120px;
    $thumbnails-width: 100%;
    $thumbnail-list-width: 15%;

    display: flex;
    flex-wrap: wrap;

    #selected-photo.image-holder {
      flex: 0 0 83%;
      position: relative;

      &.just1photo {
        flex: 0 0 100%;
      }
    }

    .photo-list {
      flex: 0 0 15%;
      margin: 0 0 0 2%;
      overflow-y: scroll;
      overflow-x: hidden;

      li {
        width: $thumbnails-width;
        margin: $vertical-height 0 0;

        &:first-of-type {
          margin-top: 0;
        }
      }
    }

    .thumbnail-shadow,
    .thumbnail-shadow-r {
      right: -0.5%;
      width: $thumbnail-list-width + 1%;
      height: 10px;

      // shadow width
    }

    .thumbnail-shadow {
      top: 0;
      box-shadow: inset 0 8px 6px -8px rgba($gray-lighter, 0.95);
    }

    .thumbnail-shadow-r {
      bottom: 0;
      box-shadow: inset 0 -8px 6px -8px rgba($gray-lighter, 0.95);
    }

    &.overflown .photo-list ul {
      padding: 5px 1px;
    }

    // To give space for scrolling, covering shadows - and highlighted current photo
  }
}
