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

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

/** Contest seconary info (type, E.V.) size**/
$contest-secondary-s: "000";
$contest-secondary-m: "100";
$contest-secondary-l: "100";
$contest-secondary-tooltip: "000";

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

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

  .contest-secondary {
    @include typography.overline($size: $contest-secondary-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-secondary {
    @include typography.overline($size: $contest-secondary-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-secondary {
    @include typography.overline($size: $contest-secondary-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");
    }
  }
}

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

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

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

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