// ----------------------------------------------------------------------------------------------------
// Typo: Title Style Mixins
// ----------------------------------------------------------------------------------------------------

@mixin title($exclude-spacing: false) {
  --sbb-title-line-height: var(--sbb-typo-line-height-titles);
  --sbb-title-margin-block-start: 0;
  --sbb-title-margin-block-end: 0;

  @if not($exclude-spacing) {
    --sbb-title-margin-block-start: var(--sbb-spacing-responsive-m);
    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
  }

  @include font-smoothing;

  margin: 0;
  margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
  font-family: var(--sbb-typo-font-family);
  font-weight: bold;
  line-height: var(--sbb-title-line-height);
  letter-spacing: var(--sbb-typo-letter-spacing-titles);
  font-size: var(--sbb-title-font-size);
}

@mixin title-1($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-1);
}

@mixin title-2($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-2);

  @if not($exclude-spacing) {
    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
  }
}

@mixin title-3($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-3);

  @if not($exclude-spacing) {
    --sbb-title-margin-block-end: var(--sbb-spacing-responsive-xxxs);
  }
}

@mixin title-4($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-4);

  @if not($exclude-spacing) {
    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-3x);
  }
}

@mixin title-5($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-5);
  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);

  @if not($exclude-spacing) {
    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x);
  }
}

@mixin title-6($exclude-spacing: false) {
  @include title($exclude-spacing);

  --sbb-title-font-size: var(--sbb-font-size-title-6);
  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);

  @if not($exclude-spacing) {
    --sbb-title-margin-block-end: var(--sbb-spacing-fixed-1x);
  }
}

@mixin title--negative {
  --sbb-title-text-color-normal: var(--sbb-color-milk);
}

// ----------------------------------------------------------------------------------------------------
// Typo: Text Style Mixins
// ----------------------------------------------------------------------------------------------------
@mixin text {
  font-family: var(--sbb-typo-font-family);
  font-weight: normal;
  line-height: var(--sbb-typo-line-height-body-text);
  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
  font-size: var(--sbb-text-font-size);
}

@mixin text--bold {
  font-weight: bold;
}

@mixin text-xl--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-xl);
  @include text;
}

@mixin text-xl--bold {
  @include text-xl--regular;
  @include text--bold;
}

@mixin text-l--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-l);
  @include text;
}

@mixin text-l--bold {
  @include text-l--regular;
  @include text--bold;
}

@mixin text-m--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-m);
  @include text;
}

@mixin text-m--bold {
  @include text-m--regular;
  @include text--bold;
}

@mixin text-s--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-s);
  @include text;
}

@mixin text-s--bold {
  @include text-s--regular;
  @include text--bold;
}

@mixin text-xs--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-xs);
  @include text;
}

@mixin text-xs--bold {
  @include text-xs--regular;
  @include text--bold;
}

@mixin text-xxs--regular {
  --sbb-text-font-size: var(--sbb-font-size-text-xxs);
  @include text;
}

@mixin text-xxs--bold {
  @include text-xxs--regular;
  @include text--bold;
}

@mixin text-inherit {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-size: inherit;
  text-align: inherit;
}

// ----------------------------------------------------------------------------------------------------
// Typo: Font Smoothing Mixins
// ----------------------------------------------------------------------------------------------------

/**
 * Better font rendering (on OS X)
 * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
 *
 * Usage:
 *
 * .var_dark_on_light {
 * 	@include font-smoothing;
 * }
 * .var_light_on_dark {
 * 	@include font-smoothing-reset;
 * }
 */

@mixin font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@mixin font-smoothing-reset {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

@mixin placeholder {
  color: var(--sbb-color-metal);
  -webkit-text-fill-color: var(--sbb-color-metal);
  opacity: 1;
}

@mixin clamp-lines($lines) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $lines;
}

@mixin legend {
  @include text-xs--regular;

  padding: 0;
  color: var(--sbb-color-granite);
}

%sub-sup {
  font-size: 60%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

@mixin sub {
  @extend %sub-sup;

  bottom: -0.36em;
}

@mixin sup {
  @extend %sub-sup;

  top: -0.5em;
}