@import './../functions', './../mixins', './../variables';

$highlight: (
  'width': 64,
  'height': 4,
  'margin-top': 12,
  'border-radius': 8,
  'width_vertical': 4,
  'height_vertical': 24,
  'bottom_vertical': 26,
);
$pre-title: (
  'font-size': 14,
  'font-size_md': 16,
  'letter-spacing': 1.28,
  'line-height': 16,
  'line-height_md': 20,
  'margin-bottom': 24,
);
$title: (
  'font-size': 32,
  'font-size_md': 52,
  'letter-spacing': -0.16,
  'line-height': 40,
  'line-height_md': 64,
  'margin-bottom': 16,
  'margin-bottom_md': 32,
);
$title-new: (
  'font-size': 38,
  'font-size_md': 56,
  'margin-bottom': 32,
  'margin-bottom_md': 43,
);
$h1: (
  'font-size': 28,
  'font-size_md': 40,
  'line-height': 32,
  'line-height_md': 48,
  'letter-spacing': -0.16,
  'margin-bottom': 16,
);
$h2: (
  'font-size': 24,
  'font-size_md': 28,
  'line-height': 32,
  'line-height_md': 40,
  'margin-top': 40,
  'margin-bottom': 16,
);
$h3: (
  'font-size': 20,
  'font-size_md': 24,
  'line-height': 28,
  'line-height_md': 32,
  'margin-top': 60,
  'margin-top_sibling': 32,
  'margin-bottom': 20,
);
$h4: (
  'font-size': 18,
  'font-size_md': 20,
  'line-height': 24,
  'line-height_md': 28,
  'margin-top': 40,
  'margin-bottom': 20,
);
$h5: (
  'font-size': 12,
  'font-size_md': 14,
  'line-height': 16,
  'margin-top': 16,
  'margin-bottom': 16,
);
$h6: (
  'font-size': 12,
  'font-size_md': 11,
  'line-height': 16,
);
$subtitle: (
  'font-size': 20,
  'font-size_md': 24,
  'line-height': 28,
  'line-height_md': 32,
  'margin-bottom': 20,
);
$count-icon: (
  'width': 15,
  'margin-horizontal': 8,
  'offset': 1,
);

@mixin highlight($align: 'left') {
  position: relative;
  padding-bottom: px-to-rem(
    get-map($highlight, 'height') + get-map($highlight, 'margin-top')
  );

  &::after {
    content: '';
    width: px-to-rem(get-map($highlight, 'width'));
    height: px-to-rem(get-map($highlight, 'height'));
    background: get-map($theme, 'highlight_bg');
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: px-to-rem(get-map($highlight, 'border-radius'));
    display: block;
  }

  @if $align == 'center' {
    &::after {
      left: 50%;
      transform: translateX(-50%);
    }
  } @else if $align == 'vertical' {
    padding-left: px-to-rem(
      get-map($highlight, 'height') + get-map($highlight, 'margin-top')
    );

    &::after {
      width: px-to-rem(get-map($highlight, 'width_vertical'));
      height: px-to-rem(get-map($highlight, 'height_vertical'));
      bottom: px-to-rem(get-map($highlight, 'bottom_vertical'));
      max-height: 100%;
    }
  }
}

@mixin pre-title {
  margin-bottom: px-to-rem(get-map($pre-title, 'margin-bottom'));
  font-size: px-to-rem(get-map($pre-title, 'font-size'));
  color: get-map($theme, 'title');
  font-weight: 700;
  line-height: px-to-rem(get-map($pre-title, 'line-height'));
  letter-spacing: px-to-rem(get-map($pre-title, 'letter-spacing'));
  text-transform: uppercase;

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($pre-title, 'font-size_md'));
    line-height: px-to-rem(get-map($pre-title, 'line-height_md'));
  }
}

@mixin title($version: 'default') {
  margin-bottom: px-to-rem(get-map($title, 'margin-bottom'));
  font-size: px-to-rem(get-map($title, 'font-size'));
  color: get-map($theme, 'title');
  font-weight: 900;
  line-height: px-to-rem(get-map($title, 'line-height'));
  letter-spacing: px-to-rem(get-map($title, 'letter-spacing'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($title, 'font-size_md'));
    line-height: px-to-rem(get-map($title, 'line-height_md'));
  }

  // TODO: remove the default/new divide when we move to new styling entirely
  @if $version == 'new' {
    margin-bottom: px-to-rem(get-map($title-new, 'margin-bottom'));
    font-size: px-to-rem(get-map($title-new, 'font-size'));
    font-weight: 700;
    line-height: normal;
    letter-spacing: unset;

    @include breakpoint('min-width', 'md') {
      font-size: px-to-rem(get-map($title-new, 'font-size_md'));
      line-height: normal;
    }
  }
}

@mixin h1 {
  margin-bottom: px-to-rem(get-map($h1, 'margin-bottom'));
  font-size: px-to-rem(get-map($h1, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: none;
  font-weight: 900;
  line-height: px-to-rem(get-map($h1, 'line-height'));
  letter-spacing: px-to-rem(get-map($h1, 'letter-spacing'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h1, 'font-size_md'));
    line-height: px-to-rem(get-map($h1, 'line-height_md'));
  }
}

@mixin h2 {
  margin: px-to-rem(get-map($h2, 'margin-top')) 0 px-to-rem(get-map($h2, 'margin-bottom'))
    0;
  font-size: px-to-rem(get-map($h2, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: none;
  font-weight: 900;
  line-height: px-to-rem(get-map($h2, 'line-height'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h2, 'font-size_md'));
    line-height: px-to-rem(get-map($h2, 'line-height_md'));
  }
}

@mixin h3 {
  margin: px-to-rem(get-map($h3, 'margin-top')) 0 px-to-rem(get-map($h3, 'margin-bottom'))
    0;
  font-size: px-to-rem(get-map($h3, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: none;
  font-weight: 900;
  line-height: px-to-rem(get-map($h3, 'line-height'));

  h1 + &,
  h2 + &,
  h3 + &,
  h4 + &,
  h5 + &,
  h6 + & {
    margin-top: px-to-rem(get-map($h3, 'margin-top_sibling'));
  }

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h3, 'font-size_md'));
    line-height: px-to-rem(get-map($h3, 'line-height_md'));
  }
}

@mixin h4 {
  margin: px-to-rem(get-map($h4, 'margin-top')) 0 px-to-rem(get-map($h4, 'margin-bottom'))
    0;
  font-size: px-to-rem(get-map($h4, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: none;
  font-weight: 900;
  line-height: px-to-rem(get-map($h4, 'line-height'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h4, 'font-size_md'));
    line-height: px-to-rem(get-map($h4, 'line-height_md'));
  }
}

@mixin h5 {
  margin: px-to-rem(get-map($h5, 'margin-top')) 0 px-to-rem(get-map($h5, 'margin-bottom'))
    0;
  font-size: px-to-rem(get-map($h5, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: uppercase;
  font-weight: 700;
  line-height: px-to-rem(get-map($h5, 'line-height'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h5, 'font-size_md'));
  }
}

@mixin h6 {
  font-size: px-to-rem(get-map($h6, 'font-size'));
  color: get-map($theme, 'title');
  text-transform: uppercase;
  font-weight: 700;
  line-height: px-to-rem(get-map($h6, 'line-height'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($h6, 'font-size_md'));
  }
}

@mixin subtitle {
  margin-bottom: px-to-rem(get-map($subtitle, 'margin-bottom'));
  font-size: px-to-rem(get-map($subtitle, 'font-size'));
  color: get-map($theme, 'subtitle');
  font-weight: 400;
  line-height: px-to-rem(get-map($subtitle, 'line-height'));

  @include breakpoint('min-width', 'md') {
    font-size: px-to-rem(get-map($subtitle, 'font-size_md'));
    line-height: px-to-rem(get-map($subtitle, 'line-height_md'));
  }
}

@layer base {
  .highlighted-title {
    @include highlight;
  }

  .pre-title {
    @include pre-title;
  }

  .title {
    @include title;
  }

  h1 {
    @include h1;
  }

  h2 {
    @include h2;
  }

  h3 {
    @include h3;
  }

  h4 {
    @include h4;
  }

  h5 {
    @include h5;
  }

  h6 {
    @include h6;
  }

  .subtitle {
    @include subtitle;
  }

  .count {
    &::before {
      @include image('icons/middot.svg', true);

      content: '';
      width: px-to-rem(get-map($count-icon, 'width'));
      height: px-to-rem(get-map($count-icon, 'width'));
      background: currentcolor;
      position: relative;
      top: px-to-rem(get-map($count-icon, 'offset'));
      margin: 0 px-to-rem(get-map($count-icon, 'margin-horizontal'));
      display: inline-block;
    }
  }
}
