/// ======================== Regular Text ========================
/// @access public
/// @group @cds/typo
@mixin cds-text-regular-uppercase-50() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-50);
  line-height: var(--cds-font-line-height-50);
  letter-spacing: var(--cds-font-letter-spacing-500);
  text-transform: uppercase;
}

@mixin cds-text-regular-50() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-50);
  line-height: var(--cds-font-line-height-100);
  letter-spacing: 0;
}

@mixin cds-text-regular-100() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-100);
  line-height: var(--cds-font-line-height-200);
  letter-spacing: 0;
}

@mixin cds-text-regular-200() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-200);
  line-height: var(--cds-font-line-height-300);
  letter-spacing: 0;
}

@mixin cds-text-regular-300() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-300);
  line-height: var(--cds-font-line-height-400);
  letter-spacing: 0;
}

@mixin cds-text-regular-400() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-400);
  line-height: var(--cds-font-line-height-400);
  letter-spacing: 0;
}

@mixin cds-text-regular-500() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-500);
  line-height: var(--cds-font-line-height-500);
  letter-spacing: 0;
}

@mixin cds-text-regular-600() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-600);
  line-height: var(--cds-font-line-height-600);
  letter-spacing: 0;
}

@mixin cds-text-regular-700() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-700);
  line-height: var(--cds-font-line-height-700);
  letter-spacing: 0;
}

@mixin cds-text-regular-800() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-800);
  line-height: var(--cds-font-line-height-800);
  letter-spacing: 0;
}

@mixin cds-text-regular-900() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-900);
  line-height: var(--cds-font-line-height-900);
  letter-spacing: 0;
}

@mixin cds-text-regular-1000() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-1000);
  line-height: var(--cds-font-line-height-1000);
  letter-spacing: 0;
}

@mixin cds-text-regular-1100() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-regular);
  font-size: var(--cds-font-size-1100);
  line-height: var(--cds-font-line-height-1100);
  letter-spacing: 0;
}


/// ======================== Bold Text ========================
/// @access public
/// @group @cds/typo
@mixin cds-text-bold-50-uppercase() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-50);
  line-height: var(--cds-font-line-height-50);
  letter-spacing: var(--cds-font-letter-spacing-500);
  text-transform: uppercase;
}

@mixin cds-text-bold-50() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-50);
  line-height: var(--cds-font-line-height-100);
  letter-spacing: 0;
}

@mixin cds-text-bold-100() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-100);
  line-height: var(--cds-font-line-height-200);
  letter-spacing: 0;
}

@mixin cds-text-bold-200() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-200);
  line-height: var(--cds-font-line-height-300);
  letter-spacing: 0;
}

@mixin cds-text-bold-300() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-300);
  line-height: var(--cds-font-line-height-400);
  letter-spacing: 0;
}

@mixin cds-text-bold-400() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-400);
  line-height: var(--cds-font-line-height-400);
  letter-spacing: 0;
}

@mixin cds-text-bold-500() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-500);
  line-height: var(--cds-font-line-height-500);
  letter-spacing: 0;
}

@mixin cds-text-bold-600() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-600);
  line-height: var(--cds-font-line-height-600);
  letter-spacing: 0;
}

@mixin cds-text-bold-700() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-700);
  line-height: var(--cds-font-line-height-700);
  letter-spacing: 0;
}

@mixin cds-text-bold-800() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-800);
  line-height: var(--cds-font-line-height-800);
  letter-spacing: 0;
}

@mixin cds-text-bold-900() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-900);
  line-height: var(--cds-font-line-height-900);
  letter-spacing: 0;
}

@mixin cds-text-bold-1000() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-1000);
  line-height: var(--cds-font-line-height-1000);
  letter-spacing: 0;
}

@mixin cds-text-bold-1100() {
  font-family: var(--cds-font-family), serif;
  font-weight: var(--cds-font-weight-bold);
  font-size: var(--cds-font-size-1100);
  line-height: var(--cds-font-line-height-1100);
  letter-spacing: 0;
}

/// Placeholder
/// @param {string} $color - The color of placeholder
/// @access public
/// @group @cds/typo
@mixin cds-form-placeholder($color) {
  &::-webkit-input-placeholder { // WebKit browsers
    color: $color;
  }
  &:-moz-placeholder { // Mozilla Firefox 4 to 18
    color: $color;
  }
  &::-moz-placeholder { // Mozilla Firefox 19+
    color: $color;
  }
  &:-ms-input-placeholder { // Internet Explorer 10+
    color: $color;
  }
}

/// ======================== Display Text ========================
/// @access public
/// @group @cds/typo
@mixin cds-font-display-1() {
  @include cds-text-bold-1100();
  margin-bottom: var(--cds-spacing-300);
}
@mixin cds-font-display-2() {
  @include cds-text-bold-900();
  margin-bottom: var(--cds-spacing-300);
}

/// ======================== Heading Text ========================
/// @access public
/// @group @cds/typo
@mixin cds-font-heading-1() {
  @include cds-text-regular-800();
  margin-bottom: var(--cds-spacing-200);
}
@mixin cds-font-heading-2() {
  @include cds-text-regular-700();
  margin-bottom: var(--cds-spacing-200);
}
@mixin cds-font-heading-3() {
  @include cds-text-regular-600();
  margin-bottom: var(--cds-spacing-200);
}
@mixin cds-font-heading-4() {
  @include cds-text-bold-400();
  margin-bottom: var(--cds-spacing-100);
}
@mixin cds-font-heading-5() {
  @include cds-text-bold-300();
  margin-bottom: var(--cds-spacing-100);
}
@mixin cds-font-heading-6() {
  @include cds-text-bold-200();
  margin-bottom: 0;
}


/// ======================== DEPRECATED ========================
/// TEXT
/// @access public
/// @group @cds/typo
@mixin cds-body-text-xs() {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-xs);
  line-height: var(--cds-font-height-body);
  font-weight: var(--cds-font-weight-light);
}
@mixin cds-body-text-s() {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-s);
  line-height: var(--cds-font-height-body);
  font-weight: var(--cds-font-weight-light);
}
@mixin cds-body-text-m() {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-m);
  line-height: var(--cds-font-height-body);
  font-weight: var(--cds-font-weight-light);
}
@mixin cds-body-text-l() {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-l);
  line-height: var(--cds-font-height-body);
  font-weight: var(--cds-font-weight-normal);
}


@mixin cds-font-heading-eyebrow() {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-heading-eyebrow);
  line-height: var(--cds-font-height-heading);
  font-weight: var(--cds-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/// ======================== DEPRECATED ========================
/// ELEMENTS
/// @access public
/// @group @cds/typo
@mixin cds-font-label($max-width: 28rem) {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-s);
  line-height: var(--cds-font-height-helper);
  font-weight: var(--cds-font-weight-normal);
}
@mixin cds-font-description($max-width: 32rem) {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-xs);
  line-height: var(--cds-font-height-helper);
  font-weight: var(--cds-font-weight-normal);
  max-width: $max-width;
  width: 75%;
}
@mixin cds-font-error($max-width: 28rem) {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-body-size-xs);
  line-height: var(--cds-font-height-helper);
  font-weight: var(--cds-font-weight-normal);
}
