@import './text-colors-mixin';

$includeHtml: false !default;
$bodyTextSizes: (xxsmall xsmall small medium large xlarge xxlarge xxxlarge);
$bodyTextTransforms: (uppercase lowercase capitalize);

$bodyTextSizeRules: (
  xxxlarge: (
    fontSize: 66px,
    lineHeight: 88px,
  ),
  xxlarge: (
    fontSize: 45px,
    lineHeight: 60px,
  ),
  xlarge: (
    fontSize: 33px,
    lineHeight: 44px,
  ),
  large: (
    fontSize: 24px,
    lineHeight: 32px,
  ),
  medium: (
    fontSize: 18px,
    lineHeight: 24px,
  ),
  small: (
    fontSize: 15px,
    lineHeight: 20px,
  ),
  xsmall: (
    fontSize: 12px,
    lineHeight: 16px,
  ),
  xxsmall: (
    fontSize: 9px,
    lineHeight: 12px,
  ),
);

@function getBodyTextSizeFromMap($map, $keys...) {
  @each $key in $keys {
    $map: map-get($map, $key);
  }
  @return $map;
}

@mixin bodyTextTypeSizeVariant($size) {
  font-size: getBodyTextSizeFromMap($bodyTextSizeRules, $size, 'fontSize');
  line-height: getBodyTextSizeFromMap($bodyTextSizeRules, $size, 'lineHeight');
}

@if ($includeHtml) {
  em.sg-text {
    font-style: normal;
  }

  blockquote.sg-text {
    margin: 0;
  }

  .sg-text {
    @include bodyTextTypeSizeVariant(medium);
    font-family: $fontFamilyPrimary;
    font-feature-settings: $fontFeatureSettings;
    font-weight: $fontWeightNormal;
    color: $text-black;

    &--link {
      cursor: pointer;
      text-decoration: none;
      color: $text-blue-60;

      &:hover,
      &:active {
        text-decoration: underline;
      }
    }

    &--inherited {
      font-size: inherit;
      line-height: inherit;
      font-family: inherit;
      font-weight: inherit;
      color: inherit;
    }

    &--container {
      position: relative;
    }

    &--link-label {
      cursor: pointer;
      position: relative;

      &:focus-within {
        @include applyFocusTextStyle();
      }
    }

    &--link-button {
      right: 0px;
    }

    &--link-disabled {
      cursor: default;

      &:hover,
      &:active {
        text-decoration: none;
      }
    }

    &--link-underlined {
      cursor: pointer;
      text-decoration: underline;
    }

    &--link-unstyled {
      cursor: pointer;
      color: inherit;
      font-weight: inherit;

      &:hover,
      &:active {
        text-decoration: underline;
      }
    }

    @include textColor();
  }

  @each $breakpoint, $variant in $responsiveVariants {
    @include sgResponsive($breakpoint) {
      @each $size in $bodyTextSizes {
        @include makeResponsive($variant, 'sg-text--#{$size}') {
          @include bodyTextTypeSizeVariant($size);
        }
      }

      @include makeResponsive($variant, 'sg-text--bold') {
        font-weight: $fontWeightBold;
      }

      @include makeResponsive($variant, 'sg-text--regular') {
        font-weight: $fontWeightNormal;
      }

      @each $transform in $bodyTextTransforms {
        @include makeResponsive($variant, 'sg-text--#{$transform}') {
          text-transform: $transform;
        }
      }

      @include makeResponsive($variant, 'sg-text--to-left') {
        text-align: left;
      }

      @include makeResponsive($variant, 'sg-text--to-right') {
        text-align: right;
      }

      @include makeResponsive($variant, 'sg-text--to-center') {
        text-align: center;
      }

      @include makeResponsive($variant, 'sg-text--justify') {
        text-align: justify;
      }

      @include makeResponsive($variant, 'sg-text--no-wrap') {
        white-space: nowrap;
      }

      @include makeResponsive($variant, 'sg-text--wrap') {
        white-space: normal;
      }

      @include makeResponsive($variant, 'sg-text--full') {
        width: 100%;
      }

      @include makeResponsive($variant, 'sg-text--auto') {
        width: auto;
      }

      @include makeResponsive($variant, 'sg-text--break-words') {
        word-break: break-word;
      }

      @include makeResponsive($variant, 'sg-text--word-break-normal') {
        word-break: normal;
      }

      @include makeResponsive($variant, 'sg-text--pre-wrap') {
        white-space: pre-wrap;
      }

      @include makeResponsive($variant, 'sg-text--pre-line') {
        white-space: pre-line;
      }

      @include makeResponsive($variant, 'sg-text--white-space-normal') {
        white-space: normal;
      }
    }
  }
}