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

@mixin title-rules {
  margin-block: var(--sbb-title-margin-block, 0);
  margin-inline: 0;
  font-family: var(--sbb-typo-font-family);
  font-weight: bold;
  font-size: var(--sbb-title-font-size);
  letter-spacing: var(--sbb-typo-letter-spacing-heading);
  line-height: var(--sbb-title-line-height, var(--sbb-typo-line-height-heading));
}

@mixin title--level-1 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-1-lean, var(--sbb-heading-font-size-1));
}

@mixin title--level-1-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-1-lean,
    var(--sbb-heading-margin-block-1)
  );
}

@mixin title--level-2 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-2-lean, var(--sbb-heading-font-size-2));
}

@mixin title--level-2-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-2-lean,
    var(--sbb-heading-margin-block-2)
  );
}

@mixin title--level-3 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-3-lean, var(--sbb-heading-font-size-3));
}

@mixin title--level-3-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-3-lean,
    var(--sbb-heading-margin-block-3)
  );
}

@mixin title--level-4 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-4-lean, var(--sbb-heading-font-size-4));
}

@mixin title--level-4-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-4-lean,
    var(--sbb-heading-margin-block-4)
  );
}

@mixin title--level-5 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-5-lean, var(--sbb-heading-font-size-5));
}

@mixin title--level-5-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-5-lean,
    var(--sbb-heading-margin-block-5)
  );
}

@mixin title--level-6 {
  --sbb-title-font-size: var(--sbb-title-font-size-level-6-lean, var(--sbb-heading-font-size-6));
  --sbb-title-line-height: var(--sbb-typo-line-height-text);
}

@mixin title--level-6-spacing {
  --sbb-title-margin-block: var(
    --sbb-heading-margin-block-6-lean,
    var(--sbb-heading-margin-block-6)
  );
}

@mixin title-1($exclude-spacing: false) {
  @include title--level-1;
  @if not($exclude-spacing) {
    @include title--level-1-spacing;
  }
  @include title-rules;
}

@mixin title-2($exclude-spacing: false) {
  @include title--level-2;
  @if not($exclude-spacing) {
    @include title--level-2-spacing;
  }
  @include title-rules;
}

@mixin title-3($exclude-spacing: false) {
  @include title--level-3;
  @if not($exclude-spacing) {
    @include title--level-3-spacing;
  }
  @include title-rules;
}

@mixin title-4($exclude-spacing: false) {
  @include title--level-4;
  @if not($exclude-spacing) {
    @include title--level-4-spacing;
  }
  @include title-rules;
}

@mixin title-5($exclude-spacing: false) {
  @include title--level-5;
  @if not($exclude-spacing) {
    @include title--level-5-spacing;
  }
  @include title-rules;
}

@mixin title-6($exclude-spacing: false) {
  @include title--level-6;
  @if not($exclude-spacing) {
    @include title--level-6-spacing;
  }
  @include title-rules;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@mixin text-xxs--regular {
  --sbb-text-font-size: var(--sbb-text-font-size-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;
}

@mixin placeholder {
  color: var(--sbb-color-5);
  -webkit-text-fill-color: var(--sbb-color-5);
  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: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
}

%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;
}