@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "color";
@import "layers";

$ca-grid: 1.5rem; // 24px @ default root font-size of 16px

$ca-weight-extra-light: 200;
$ca-weight-light: 300;
$ca-weight-book: 400;
$ca-weight-medium: 500;
$ca-weight-semibold: 500; // Note: in Sketch, semibold is 600. But murmur has an existing value of semibold=500 that is heavily used.

// Combine these into a Sass map ($ca-default-font) once node-sass includes libsass 3.5.0.beta.3 with this bug fix: https://github.com/sass/libsass/issues/2309
$ca-default-font-family: "Open Sans", Helvetica, Arial, sans-serif;
$ca-default-font-base-size: 0.875rem; /* 14px */
$ca-default-font-descender-height: 0.115;

// Combine these into a Sass map ($ca-default-font) once node-sass includes libsass 3.5.0.beta.3 with this bug fix: https://github.com/sass/libsass/issues/2309
$ca-ideal-sans-font-family: "Ideal Sans A", "Ideal Sans B",
  $ca-default-font-family;
$ca-ideal-sans-font-base-size: 1rem; /* 16px */
$ca-ideal-sans-font-descender-height: 0.14;

// Locale-specific fonts
$ca-locale-he-font-family: "Open Sans", Tahoma, sans-serif;
$ca-locale-ar-font-family: "Open Sans", Tahoma, sans-serif;
$ca-ideal-locale-ar-font-family: "Ideal Sans A", "Ideal Sans B", Tahoma,
  sans-serif;
$ca-ideal-locale-he-font-family: "Ideal Sans A", "Ideal Sans B", Tahoma,
  sans-serif;

// Inspired by Basekick from SEEK: https://github.com/michaeltaranto/basekick
@mixin ca-type(
  $family: $ca-default-font-family,
  $base-size: $ca-default-font-base-size,
  $descender-height: $ca-default-font-descender-height,
  $size-ratio: 1,
  $line-height-in-grid-units: 1,
  $weight: $ca-weight-book,
  $letter-spacing: normal
) {
  font-family: $family;
  html:lang(he) & {
    font-family: $ca-locale-he-font-family;
  }
  html:lang(ar) & {
    font-family: $ca-locale-ar-font-family;
  }
  font-weight: $weight;
  letter-spacing: $letter-spacing;

  $font-size: $base-size * $size-ratio; // in rem
  $absolute-line-height: $ca-grid * $line-height-in-grid-units; // in rem
  $line-height-ratio: $absolute-line-height / $font-size; // unitless number
  $line-spacing: $line-height-ratio - 1;
  font-size: $font-size;
  line-height: $line-height-ratio;

  position: relative;
  top: #{$descender-height + $line-spacing / 2}em;
  // If `position: relative` creates issues, we could alternatively use a transform,
  // though this creates a new stacking context which can break z-index based layers:
  // transform: translateY(#{$descender-height + $line-spacing / 2}em);
}

// Containing block for baseline-shifted text
// Creates whitespace for the contained text to shift “into”
@mixin ca-type-block($display: block) {
  display: $display;
  padding-bottom: $ca-grid / 2;
}

@mixin ca-inherit-baseline {
  position: static;
}

@mixin ca-type-reverse {
  color: white;
  // Without these non-standard anti-aliasing properties, white Ideal Sans on a dark background appears to have a heavier font weight
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Open Sans Styles

@mixin ca-type-title($args...) {
  @include ca-type(
    $size-ratio: 12/7,
    $line-height-in-grid-units: 1.5,
    $weight: $ca-weight-medium,
    $args...
  );
}

@mixin ca-type-ideal-small-bold($args...) {
  @include ca-type-ideal-small;
  font-weight: $ca-weight-semibold;
}

@mixin ca-type-display($args...) {
  @include ca-type($size-ratio: 10/7, $weight: $ca-weight-medium, $args...);
}

@mixin ca-type-heading($args...) {
  @include ca-type($size-ratio: 8/7, $weight: $ca-weight-medium, $args...);
}

@mixin ca-type-lede($args...) {
  @include ca-type($size-ratio: 8/7, $args...);
}

@mixin ca-type-body($args...) {
  @include ca-type($args...);
}

@mixin ca-type-control-action($args...) {
  @include ca-type($weight: $ca-weight-medium, $args...);
}

@mixin ca-type-small($args...) {
  @include ca-type($size-ratio: 6/7, $args...);
}

@mixin ca-type-labels-and-legends($args...) {
  @include ca-type($size-ratio: 6/7, $letter-spacing: 0.04em, $args...);
  text-transform: uppercase;
}

// Ideal Sans styles

@mixin ca-type-ideal(
  $size,
  $weight,
  $line-height-in-grid-units: 1,
  $letter-spacing: normal,
  $args...
) {
  @include ca-type(
    $size-ratio: $size / 16,
    $family: $ca-ideal-sans-font-family,
    $base-size: $ca-ideal-sans-font-base-size,
    $descender-height: $ca-ideal-sans-font-descender-height,
    $line-height-in-grid-units: $line-height-in-grid-units,
    $letter-spacing: $letter-spacing,
    $weight: $weight,
    $args...
  );
  html:lang(he) & {
    font-family: $ca-ideal-locale-he-font-family;
  }
  html:lang(ar) & {
    font-family: $ca-ideal-locale-ar-font-family;
  }
}

@mixin ca-type-ideal-page-title($size: 32, $args...) {
  @include ca-type-ideal(
    $size: $size,
    $line-height-in-grid-units: 1.5,
    $weight: $ca-weight-book,
    $args...
  );
}

@mixin ca-type-ideal-title($size: 26, $args...) {
  @include ca-type-ideal(
    $size: $size,
    $line-height-in-grid-units: 1.5,
    $weight: $ca-weight-book,
    $args...
  );
}

@mixin ca-type-ideal-display($size: 22, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-book, $args...);
}

@mixin ca-type-ideal-heading($size: 18, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-book, $args...);
}

@mixin ca-type-ideal-lede($size: 20, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-light, $args...);
}

@mixin ca-type-ideal-body($size: 16, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-light, $args...);
}

@mixin ca-type-ideal-body-bold($size: 16, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-book, $args...);
}

@mixin ca-type-ideal-small($size: 14, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-light, $args...);
}

@mixin ca-type-ideal-small-bold($size: 14, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-book, $args...);
}

@mixin ca-type-ideal-notification($size: 15, $args...) {
  @include ca-type-ideal(
    $size: $size,
    $weight: $ca-weight-light,
    $line-height-in-grid-units: 3/4,
    $args...
  );
}

@mixin ca-type-ideal-label($size: 12, $args...) {
  $letter-spacing-in-px: 0.5;
  @include ca-type-ideal(
    $size: $size,
    $weight: $ca-weight-medium,
    $letter-spacing: $letter-spacing-in-px / $size * 1em,
    $args...
  );
  text-transform: uppercase;
}

// Deprecated, use ca-type-ideal-label instead.
@mixin ca-type-ideal-labels-and-legends($args...) {
  @include ca-type-ideal-label($args...);
}

@mixin ca-type-ideal-control-action($size: 16, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-book, $args...);
  text-decoration: none;
  text-decoration-skip-ink: auto;
  color: $kz-color-cluny-500;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

@mixin ca-type-ideal-button($size: 18, $args...) {
  @include ca-type-ideal($size: $size, $weight: $ca-weight-medium, $args...);
}

@mixin debug-vertical-rhythm-grid() {
  position: relative;
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAKUlEQVRIiWN49OjRf1pihlEwCkbBKCACvH379j8t8UD7bxSMglEwJAAAvrOyCTd0/dgAAAAASUVORK5CYII=");
    pointer-events: none;
    z-index: $ca-z-index-popover;
  }
}

@mixin ca-type-align-start() {
  text-align: left; // fallback for IE and Edge
  text-align: start;

  &[dir="rtl"],
  [dir="rtl"] & {
    text-align: right; // fallback for IE and Edge
    text-align: start;
  }
}

@mixin ca-type-align-end() {
  text-align: right; // fallback for IE and Edge
  text-align: end;

  &[dir="rtl"],
  [dir="rtl"] & {
    text-align: left; // fallback for IE and Edge
    text-align: end;
  }
}