@use '../variables' as *;

// ---- Head

@function cat-head-font-size($size) {
  @return cat-token('size.font.head.#{$size}');
}

@function cat-head-line-height($size) {
  @return cat-token('size.line.head.#{$size}');
}

@mixin cat-head($size, $weight: cat-token('font.weight.head')) {
  // skip color and family, as it is only set for editorial styles
  font-size: cat-head-font-size($size);
  line-height: cat-head-line-height($size);
  font-weight: $weight;
  font-feature-settings: 'pnum';
}

// ---- Body

@function cat-body-font-size($size) {
  @return cat-token('size.font.body.#{$size}');
}

@function cat-body-line-height($size) {
  @return cat-token('size.line.body.#{$size}');
}

@mixin cat-body($size, $weight: cat-token('font.weight.body')) {
  // skip font family, as it is set on the body
  // skip color, as it is set on the body
  font-size: cat-body-font-size($size);
  line-height: cat-body-line-height($size);
  font-weight: $weight;
}

// ---- Mono

@function cat-mono-font-family() {
  @return cat-token('font.family.mono'), $font-fallback-monospace;
}

@function cat-mono-font-size($size) {
  @return cat-token('size.font.mono.#{$size}');
}

@function cat-mono-line-height($size) {
  @return cat-token('size.line.mono.#{$size}');
}

@mixin cat-mono($size, $weight: cat-token('font.weight.mono')) {
  font-family: cat-mono-font-family();
  font-size: cat-mono-font-size($size);
  line-height: cat-mono-line-height($size);
  color: $cat-font-color-mono;
  font-weight: $weight;
}

// ---- Utils

@mixin cat-break-word {
  word-wrap: break-word;
  word-break: break-word;
}

@mixin cat-ellipsis($lines: 1) {
  /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
}

@mixin cat-select($select: auto) {
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-user-select: $select;
  -ms-user-select: $select;
  user-select: $select;
  /* stylelint-enable property-no-vendor-prefix */
}

@mixin cat-font-smooth() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: greyscale;
}