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

@import "mixins/tools.functions";

.o-card--appointment__content {
  width: 100%;
  display: flex;
}

// This rule corrects the cards from being messed up in IE11
.o-card--appointment,
.o-card--appointment__col {
  flex: 100%;
}

.o-card--appointment__hed {
  display: block;
  margin-top: rem(5);
  margin-bottom: 0;
  font-family: $font-sans-stack;
  font-weight: bold;
  color: $color-grey-900;
  letter-spacing: 0;
  font-size: rem(15);
  line-height: line-height(15, 18);
}

.o-card--appointment__description {
  display: block;
  margin-top: rem(5);
  margin-bottom: 0;
  font-family: $font-sans-stack;
  color: $color-grey-900;
  letter-spacing: 0;
  font-size: rem(14);
  line-height: line-height(14, 17);
}

.o-card--appointment {
  .o-card__link {
    &:visited {
      .o-card--appointment__hed,
      .o-card--appointment__description {
        color: $color-grey-660;
        text-decoration: underline;
      }
    }
    &:hover,
    &:focus {
      .o-card--appointment__hed,
      .o-card--appointment__description {
        text-decoration: underline;
      }
    }

    &:active {
      .o-card--appointment__hed,
      .o-card--appointment__description {
        color: $color-grey-300;
        text-decoration: underline;
      }
    }
  }
}

// <img> tag container
.o-card--appointment__img {
  display: flex;
  margin: rem(-5) rem(-5) 0 rem(-5);
}

// wrap's the <img> tag for _scalable_ images
.o-card--appointment__img-scale {
  flex: 100%;
  .o-card--appointment__img-element {
    width: 100%;
    height: auto;
  }
}
