@import "compass/css3/border-radius";
@import "compass/css3/user-interface";
@import "compass/css3/transition";
@import "compass/css3/box-sizing";
@import "mixins/all";

$googleMapsFontSize: 11;
$bubbleItemHeight: em(150, $googleMapsFontSize);
$bubbleImageHeight: em(110, $googleMapsFontSize);
$bubbleWidth: em(200, $googleMapsFontSize);
$bubbleNaviHeight: em(30, $googleMapsFontSize);
$loaderGifSize: em(42, $googleMapsFontSize);
$bubbleDetailsHeight: em(40, $googleMapsFontSize);
$bubbleDetailsMargin: em(5, $googleMapsFontSize);

.bubble-item {
  position: relative;
  height: $bubbleItemHeight;
  z-index: 1;
  float: left;
  overflow: hidden;
}

.bubble-image-container {
  $width: $bubbleWidth;
  $height: $bubbleImageHeight;

  width: $width;
  height: $height;

  // Hide, if picture height or width is bigger than 250/150
  overflow: hidden;

  img {
    width: $width;
    min-width: $width;
    min-height: $height;

    @include border-top-radius(em(3, $googleMapsFontSize)); // 5px - 2

    .bubble-multi-content & {
      @include border-top-radius(0);
    }
  }
}

.bubble-multi-content {
  position: absolute;
  left: 0px;
  top: $bubbleNaviHeight;
  clear: both;
  @include transition-property(left);
  @include transition-duration(0.3s);
}

.bubble-navi {
  position: absolute;
  top: 0;
  left: 0;
  height: $bubbleNaviHeight;
  z-index: 2;
  background-color: $aside;
  color: $background;
  width: 200px;
}

.bubble-navi-header {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 4px;
  height: 20px;
  overflow: hidden;
  clear: both;
  text-align: center;
}

.bubble-navi-container {
  overflow: hidden;
  position: relative;
  height: $bubbleItemHeight + $bubbleNaviHeight;
  width: $bubbleWidth;
}

.bubble-navi-button {
  $fineTuning: 3px; // Fine tune vertical centering
  font-size: 14px;
  line-height: 30px - $fineTuning;
  margin-top: $fineTuning;
  width: 20px;
  display: block;
  position: absolute;
  text-align: center;
  @include user-select(none);

  &.disabled {
    color: lighten($aside, 10%);
  }
}

.bubble-navi-left {
  @extend .bubble-navi-button;
  left: 5px;
}

.bubble-navi-right {
  @extend .bubble-navi-button;
  right: 5px;
}

.bubble-loader-gif {
  position: absolute;
  top: ($bubbleItemHeight - $loaderGifSize) / 2;
  left: ($bubbleWidth - $loaderGifSize) / 2;
}

.bubble-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: $bubbleDetailsHeight;
  background-color: $background;
  color: $background;
  clear: both;
}

.bubble-avatar {
  position: absolute;
  left: $bubbleDetailsMargin;
  top: $bubbleDetailsMargin;

  > a {
    display: block;

    &, > img {
      height: $bubbleDetailsHeight - (2 * $bubbleDetailsMargin);
    }
  }
}

.bubble-details {
  color: $body;

  position: absolute;
  left: $bubbleDetailsHeight;
  bottom: $bubbleDetailsMargin;
  right: $bubbleDetailsMargin;
  top: $bubbleDetailsMargin;
}

@mixin details-item-position($floatDirection, $paddingDirection) {
  width: 50%;
  float: $floatDirection;
  text-align: $floatDirection;
  padding-#{$paddingDirection}: $bubbleDetailsMargin / 2;
}

.bubble-details-text-overflow {
  display: block;
  height: $bubbleDetailsHeight - (2 * $bubbleDetailsMargin);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bubble-details .bubble-price {
  @include details-item-position(right, left);

  line-height: em(30, 14);
  font-size: 14px;
  padding-right: em(10, 16);

  @extend .bubble-details-text-overflow;
}

.bubble-price-quantity {
  font-size: 11px;
}

.bubble-author {
  @include details-item-position(left, right);

  > a {
    line-height: em(30, 11);

    // Add ellipsis (...) for too long name
    @extend .bubble-details-text-overflow;
  }
}

.bubble-overlay {
  position: absolute;
  bottom: $bubbleDetailsHeight;
  left: 0;
  right: 0;
  top: 0;
  @include overlay;
}

span.bubble-title-link {
  $margin: em(5, 14);
  position: absolute;
  bottom: $margin;
  left: $margin * 2;
  right: $margin * 2;
  color: $background;
  font-size: 14px;
  vertical-align: bottom;
  line-height: lines(0.9);

  .bubble-no-image & {
    top: $margin;
    color: $aside;
  }
}

.map div {
  @include box-sizing(content-box);
}

// these contain width: 50% + some padding
.map .bubble-author,
.map .bubble-price {
  box-sizing: border-box;
}