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

/** Table text size**/
$row-text-s: "200";
$row-text-m: "200";
$row-text-l: "300";
$row-text-tooltip: "100";

/** Header and footer label size**/
$label-s: "000";
$label-m: "000";
$label-l: "200";
$label-tooltip: "000";

/** Contest note size**/
$footnote-s: "100";
$footnote-m: "100";
$footnote-l: "200";
$footnote-tooltip: "000";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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