//
// Functions
//

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
//
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

//
// Mixins and Placeholders
//

// hyphenation
//
// see: http://clagnut.com/blog/2395

%improved-hyphenation-headlines {
  // sass-lint:disable-block no-vendor-prefixes no-misspelled-properties
  hyphens: auto;
  hyphenate-limit-lines: 1;
  hyphenate-limit-last: always;

  // legacy properties
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;

  // current proposal
  -moz-hyphenate-limit-chars: 9 4 4;
  -webkit-hyphenate-limit-chars: 9 4 4;
  -ms-hyphenate-limit-chars: 9 4 4;
  hyphenate-limit-chars: 9 4 4;

  // hyphenate-limit-zone: 8%
}

%improved-hyphenation-text {
  // sass-lint:disable-block no-vendor-prefixes no-misspelled-properties
  hyphens: auto;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;

  // legacy properties
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;

  // current proposal
  -moz-hyphenate-limit-chars: 6 4 4;
  -webkit-hyphenate-limit-chars: 6 4 4;
  -ms-hyphenate-limit-chars: 6 4 4;
  hyphenate-limit-chars: 6 4 4;

  // hyphenate-limit-zone: 8%
}

%manual-hyphenation {
  overflow-wrap: break-word;
  word-wrap: normal;
  hyphens: manual;
}

// Links
.link-unstyled,
%link-unstyled {
  border-bottom: 0;
  text-decoration: none;
  color: inherit;

  &:hover,
  &:focus {
    background-color: initial;
  }
}

%block-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

// Lists
%list-unstyled {
  margin-top: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

// Should only be used, when placeholder is overridden by normalize.
@mixin list-unstyled {
  margin-top: 0;
  padding: 0;
  list-style: none;
}

%unsorted-list {
  @extend %list-unstyled;

  margin-bottom: $spacer-md;
  line-height: $paragraph-line-height;
  font-size: $font-size-base;

  li {
    position: relative;
    margin-bottom: $spacer-xs;
  }

  @media screen and (min-width: $grid-breakpoint-md) {
    line-height: $paragraph-line-height;
    font-size: $font-size-sm;
  }
}

%definition-list {
  margin-bottom: $spacer-md;

  dt {
    @extend %heading-font-bold;

    margin-bottom: $spacer-xs;
    line-height: $paragraph-line-height;
    color: $definition-list-dt-color;
    font-size: $font-size-base;
  }

  dd {
    @extend %body-font-regular;

    margin-bottom: $spacer-xs;
    margin-left: $spacer-md;
    line-height: $paragraph-line-height;
    font-size: $font-size-base;
  }
}

%definition-list-simple {
  @extend %definition-list;

  dd {
    @extend %heading-font-regular;

    text-transform: uppercase;
  }

  dd,
  dt {
    margin-left: 0;
  }

  dt {
    margin-bottom: 0;
  }
}

// Headlines & Text
%teaser-caption {
  @extend %heading-font-bold;

  text-transform: uppercase;
  font-size: $font-size-xs;
}

%teaser-text {
  @extend %heading-font-regular;

  font-size: $font-size-base;
}

%teaser-text-italic {
  @extend %body-font-italic;

  font-size: $font-size-sm;
}

@mixin hover-fill($fill-color, $text-color, $hover-color) {
  z-index: 1;
  color: $text-color;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    transition: standard-transition(width);
    z-index: -1;
    background-color: $fill-color;
    width: 0%;
    height: 100%;
    content: "";
  }

  &:hover,
  &:focus {
    color: $hover-color;

    &::after {
      width: 100%;
    }
  }
}

//
// Breakpoints
//

@media screen and (min-width: $grid-breakpoint-md) {
  %teaser-caption {
    font-size: $font-size-base;
  }
}

//
// stencil / punch-in effect
//

// @supports: put -webkit- at the end or sass will kill it, kills -moz- anyway
// sass-lint:disable no-vendor-prefixes
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .punch-in,
  %punch-in {
    background-clip: text;
    background-position: center;
    color: transparent;
    // sass-lint:disable-block no-vendor-prefixes
    -webkit-background-clip: text;
  }
}

.text-center {
  text-align: center;
}