@import '../../styles/global.fonts.scss';
@import '../../styles/global.colors.scss';

.reccommendedCard {
  color: $dark-gray-text-color;
  background-color: inherit;
  color: inherit;
  width: 256px;
  height: 100%;
  position: relative;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  margin-left: 24px;

  .textContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-inline: 8px;
    height: 68px;
    margin-top: 8px;
  }

  .nameAddress {
    display: flex;
    flex-direction: column;
    gap: 2px;
    .name {
      @include BoldDark16Mixin;
    }
    .address {
      @include MediumLight12Mixin;
    }
  }

  .rightText,
  .leftText {
    .workingHours {
      @include SemiLight12Mixin;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
  }

  .rightText {
    margin-top: 8px;
    margin-bottom: 4px;
    align-items: end;

    @include MediumDark14Mixin;

    .fullReview {
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
    }
  }

  .cardImage {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0px;
  }
}