/* stylelint-disable scss/at-if-closing-brace-space-after */
/* stylelint-disable scss/at-if-closing-brace-newline-after */
/* stylelint-disable scss/at-else-empty-line-before */
/* stylelint-disable scss/at-else-closing-brace-space-after */
/* stylelint-disable scss/at-else-closing-brace-newline-after */

@mixin assign-property-or-variable($property, $variableName, $value) {
  @if $variableName {
    --#{$variableName}: #{$value};
  } @else {
    #{$property}: #{$value};
  }
}

/* NOTE: Use only in unavoidable cases where `Text` component is not available. */
@mixin size(
  $size,
  $fontSizeVariable: null,
  $lineHeightVariable: null,
  $letterSpacingVariable: null
) {
  @if $size == 11 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-2xsmall)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-2xsmall)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      initial
    );
  } @else if $size == 12 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-xsmall)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-xsmall)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      initial
    );
  } @else if $size == 13 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-small)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-small)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      initial
    );
  } @else if $size == 14 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-medium)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-medium)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      initial
    );
  } @else if $size == 15 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-large)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-large)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-text-letter-spacing-tight)
    );
  } @else if $size == 16 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-xlarge)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-xlarge)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-text-letter-spacing-tight)
    );
  } @else if $size == 17 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-text-size-2xlarge)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-text-line-height-2xlarge)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-text-letter-spacing-tight)
    );
  } @else if $size == 18 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-heading-size-medium)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-heading-line-height-medium)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      initial
    );
  } @else if $size == 22 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-heading-size-large)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-heading-line-height-large)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-heading-letter-spacing-tighter)
    );
  } @else if $size == 24 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-heading-size-xlarge)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-heading-line-height-xlarge)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-heading-letter-spacing-tighter)
    );
  } @else if $size == 30 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-display-size-medium)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-display-line-height-medium)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-display-letter-spacing-tighter)
    );
  } @else if $size == 36 {
    @include assign-property-or-variable(
      'font-size',
      $fontSizeVariable,
      var(--typography-display-size-large)
    );
    @include assign-property-or-variable(
      'line-height',
      $lineHeightVariable,
      var(--typography-display-line-height-large)
    );
    @include assign-property-or-variable(
      'letter-spacing',
      $letterSpacingVariable,
      var(--typography-display-letter-spacing-tighter)
    );
  } @else {
    @error "Invalid typography size: #{$size}";
  }
}