@import "../../../../../assets/styles/index.scss";

$default-button-margin: 20px;
$default-button-dimension: 40px; /*can be for width n height*/
$default-div-width: 200px;


.h-card {
  > .row > div:first-child {
    padding: 0px;
  }
  &-image {
    width: -webkit-fill-available;
  }
  &-content {
    padding: 30px;
    background-color: $color-dark-gray2;
  }
}



%margin-top-22 {
  @include rem("margin-top", 22px);
  @include rem("margin-bottom", 0);
}

.card-w {
  @include rem("margin-bottom", 24px);

  div.card {
  }

  .card-img-top {
    @include rem("padding", 0);
    @include border-radius(0);
    @include rem("min-height", 300px);
  }

  .absolute-div {
    position: absolute;
    @include rem("top", $default-button-margin);
    @include rem("right", $default-button-margin);
    @include rem("width", $default-div-width);
    &-button {
      @include rem("padding", 0);
      @include rem("height", $default-button-dimension);
      @include rem("min-width", $default-button-dimension);

      i {
      }
      &:hover {
        background: $color-dark-gray2;
      }

      &-primary {
        right: $default-button-margin;
        background: $color-dark-gray1;
      }

      &-secondary {
        background-color: $color-blue;
        &:hover {
          @include rem("padding", 0 15px);
          span {
            @include rem("font-size", 13px);
            text-transform: uppercase;
            white-space: normal;
            word-wrap: break-word;
            color: $color-white;
          }
          &:focus {
            outline: none;
          }
        }
      }
    }
  }

  &-h {
    @include rem("margin-bottom", 0);
    &-left {
      @include rem("padding-left", 0);
    }
  }
  &-background {
    background-color: $color-dark-gray2;
    .space-right {
      @include rem("margin-right", 6px);
    }
    .empty-space-fill {
      @include rem("height", 160px);
      @include rem("margin-bottom", 24px);
    }
    .split-dropdown-button {
      @include rem("height", 36px);
      @include rem("margin-bottom", 0);
      background: $color-dark-gray1;
      &:hover {
        background: $color-dark-gray2;
      }
    }
    .hr {
      @include rem("margin-top", 30px);
      @include rem("margin-bottom", 30px);
      @include border('all', 1px, solid, $color-dark-gray1);
    }
    .text-blue {
      color: $color-blue;
      @include rem("margin-bottom", 24px);
    }
    .card-text:last-child {
      @include rem("margin-bottom", 0);
    }
    %innerSpan {
      color: $color-dark-gray1;
      @include rem("font-size", 14px);
    }
    .dealer-div {
      span {
        
      }
    }
    .small-text-gray {
      &-hr {
        span {
        }
      }
      span {
      }
      p {
        @include rem("font-size", 20px);
        color: $color-white;
      }
    }
    .col-btn {
      .btn {
        @include rem("margin-left", 0);
        @include rem("height", 40px);
        i {
        }
        &-comment {
          @include rem("width", 40px);
          @include rem("padding", 0);
        }
        &-space-right {
          @include rem("margin-right", 15px);
        }
        &-car {
          @include rem("width", 160px);
        }
        &-checkout {
          @include rem("width", 180px);
        }
      }
    }
  }
  &-text-gray {
    @include rem("font-size", 22px);
    color: $color-dark-gray1;
  }
  &-title {
    @include rem("margin-top", 30px);
  }
}
