@import "compass/utilities/general/clearfix";
@import "compass/css3/box-sizing";
@import "mixins/all";

.listing-details-container {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.listing-description-youtube-wrapper {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
  margin-bottom:lines(1);
}
.listing-description-youtube-iframe {
  width:100%;
  height:100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// Social buttons
.listing-social {
  @include clearfix();
}

.listing-fb-like-button,
.listing-tweet-button {
  float: left;
  margin-right: lines(1);
}

.listing-tweet-button {
  padding-top: 4px; // Extra top padding to align with fb like button
}

// Listing price
.listing-price {
  clear: both; // Price floats to left
}

.listing-price-amount {
  @include huge-type;
  color: $light-body;
  display: block;
  float: left;
  margin-right: lines(0.25);
}

.listing-price-quantity {
  vertical-align: top;
  $hugeTypeLineHeight: lines(2);
  $hugeTypeFontSize: em($huge-type);
  $hugeTypeMargin: ($hugeTypeLineHeight - $hugeTypeFontSize) / 2; // Calculate the top margin based on the huge type
  $positionFineTune: em(2); // hugeTypeMargin calculates the correct position, but due to the different font size, some finetuning is needed
  // Use position relative, since the element is inline (no top-margin/padding should be used)
  position: relative;
  top: $hugeTypeMargin + $positionFineTune;
  color: $aside;
}

.listing-paypal-fee-info-link {
  cursor: pointer;
}

// Listing quantity input
.quantity-wrapper {
  width: 100%;
  margin-bottom: lines(0.75);
}
.quantity-label-wrapper {
  float: left;
  width: 100%;
}
.quantity-label {
  float: left;
  width: auto;
  font-weight: bold;
  padding: lines(0.35) lines(0.35) 0 0;
  margin: auto em(100) auto 0;
}
.quantity-input {
  margin-left: em(-100);
  width: em(100);
  float: left;
}
.quantity-input input{
  width: 100%;
}
.quantity-input input:focus {
  outline-width: 0;
}

// Listing author
$listing-author-avatar-width: 108;
$listing-author-avatar-height: 108;

.listing-author {
  position: relative;
}

.listing-author-avatar {
  width: em($listing-author-avatar-width);
  height: em($listing-author-avatar-height);
  position: absolute;
  top: 0;
  left: 0;

  > a {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.listing-author-avatar-image {
  @include border-radius($default-border-radius);
  display: block;
  width: 100%;
  height: 100%;
}

.listing-author-details {
  width: 100%;
  padding-left: em($listing-author-avatar-width);
  min-height: em($listing-author-avatar-height);
  padding-left: em($listing-author-avatar-width) + lines(0.75);
  margin-top: lines(0.25); // Author box looks a bit better when given a bit more room
  margin-bottom: lines(0.75); // Author box looks a bit better when given a bit more room
}

.listing-author-name {
  @include big-type;
  height: em($listing-author-avatar-width, 22) / 2;
  line-height: em($listing-author-avatar-width, 18) / 2;
}

.listing-author-name-link {
  display: block;
  @include ellipsis;
}

.listing-author-contact-button {
  @include grey-button;
  width: 100%;
}

// Listing author activity

.listing-author-activity {
  @include clearfix();
}

.listing-author-activity-icon {
  font-size: 32px;
  line-height: (em(32, 32) * 1.5);
  display: block;
  float: left;
  width: em(32, 32);
}

.listing-author-activity-item {
  float: left;
  width: lines($right-column-1-3) - 0.75em - em(32) - lines(1); // FIXME!!!
  margin-left: lines(0.5);
}

.listing-author-activity-description {
  @include small-type;
  color: $border;
}

// Map
.listing-map {
  width: 100%;
  height: lines(8);
}

.listing-view-admin-links {
  margin: lines(0.5) 0; // Some top & bottom margin to give links some space
}

.map-link {
  float: right;
  font-size: em(14);
  margin-top: 0.2em;
}

// Delivery options
.delivery-title {
  margin-bottom: 0;
}

.delivery-label {
  display: inline;
  width: auto;
  margin-left: lines(0.2);
}

.book-button {
  margin-top: 0;
  width: 100%;
  text-align: center;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

// Transaction action button
.enabled-book-button {
  @include big-button($link);
  @extend .book-button;
}

.disabled-book-button {
  @include big-button($link);
  @extend .book-button;

  &, &:hover {
    background-color: $border;
  }
}

// Transaction action button
.book-button .content {
  width: 100%;
  display: block;
}

.checkbox-option {
  &.selected {

  }
  &.not-selected {
    color: $border;
  }
}

.checkbox-option-checkmark {
  display: inline-block;
  width: 20px;
  color: $link;
}

.listings-how-paypal-works-link {
  font-size: em(14);
}