@import "settings.colors";
@import "settings.fonts";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-card--crea {
  @include display-grid;
  @include grid-template-columns(0, 1fr);
  @include grid-template-rows(0, grid-repeat(3, auto) 1fr);
  border-width: rem(3);
  border-color: $color-gold-crea;
}

.c-card--crea--hidden {
  visibility: hidden;
  height: 0;
  padding: 0;
}

.c-card--crea--height-unset {
  height: unset;
}

.c-card--crea__image {
  @include grid-row(1, 2);
  @include grid-column(1, 2);
  @include display-grid;
  @include grid-template-rows(0, 1fr);
  @include grid-template-columns(0, 1fr);
  background-color: $color-stone-200;
  position: relative;
  margin-bottom: rem(15);
  .c-image-container {
    @include grid-row(1, 2);
    @include grid-column(1, 2);
    @include grid-align-self(center);
    @include grid-justify-self(center);
    display: flex;
    height: rem(205);
  }
  .c-image {
    width: initial;
    max-height: 100%;
    @include grid-align-self(center);
  }
}

.c-card--crea__gallery-open {
  position: absolute;
  bottom: rem(10);
  right: rem(10);
}

.c-card--crea__gallery-open__icon {
  width: rem(28);
  height: rem(28);
  fill: $color-red-300;
  &:visited {
    fill: $color-grey-300;
  }

  &:hover, &:focus {
    fill: $color-red-700;
  }

  &:active {
    fill: $color-red-800;
  }
}

.c-card--crea__info {
  @include grid-row(2, 3);
  text-align: center;
  color: $color-grey-900;
}

.c-card--crea__info__price {
  @include font-pratt;
  font-size: rem(34);
  line-height: 1;
  letter-spacing: 0;
  display: block;
  margin-bottom: rem(10);
}

.c-card--crea__info__address {
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 15);
  letter-spacing: rem(.8);
  margin-bottom: rem(10);
  display: block;
}

.c-card--crea__detail {
  @include flex-display;
  position: relative;
  padding: 0 0 rem(15);
  margin: 0;
  z-index: 1;
  color: $color-grey-900;
  @include font-gm-sans;
  font-size: rem(14);

  &::before {
    content: "";
    background: $color-stone-200;
    position: absolute;
    height: rem(2);
    width: 100%;
    bottom: rem(17);
    left: 0;
    top: rem(10);
    z-index: -1;
  }
}

.c-card--crea__detail__name {
  @include grid-justify-self(start);
  text-transform: uppercase;
  letter-spacing: rem(.8);
  background: $color-white;
  padding-right: rem(5);
}

.c-card--crea__detail__value {
  @include grid-justify-self(end);
  letter-spacing: rem(.3);
  background: $color-white;
  padding-left: rem(5);
  margin-left: auto;
}

.c-card--crea__more-info {
  @include grid-row(3, 4);
}

.c-card--crea__desc {
  @include font-gm-sans;
  display: block;
  font-size: rem(15);
  line-height: line-height(15, 20);
  letter-spacing: rem(.3);
  color: $color-grey-700;
  margin-top: rem(20);
  word-break: break-word;
}

.c-card--crea__mls {
  background-color: $color-stone-150;
  color: $color-grey-900;
  width: 100%;
  display: block;
  margin-top: rem(35);
  padding: rem(10);
  @include font-gm-sans;
  font-size: rem(14);
  line-height: line-height(14, 15);
  letter-spacing: rem(.3);
}

.c-card--crea__mls__detail {
  display: block;
  margin-bottom: rem(15);
  &:last-child {
    margin-bottom: 0;
  }
}

.c-card--crea__brokerage-text {
  @include font-gm-sans;
  color: $color-grey-660;
  font-size: rem(12);
  line-height: rem(17);
  letter-spacing: rem(0.5);
  margin-bottom: rem(15);
  padding-bottom: rem(10);
  border-width: 0 0 rem(2);
  border-color: $color-gold-crea;
}

.c-card--crea__actions--show-more {
  @include grid-row(4, 5);
  @include grid-column(1, 2);
  text-align: center;
}

.c-card--crea__actions--show-less {
  padding: rem(15) 0 0;
  @include grid-row(4, 5);
  @include grid-column(1, 2);
  @include display-grid;
  @include grid-template-columns(0, 1fr 1fr);
  &.c-card--crea--hidden {
    padding: 0;
  }

  .c-button {
    @include grid-column(2, 3);
    @include grid-align-self(center);
    @include grid-justify-self(end);
  }
  .c-button__icon {
    transform: rotate(45deg);
  }
}

.c-card--crea__actions-link-wrapper {
  @include grid-column(1, 2);
  @include grid-align-self(center);
  @include grid-justify-self(start);
}
.c-card--crea__actions-link {
  @include font-gm-sans-bold;
  text-transform: uppercase;
  color: $color-grey-660;
  font-size: rem(12);
  line-height: line-height(12, 16);
  letter-spacing: rem(1);
  &:visited {
    color: $color-grey-660;
  }

  &:hover, &:focus {
    color: $color-red-500;
  }

  &:active {
    color: $color-red-800;
  }
}

.c-card--crea__actions-button {
  font-size: rem(12);
  letter-spacing: rem(1);
  color: $color-red-500;
  padding: 0;
  &:visited {
    color: $color-red-500;
    .c-button__icon {
      fill: $color-red-500;
    }
  }

  &:hover, &:focus {
    color: $color-red-700;
    text-decoration: underline;
    background: none;
    .c-button__icon {
      fill: $color-red-700;
    }
  }

  &:active {
    color: $color-red-900;
    .c-button__icon {
      fill: $color-red-900;
    }
  }

  .c-button__icon {
    width: rem(13);
    height: rem(13);
    fill: $color-red-500;
    margin-right: rem(5);
  }
}
