@import '../variables/typography';

$size-height-ratio: (
  header: (
    0.75rem: 1rem,
    0.875rem: 1.25rem,
    1rem: 1.25rem,
    1.125rem: 1.5rem,
    1.5rem: 2rem,
    2rem: 2.5rem,
    2.75rem: 3.375rem,
  ),
  body: (
    0.75rem: 1.25rem,
    0.875rem: 1.25rem,
    1rem: 1.5rem,
    1.125rem: 1.75rem,
    1.5rem: 2.25rem,
    2rem: 3rem,
    2.75rem: 4rem,
  ),
);

@function map-deep-get($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@mixin typography(
  $type: body,
  $size: 16px,
  $color: $text-default,
  $weight: 400
) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
  letter-spacing: normal;

  @if (($type == body) or ($type == header)) {
    @if $size == 0.75rem {
      line-height: map-deep-get($size-height-ratio, $type, 0.75rem);
    } @else if $size == 0.875rem {
      line-height: map-deep-get($size-height-ratio, $type, 0.875rem);
    } @else if $size == 1rem {
      line-height: map-deep-get($size-height-ratio, $type, 1rem);
    } @else if $size == 1.125rem {
      line-height: map-deep-get($size-height-ratio, $type, 1.125rem);
    } @else if $size == 1.5rem {
      line-height: map-deep-get($size-height-ratio, $type, 1.5rem);
    } @else if $size == 2rem {
      line-height: map-deep-get($size-height-ratio, $type, 2rem);
    } @else if $size == 2.75rem {
      line-height: map-deep-get($size-height-ratio, $type, 2.75rem);
    } @else {
      @error "Unacceptable font size #{$size}.";
    }
  } @else {
    @error "Unacceptable type value. Should always be 'header' or 'body'.";
  }
}

@mixin anchor {
  color: $color-azure-800;
  text-decoration: none;
  font-weight: 600;
}

// mixin for common form error label
@mixin form-error-label {
  display: block;
  pointer-events: none;
  user-select: none;
  text-align: start;
  margin-block-start: 4px;
  margin-inline-start: 2px;

  color: $app-error;
  font-weight: $font-weight-default;
  font-size: $font-size-12;
  line-height: 20px;
  height: 20px;
}

// mixin for all the input labels with ::after set to asterisk
@mixin form-required-asterisk {
  content: '*';
  inset-block-start: 2px;
  font-size: 14px;
  color: $app-error;
  padding-inline-start: 2px;
  font-weight: $font-weight-bold;
}

@mixin form-error-label-without-margin {
  @include form-error-label;
  margin: 0;
}

// mixin for single line ellipsis style
@mixin single-line-ellipsis-label {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
