.iiif-gallery-component {
  // Reset the box-sizing
  *,
  *::before,
  *::after {
    .box-sizing(border-box);
  }

  .header {
    overflow: hidden;
    height: 45px;

    .left {
      float: left;
      overflow: hidden;
    }

    .right {
      float: right;
      overflow: hidden;

      .multiSelectOptions {
        .multiSelectAll {
          float: left;
        }

        .select {
          margin-left: @margin-medium-horizontal;
        }
      }
    }

    .btn {
      float: left;
      width: 30px;
      height: 30px;

      &.size-up {
        margin-left: 5px;
      }

      &.size-down {
        margin-right: 5px;
      }
    }

    input[type="range"] {
      float: left;
      margin-top: 12px;
      width: 100px;
    }
  }

  .main {
    overflow: auto;
    overflow-x: hidden;
    height: 1000px; // main must have a default height, otherwise all thumbs will be initially loaded

    .thumbs {
      margin-right: @margin-medium-horizontal;
      overflow: hidden;
      position: relative;

      // thumb spacing-related styles

      &.multiSelect {
        .thumb {
          input {
            display: none;
          }
          .wrap.multiSelected {
            background: none;
            border: 2px solid transparent;
          }
        }
        .thumb.insideScrollArea {
          input {
            display: block;
          }
          .wrap.multiSelected {
            border: 2px solid @brand-primary;
          }
        }
      }

      .thumb {
        background-color: inherit;
        border: 0;
        padding: 0;
        text-align: left;

        margin: 0 7px 7px 0;

        .wrap {
          //border: 2px dotted grey; // debug
          border: 2px solid transparent;
          padding: 2px;

          img {
            display: none;
          }
        }

        .info {
          span {
            color: transparent;
            padding: 2px 0 0;
          }

          .searchResults {
            background: none;
          }
        }

        &.selected {
          .wrap {
            border: 2px solid transparent;
          }
        }
      }

      .thumb.insideScrollArea {
        .wrap {
          border: 2px solid @panel-border-color;

          img {
            display: block;
          }
        }

        .info {
          span {
            color: #fff;
          }

          .searchResults {
            color: @brand-primary;
            background-image: data-uri("../img/search_result.png");
            background-repeat: no-repeat;
            background-position-x: 0;
            background-position-y: 3px;
          }
        }

        &.selected {
          .wrap {
            border: 2px solid #fff;
          }
        }

        &.searchpreview {
          .wrap {
            border: 2px solid @link-color;
          }
        }
      }

      .thumb {
        float: left;
        cursor: pointer;

        .wrap {
          overflow: hidden;
          text-align: center;
          background: none;
          position: relative;

          &.loading {
            .loading(@gallery-loader-black-bg);
          }

          &.hidden {
            background-image: data-uri("../img/hidden_thumb.png");
            background-repeat: no-repeat;
            background-position-x: 50%;
            background-position-y: 50%;
          }

          img {
            max-width: 100%;
            max-height: 100%;
          }

          input {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
          }
        }

        .info {
          overflow: hidden;

          span {
            font-size: @font-size-small;
            display: block;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .index,
          .label {
            float: left;
          }

          .searchResults {
            display: none;
            float: right;
            width: 32px;
            padding-left: 14px;
          }
        }

        &.placeholder {
          .wrap {
            background-image: data-uri("../img/unavailable.png");
            background-repeat: no-repeat;
            background-position-x: 50%;
            background-position-y: 50%;
          }
        }
      }

      &.multiSelect {
        .thumb {
          .wrap.multiSelected {
            background: @brand-primary;

            .thumbImage {
              .opacity(0.35);
            }
          }
        }
      }

      &.left-to-right {
        .thumb {
          float: left;
        }
      }

      &.right-to-left {
        .thumb {
          float: right;
        }
      }
    }
  }
}