@import "../mixins/all";

$listings__desktop-gutter: 24px;
$listings__tablet-gutter: 16px;

.listings__section {
  color: $typography__main-color;

  width: 100%;
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);

  @include dimensions__section--paddings;

  background-color: #F9F9F9;
}

.listings__content {
  margin: 0 auto;
  text-align: center;

  // mobile
  width: 100%;

  @media #{$mobile-landscape}, #{$tablet} {
    width: 100%;
  }

  @media #{$desktop} {
    max-width: 1114px + $listings__desktop-gutter;
  }
}

.listings__title {
  @include typography__section-title;
  @include dimensions__section-title--limited-width;
}

.listings__paragraph {
  @include typography__section-paragraph;
  @include dimensions__section-paragraph--limited-width;
}

.listings__listings {
  @include prefix-val(display, flex);
  @include prefix-prop(flex-direction, column);

  // mobile
  padding: 0px $dimension-mobile-margin;
  margin-bottom: 36px;

  @media #{$mobile-landscape}, #{$tablet} {
    @include prefix-prop(flex-direction, row);
    margin: 0;
    padding: 0px (48px - $listings__tablet-gutter / 2) 48px (48px - $listings__tablet-gutter / 2);
  }

  @media #{$desktop} {
    @include prefix-prop(flex-direction, row);
    margin: 0;
    padding: 0px (60px - $listings__desktop-gutter / 2) 60px (60px - $listings__desktop-gutter / 2);
  }
}

.listings__listing {
  width: 100%;
  max-width: 327px;

  background-color: #FFF;

  @include prefix-val(display, flex);
  @include prefix-prop(justify-content, space-between);
  @include prefix-prop(flex-direction, column);

  border-radius: $dimension-card-border-radius;
  overflow: hidden;

  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.10);

  &:hover {
    transform: scale(1.011);
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
    @include prefix-prop(transition, all 50ms ease-in-out);
  }

  // mobile
  margin: 0px auto 24px auto;

  @media #{$mobile-landscape}, #{$tablet} {
    margin: $listings__tablet-gutter / 2;
    margin-bottom: 24px;
    width: (100% / 3);
  }

  @media #{$desktop} {
    margin: $listings__desktop-gutter / 2;
    margin-bottom: 24px;
    width: (100% / 3);
  }
}

.listings__listing-image-container {
  // width + padding-bottom makes a responsive square
  width: 100%;
  padding-bottom: 100%;
}

.listings__listing-image {
  @extend .listings__listing-image-container;

  background-size: cover;
  background-position: center;
}

.listings__listing-image--empty {
  @extend .listings__listing-image-container;
  position: relative;

  // background color added in the template
}

.listings__no-listing-image-svg-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);
  @include prefix-prop(justify-content, center);
  @include prefix-prop(flex-direction, column);
}

.listings__no-listing-image-svg {
  stroke: $typography__main-color;
}

.listings__no-listing-image-svg--eyes {
  fill: $typography__main-color;
}

.listings__no-listing-image-text {
  font-size: 14px;
  margin-top: 8px;
  @include typography__semibold;
}

.listings__button--ghost {
  @include landing-page__button;
}

.listings__listing-title {
  text-align: left;
  margin: 18px 24px;
  padding: 0;

  @include typography__medium;

  // override the link color
  color: $typography__main-color;

  // mobile
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 21px;

  @media #{$tablet} {
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 21px;
  }

  @media #{$desktop} {
    font-size: 18px;
    letter-spacing: 0px;
    line-height: 26px;
  }
}

.listings__listing-info {
  margin: 18px 24px;
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, flex-end);
  @include prefix-prop(flex-direction, row);
  @include prefix-prop(justify-content, space-between);
}

.listings__price-container {
  text-align: left;
  margin-right: 12px;
}

.listings__price-text {
  @include typography__medium;

  @media #{$desktop} {
    font-size: 20px;
    letter-spacing: 0px;
  }
}

.listings__price-amount {
  @extend .listings__price-text;
}

.listings__price-shape-name {
  @extend .listings__price-text;
}

.listings__price-unit {
  @include typography__medium;

  @media #{$desktop} {
    font-size: 14px;
    letter-spacing: 0px;
  }
}

.listings__author-link {
  max-width: 50%;
}

.listings__author-container {
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);
  @include prefix-prop(flex-direction, row);
}

.listings__author-avatar-container {
  // The avatar needs to be round, not oval
  @include prefix-prop(flex-shrink, 0);

  border-radius: 100%;
  width: 24px;
  height: 24px;

  // Rounded borders for child elements
  overflow: hidden;

  // Align the SVG
  @include prefix-val(display, flex);
  @include prefix-prop(align-items, center);
  @include prefix-prop(justify-content, center);

  background-color: #D8D8D8;
}

.listings__author-avatar {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.listings__author-avatar-empty {
  background-color: red;
}

.listings__author-name {
  @include typography__medium;

  margin-left: 8px;

  font-size: 12px;
  letter-spacing: 0px;
  line-height: 25px;

  // override default link color
  // hover color is set in the template
  color: #7A7D80;

  // ellipsis
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}