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

%card-f_div.card {
  @include border('all', 1px, solid, $color-light-gray2);
  box-shadow: none;
}

%card-f--hover_div.card {
  background-color: $color-dark-gray7;
  color: $color-white;
}

%card-f--hover {
  border: none;
  box-shadow: none;
}

.card-f {
  @extend %card-f_div.card;
  div.card {
    @extend %card-f_div.card;
    &:hover {
      @extend %card-f--hover;
      @extend %card-f--hover_div.card;
    }
  }

  &-header {
    color: $color-dark-gray3;
    background-color: transparent;
    @include rem("font-size", 24px);

    .radio-button {
      @include rem("padding-bottom", 3px);
    }
    .header-text {
      @include rem("margin-left", 2px);
      cursor: pointer;
    }
  }

  .cardbody {
    @include rem("padding", 20px 15px 20px 20px);
  }

  .card-text {
    h5 {
      @include rem("font-size", 32px);
      @include rem("margin-bottom", 0);
      color: $color-dark-gray3;
      font-family: "Daimler", sans-serif;

      span.small-space {
        @include rem("font-size", 24px);
        @include rem("margin-left", 2px);
      }
    }

    small {
      font-family: "DaimlerCS", sans-serif;
      color: $color-dark-gray3;
      @include rem("font-size", 14px);
    }
  }

  &:hover,
  &-selected {
    cursor: pointer;
    @extend %card-f--hover;

    div.card {
      @extend %card-f--hover;
      @extend %card-f--hover_div.card;
    }

    .card-header {
      @include border(bottom, 1px, solid, $color-dark-gray3);
      color: $color-blue;
    }

    .cardbody {
      .card-text {
        h5 {
          color: $color-blue;

          span.small-space {
            color: $color-blue;
          }
        }

        small {
          color: $color-blue;
        }
      }
    }
  }
}
