@thumbnail_width: default;
@thumbnail_height: default;

@thumbnail_hover_width: default;
@thumbnail_hover_height: default;

@thumbnail_overlay_hover_color: #3279BB;
@navigation_color: #fff;
@navigation_color_hover: default;
@navigation_background: #333;
@navigation_hover_background: #444;

.sow-carousel-title {

  a.sow-carousel-next,
  a.sow-carousel-previous {
    background: @navigation_background;
    color: @navigation_color;

    &:focus,
    &:hover {
      background: @navigation_hover_background;
      color: @navigation_color_hover;
    }
  }

}

.sow-carousel-wrapper {

  .sow-carousel-items {

    .sow-carousel-item {
      width: @thumbnail_width;

      .sow-carousel-thumbnail a {
        background-repeat: no-repeat;
        background-size: @thumbnail_width @thumbnail_height;

        &, span.overlay {
          width: @thumbnail_width;
          height: @thumbnail_height;
        }

        span.overlay {
          background: @thumbnail_overlay_hover_color;
        }

        &:hover {
          background-size: @thumbnail_hover_width @thumbnail_hover_height;
        }
      }

      &:focus .sow-carousel-thumbnail a {
          background-size: @thumbnail_hover_width @thumbnail_hover_height;
      }

      .sow-carousel-default-thumbnail {
        width: @thumbnail_width;
        height: @thumbnail_height;
      }
    }

    .sow-carousel-loading {
      width: @thumbnail_width;
      height: @thumbnail_height;
    }
  }
}