@mixin s1-headline($font-size, $font-weight, $letter-spacing, $line-height) {
  font-size: $font-size;
  font-weight: $font-weight;
  letter-spacing: $letter-spacing;
  line-height: $line-height;
  font-stretch: normal;
  font-style: normal;
}

@mixin s1-subtitle($font-weight) {
  font-size: 13px;
  font-weight: $font-weight;
  line-height: 20px;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.5px;
}

@mixin s1-body {
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: 0.1px;
}

@mixin s1-placeholder {
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: italic;
  line-height: 20px;
  font-family: 'Lato', Lato, Arial, sans-serif;
  letter-spacing: 0.09px;
  color: var(--s1-N-60-color);
}

@mixin s1-caption($font-weight, $letter-spacing) {
  font-size: 11px;
  font-weight: $font-weight;
  font-stretch: normal;
  font-style: normal;
  line-height: 16px;
  letter-spacing: $letter-spacing;
}

// Typography
.s1-headline-1 {
  @include s1-headline(34px, bold, 0.6px, 44px);
}

.s1-headline-2 {
  @include s1-headline(24px, 900, 0.6px, 36px);
}

.s1-headline-3 {
  @include s1-headline(18px, 900, 0.6px, 24px);
}

.s1-headline-4 {
  @include s1-headline(16px, 900, 0.5px, 24px);
}

.s1-subtitle-1 {
  @include s1-subtitle(900);
}

.s1-subtitle-2 {
  @include s1-subtitle(bold);
}

/** NOTE: THIS SHOULD BE USED ONLY IN THIS SING LIB */
/** Button 1 should use the s1-subtitle(bold) as defined in our style guide */
.s1-button-1 {
  @include s1-subtitle(bold);
}

/** NOTE: THIS SHOULD BE USED ONLY IN THIS SING LIB */
/** Button 2 should use the s1-caption(bold, 0.5px) as defined in our style guide */
.s1-button-2 {
  @include s1-caption(bold, 0.5px);
}

%s1-body,
.s1-body {
  @include s1-body;
}

%s1-placeholder,
.s1-placeholder {
  @include s1-placeholder;
}

.s1-caption-1 {
  @include s1-caption(900, 1px);
}

.s1-caption-2,
%s1-caption-2 {
  @include s1-caption(normal, 0.5px);
}

::placeholder {
  @include s1-placeholder;
  /** on firefox the placeholder wasn't look good.
   we revert the line-height and it ok with all browsers*/
  line-height: revert;
}