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

%card-f_div.card {
  border: 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;
    font-size: 24px;

    .radio-button {
      padding-bottom: 3px;
    }
    .header-text {
      margin-left: 2px;
      cursor: pointer;
    }
  }

  .cardbody {
    padding: 20px 15px 20px 20px;
  }

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

      span.small-space {
        font-size: 24px;
        margin-left: 2px;
      }
    }

    small {
      font-family: "DaimlerCS", sans-serif;
      color: $color-dark-gray3;
      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 {
      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;
        }
      }
    }
  }
}
