/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../bonds';
@import './borders';

$bpk-spacing-v2: true;

////
/// @group typography
////

/// Type factory.
///
/// @param {variable} $font-size
/// @param {variable} $line-height
/// @param {variable} $font-weight false
/// @param {variable} $letter-spacing false
///
/// @access private

@mixin _bpk-text-factory(
  $font-size,
  $line-height,
  $font-weight: false,
  $letter-spacing: false
) {
  font-size: $font-size;
  line-height: $line-height;

  @if ($font-weight) {
    font-weight: $font-weight;
  }
}

/// Text margin reset.
///
/// @example scss
///   .selector {
///     @include bpk-text;
///   }

@mixin bpk-text {
  margin: 0;
}

/// Extra small text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xs;
///   }

@mixin bpk-text--xs {
  @include _bpk-text-factory(
    $bpk-text-xs-font-size,
    $bpk-text-xs-line-height,
    $bpk-text-xs-font-weight,
    $bpk-text-xs-letter-spacing
  );
}

/// Extra small text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xs;
///   }

@mixin bpk-text-xs {
  @include bpk-text--xs;
}

/// Small text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--sm;
///   }

@mixin bpk-text--sm {
  @include _bpk-text-factory(
    $bpk-text-sm-font-size,
    $bpk-text-sm-line-height,
    $bpk-text-sm-font-weight,
    $bpk-text-sm-letter-spacing
  );
}

/// Small text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-sm;
///   }

@mixin bpk-text-sm {
  @include bpk-text--sm;
}

/// Base text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--base;
///   }

@mixin bpk-text--base {
  @include _bpk-text-factory(
    $bpk-text-base-font-size,
    $bpk-text-base-line-height,
    $bpk-text-base-font-weight,
    $bpk-text-base-letter-spacing
  );
}

/// Base text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-base;
///   }

@mixin bpk-text-base {
  @include bpk-text--base;
}

/// Large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--lg;
///   }

@mixin bpk-text--lg {
  @include _bpk-text-factory(
    $bpk-text-lg-font-size,
    $bpk-text-lg-line-height,
    $bpk-text-lg-font-weight,
    $bpk-text-lg-letter-spacing
  );
}

/// Large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-lg;
///   }

@mixin bpk-text-lg {
  @include bpk-text--lg;
}

/// Extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xl;
///   }

@mixin bpk-text--xl {
  @include _bpk-text-factory(
    $bpk-text-xl-font-size,
    $bpk-text-xl-line-height,
    $bpk-text-xl-font-weight,
    $bpk-text-xl-letter-spacing
  );
}

/// Extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xl;
///   }

@mixin bpk-text-xl {
  @include bpk-text--xl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxl;
///   }

@mixin bpk-text--xxl {
  @include _bpk-text-factory(
    $bpk-text-xxl-font-size,
    $bpk-text-xxl-line-height,
    $bpk-text-xxl-font-weight,
    $bpk-text-xxl-letter-spacing
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxl;
///   }

@mixin bpk-text-xxl {
  @include bpk-text--xxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxl;
///   }

@mixin bpk-text--xxxl {
  @include _bpk-text-factory(
    $bpk-text-xxxl-font-size,
    $bpk-text-xxxl-line-height,
    $bpk-text-xxxl-font-weight
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxl;
///   }

@mixin bpk-text-xxxl {
  @include bpk-text--xxxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxxl;
///   }

@mixin bpk-text--xxxxl {
  @include _bpk-text-factory(
    $bpk-text-xxxxl-font-size,
    $bpk-text-xxxxl-line-height,
    $bpk-text-xxxxl-font-weight
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxxl;
///   }

@mixin bpk-text-xxxxl {
  @include bpk-text--xxxxl;
}

/// Extra extra large text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--xxxxxl;
///   }

@mixin bpk-text--xxxxxl {
  @include _bpk-text-factory(
    $bpk-text-xxxxxl-font-size,
    $bpk-text-xxxxxl-line-height,
    $bpk-text-xxxxxl-font-weight
  );
}

/// Extra extra large text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-xxxxxl;
///   }

@mixin bpk-text-xxxxxl {
  @include bpk-text--xxxxxl;
}
/// Bold text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--bold;
///   }

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

/// Bold text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-bold;
///   }

@mixin bpk-text-bold {
  @include bpk-text--bold;
}

/// Black text style
///
/// @require {mixin} bpk-text
///
/// @example scss
///   .selector {
///     @include bpk-text;
///     @include bpk-text--black;
///   }

@mixin bpk-text--black {
  font-weight: $bpk-font-weight-black;
}

/// Black text style (without margin reset)
///
/// @example scss
///   .selector {
///     @include bpk-text-heavy;
///   }

@mixin bpk-text-black {
  @include bpk-text--black;
}

/// Level 1 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-1();
///   }

@mixin bpk-heading-1 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-1-font-size,
    $bpk-h-1-line-height,
    $bpk-h-1-font-weight
  );

  @include bpk-breakpoint-mobile {
    @include _bpk-text-factory(
      $bpk-h-2-font-size,
      $bpk-h-2-line-height,
      $bpk-h-2-font-weight
    );
  }
}

/// Level 2 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-2();
///   }

@mixin bpk-heading-2 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-2-font-size,
    $bpk-h-2-line-height,
    $bpk-h-2-font-weight
  );

  @include bpk-breakpoint-mobile {
    @include _bpk-text-factory(
      $bpk-h-3-font-size,
      $bpk-h-3-line-height,
      $bpk-h-3-font-weight
    );
  }
}

/// Level 3 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-3();
///   }

@mixin bpk-heading-3 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-3-font-size,
    $bpk-h-3-line-height,
    $bpk-h-3-font-weight
  );

  @include bpk-breakpoint-mobile {
    @include _bpk-text-factory(
      $bpk-h-4-font-size,
      $bpk-h-4-line-height,
      $bpk-h-4-font-weight
    );
  }
}

/// Level 4 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-4();
///   }

@mixin bpk-heading-4 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-4-font-size,
    $bpk-h-4-line-height,
    $bpk-h-4-font-weight
  );

  @include bpk-breakpoint-mobile {
    @include _bpk-text-factory(
      $bpk-h-5-font-size,
      $bpk-h-5-line-height,
      $bpk-h-5-font-weight
    );
  }
}

/// Level 5 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-5();
///   }

@mixin bpk-heading-5 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-5-font-size,
    $bpk-h-5-line-height,
    $bpk-h-5-font-weight
  );
}

/// Level 6 heading.
///
/// @example scss
///   .selector {
///     @include bpk-heading-6();
///   }

@mixin bpk-heading-6 {
  margin-top: $bpk-heading-margin-top;
  margin-bottom: $bpk-heading-margin-bottom;

  @include _bpk-text-factory(
    $bpk-h-6-font-size,
    $bpk-h-6-line-height,
    $bpk-h-6-font-weight
  );
}

/// Remove bottom margin from heading. Modifies the various bpk-heading mixins.
///
/// @require {mixin} bpk-heading-1
/// @require {mixin} bpk-heading-2
/// @require {mixin} bpk-heading-3
/// @require {mixin} bpk-heading-4
/// @require {mixin} bpk-heading-5
/// @require {mixin} bpk-heading-6
///
/// @example scss
///   .selector {
///     @include bpk-heading-1();
///     @include bpk-heading--no-bottom-margin();
///   }

@mixin bpk-heading--no-bottom-margin {
  margin-bottom: 0;
}

/// Headings within content containers. Modifies the various bpk-heading mixins.
///
/// @require {mixin} bpk-heading-1
/// @require {mixin} bpk-heading-2
/// @require {mixin} bpk-heading-3
/// @require {mixin} bpk-heading-4
/// @require {mixin} bpk-heading-5
/// @require {mixin} bpk-heading-6
///
/// @example scss
///   .selector {
///     @include bpk-heading-1();
///     @include bpk-content-heading();
///   }

@mixin bpk-content-heading {
  &:not(:first-child) {
    margin-top: $bpk-heading-content-margin-top;
  }
}

/// Paragraph.
///
/// @example scss
///   .selector {
///     @include bpk-paragraph();
///   }

@mixin bpk-paragraph {
  margin-top: $bpk-p-margin-top;
  margin-bottom: bpk-spacing-base();
}

/// List.
///
/// @example scss
///   .selector {
///     @include bpk-list();
///   }

@mixin bpk-list {
  margin-top: $bpk-list-margin-top;
  margin-bottom: $bpk-list-margin-bottom;
  padding-left: $bpk-spacing-base;
}

/// Nested list. Modifies the bpk-list mixin.
///
/// @require {mixin} bpk-list
///
/// @example scss
///   .selector {
///     @include bpk-list();
///     @include bpk-list--nested();
///   }

@mixin bpk-list--nested {
  margin-top: $bpk-list-nested-margin-top;
  margin-bottom: $bpk-list-nested-margin-bottom;
}

/// List item.
///
/// @example scss
///   .selector {
///     @include bpk-list-item();
///   }

@mixin bpk-list-item {
  margin-top: $bpk-list-item-margin-top;
  margin-bottom: $bpk-list-item-margin-bottom;
}

/// Inline link.
///
/// @example scss
///   .selector {
///     @include bpk-link();
///   }

@mixin bpk-link {
  padding: 0;
  border: 0;
  background-color: transparent;
  text-decoration: $bpk-link-text-decoration;
  cursor: pointer;
  appearance: none;

  @include bpk-themeable-property(color, --bpk-link-color, $bpk-link-color);

  @include bpk-hover {
    text-decoration: $bpk-link-hover-text-decoration;

    @include bpk-themeable-property(
      color,
      --bpk-link-hover-color,
      $bpk-link-hover-color
    );
  }

  &:visited {
    @include bpk-themeable-property(
      color,
      --bpk-link-visited-color,
      $bpk-link-visited-color
    );
  }

  &:active {
    text-decoration: $bpk-link-hover-text-decoration;

    @include bpk-themeable-property(
      color,
      --bpk-link-active-color,
      $bpk-link-active-color
    );
  }
}

/// White link. Modifies the bpk-link mixin.
///
/// @require {mixin} bpk-link
///
/// @example scss
///   .selector {
///     @include bpk-link();
///     @include bpk-link--white();
///   }

@mixin bpk-link--alternate {
  @include bpk-themeable-property(
    color,
    --bpk-link-alternate-color,
    $bpk-link-alternate-color
  );

  @include bpk-hover {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-hover-color,
      $bpk-link-alternate-hover-color
    );
  }

  &:visited {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-visited-color,
      $bpk-link-alternate-visited-color
    );
  }

  &:active {
    @include bpk-themeable-property(
      color,
      --bpk-link-alternate-active-color,
      $bpk-link-alternate-active-color
    );
  }
}

@mixin bpk-link--white {
  @include bpk-link--alternate;
}

/// Active link. Modifies the bpk-link mixin.
///
/// @require {mixin} bpk-link
///
/// @example scss
///   .selector {
///     @include bpk-link();
///     @include bpk-link--active();
///   }

@mixin bpk-link--active {
  color: $bpk-link-active-color;

  &:visited {
    color: $bpk-link-active-color;
  }

  &:active {
    color: $bpk-link-active-color;
  }
}

/// Table.
///
/// @example scss
///   .selector {
///     @include bpk-table();
///   }

@mixin bpk-table {
  width: 100%;
  margin-bottom: bpk-spacing-md();
  border-collapse: collapse;
  table-layout: fixed;

  @include bpk-border-sm($bpk-color-sky-gray-tint-06, '');
}

/// Alternate table style.
/// @require {mixin} bpk-table
///
/// @example scss
///   .selector {
///     @include bpk-table();
///     @include bpk-table--alternate();
///   }

@mixin bpk-table--alternate {
  @include bpk-border-sm($bpk-color-sky-gray-tint-04, '');
}

/// Table cell.
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///   }

@mixin bpk-table__cell {
  padding: bpk-spacing-base();
}

/// Table head cell. Modifies the bpk-table__cell mixin.
///
/// @require {mixin} bpk-table__cell
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///     @include bpk-table__cell--head();
///   }

@mixin bpk-table__cell--head {
  background-color: $bpk-color-sky-gray-tint-07;
  font-weight: normal;
  text-align: left;

  @include bpk-rtl {
    text-align: right;
  }
}

/// Alternate table head cell. Modifies the bpk-table__cell mixin.
///
/// @require {mixin} bpk-table__cell
///
/// @example scss
///   .selector {
///     @include bpk-table__cell();
///     @include bpk-table__cell--head-alternate();
///   }

@mixin bpk-table__cell--head-alternate {
  background-color: $bpk-color-white;
  text-align: left;

  @include bpk-text--bold;

  @include bpk-rtl {
    text-align: right;
  }
}

/// Code.
///
/// @example scss
///   .selector {
///     @include bpk-code();
///   }

@mixin bpk-code {
  display: inline;
  padding: 0 $bpk-spacing-xs;
  background-color: $bpk-color-sky-gray-tint-07;
  color: $bpk-color-sky-gray-tint-01;
  text-align: left;
  text-shadow: 0 $bpk-one-pixel-rem $bpk-color-white;
  white-space: nowrap;
  vertical-align: bottom;

  @include bpk-border-radius-xs;

  @include bpk-rtl {
    direction: ltr;
  }
}

/// Alternate code style suited for display on non-white backgrounds.
///
/// @example scss
///   .selector {
///     @include bpk-code();
///     @include bpk-code--alternate();
///   }

@mixin bpk-code--alternate {
  background-color: $bpk-color-sky-blue-tint-03;
  text-shadow: none;
}

/// Code block. Modifies the bpk-code mixin.
///
/// @require {mixin} bpk-code
///
/// @example scss
///   .selector {
///     @include bpk-code();
///     @include bpk-code--block();
///   }

@mixin bpk-code--block {
  display: block;
  margin: 0;
  padding: 0;
  background-color: transparent;
  white-space: inherit;
  overflow: auto;
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

/// Pre (code block wrapper).
///
/// @example scss
///   .selector {
///     @include bpk-code__pre();
///   }

@mixin bpk-code__pre {
  margin: 0 0 $bpk-spacing-sm;
  padding: $bpk-spacing-base;
  background-color: $bpk-color-sky-gray-tint-07;

  @include bpk-border-radius-xs;
}

/// Pre (code block wrapper) alternate style.
///
/// @example scss
///   .selector {
///     @include bpk-code__pre();
///     @include bpk-code__pre--alternate();
///   }

@mixin bpk-code__pre--alternate {
  background-color: transparent;

  @include bpk-border-sm($bpk-color-sky-gray-tint-04);
}

/// Blockquote.
///
/// @example scss
///   .selector {
///     @include bpk-blockquote();
///   }

@mixin bpk-blockquote {
  margin: 0 0 $bpk-spacing-sm 0;
  padding: $bpk-spacing-xs $bpk-spacing-xs $bpk-spacing-xs $bpk-spacing-md;
  background-color: $bpk-color-sky-gray-tint-07;
  color: $bpk-color-sky-gray-tint-02;

  @include bpk-border-left-lg($bpk-color-sky-blue);
  @include bpk-border-left-lg(
    var(--bpk-blockquote-bar-color, $bpk-color-sky-blue)
  );

  @include bpk-rtl {
    padding: $bpk-spacing-xs $bpk-spacing-md $bpk-spacing-xs $bpk-spacing-xs;
    border-left: 0;

    @include bpk-border-right-lg($bpk-color-sky-blue);
    @include bpk-border-right-lg(
      var(--bpk-blockquote-bar-color, $bpk-color-sky-blue)
    );
  }

  > *:last-child {
    margin-bottom: 0;
  }
}

/// Adds additional spacing above and below blockquotes. Modifies the bpk-blockquote mixin.
///
/// @require {mixin} bpk-blockquote
///
/// @example scss
///   .selector {
///     @include bpk-blockquote();
///     @include bpk-blockquote--extra-spacing();
///   }

@mixin bpk-blockquote--extra-spacing {
  margin-top: $bpk-spacing-lg;
  margin-bottom: $bpk-spacing-lg;
}

/// Content container.
///
/// @example scss
///   .selector {
///     @include bpk-content-container();
///   }

/* stylelint-disable selector-max-type */
@mixin bpk-content-container {
  h1,
  h2,
  h3,
  h4 {
    @include bpk-content-heading;
  }
}
/* stylelint-enable */

/// Content container for bare html. Modifies the bpk-content-container mixin.
///
/// @require {mixin} bpk-content-container
///
/// @example scss
///   .selector {
///     @include bpk-content-container();
///     @include bpk-content-container--bare-html();
///   }

@mixin bpk-content-container--bare-html {
  h1 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-sm;

    @include bpk-text-xxxxl;

    @include bpk-breakpoint-mobile {
      @include bpk-text-xxl;
    }
  }

  h2 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-sm;

    @include bpk-text-xxl;

    @include bpk-breakpoint-mobile {
      @include bpk-text-xl;
    }
  }

  h3 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-sm;

    @include bpk-text-xl;

    @include bpk-breakpoint-mobile {
      @include bpk-text-base;
      @include bpk-text-bold;
    }
  }

  h4 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-xs;

    @include bpk-text-base;

    @include bpk-breakpoint-mobile {
      @include bpk-text-xs;
      @include bpk-text-bold;
    }
  }

  h5 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-sm;

    @include bpk-text-xs;

    @include bpk-breakpoint-mobile {
      @include bpk-text-xs;
      @include bpk-text-bold;
    }
  }

  h6 {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-sm;

    @include bpk-text-xs;

    @include bpk-breakpoint-mobile {
      @include bpk-text-xs;
      @include bpk-text-bold;
    }
  }

  a {
    /* stylelint-disable-line selector-max-type */
    @include bpk-link;
  }

  p {
    /* stylelint-disable-line selector-max-type */
    margin-top: 0;
    margin-bottom: $bpk-spacing-xs;

    @include bpk-text-base;
  }

  /* stylelint-disable selector-max-type */
  ul,
  ol {
    @include bpk-list;

    ul,
    ol {
      @include bpk-list--nested;
    }

    li {
      @include bpk-list-item;
    }
  }

  table {
    @include bpk-table;

    td {
      @include bpk-table__cell;
    }

    th {
      @include bpk-table__cell;
      @include bpk-table__cell--head;
    }
  }

  code {
    @include bpk-code;
  }

  pre {
    @include bpk-code__pre;

    > code {
      @include bpk-code--block;
    }
  }

  blockquote {
    @include bpk-blockquote;
  }
}
/* stylelint-enable */

/// Content container for bare html with alternate style
///
/// @require {mixin} bpk-content-container
/// @require {mixin} bpk-content-container--bare-html
///
/// @example scss
///   .selector {
///     @include bpk-content-container();
///     @include bpk-content-container--bare-html();
///     @include bpk-content-container--bare-html-alternate();
///   }

@mixin bpk-content-container--bare-html-alternate {
  code {
    /* stylelint-disable-line selector-max-type */
    @include bpk-code--alternate;
  }

  pre {
    @include bpk-code__pre--alternate;

    > code {
      /* stylelint-disable-line selector-max-type */
      @include bpk-code--block;
    }
  }

  table {
    @include bpk-table--alternate;

    th {
      /* stylelint-disable-line selector-max-type */
      @include bpk-table__cell--head-alternate;
    }
  }
}