@use "../../../styles/typography.scss";

/** Title text size**/
$title-text-s: "300";
$title-text-m: "300";
$title-text-l: "400";

/** Contest type text size**/
$contest-type-s: "000";
$contest-type-m: "100";
$contest-type-l: "100";

/** Description/status label text size**/
$description-text-s: "000";
$description-text-m: "100";
$description-text-l: "200";

.small {
  .title {
    @include typography.sans($size: $title-text-s, $role: "component", $weight: "bold");
  }

  .contest-type {
    @include typography.overline($size: $contest-type-s) {
      font-weight: 400
    };
  }  
  

  .description {
    @include typography.sans($size: $description-text-s, $role: "component");

    &.bold {
      @include typography.sans($size: $description-text-s, $role: "component", $weight: "bold");
    }
  }
}

.medium {
  .title {
    @include typography.sans($size:  $title-text-m, $role: "component", $weight: "bold");
  }

  .contest-type {
    @include typography.overline($size: $contest-type-m) {
      font-weight: 400
    }
  }    

  .description {
    @include typography.sans($size: $description-text-m, $role: "component");

    &.bold {
      @include typography.sans($size: $description-text-m, $role: "component", $weight: "bold");
    }
  }

}

.large {
  .title {
    @include typography.sans($size: $title-text-l, $role: "component", $weight: "bold");
  }

  .contest-type {
    @include typography.overline($size: $contest-type-l) {
      font-weight: 400
    };;
  }  
  

  .description {
    @include typography.sans($size: $description-text-l, $role: "component");

    &.bold {
      @include typography.sans($size: $description-text-l, $role: "component", $weight: "bold");
    }
  }
}
