/**
 * Load external Web Fonts
 */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
// Should be improved to the separate <link> tas with preconnect feature (<link rel="preconnect" href="https://fonts.googleapis.com">
//<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
//<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap" rel="stylesheet">)

/**
 * Typography
 */

h1, h2, h3, h4, h5, h6 {
  p {
    font-size: inherit;
    line-height: inherit;
  }
}

body {
  @include font-sizes(body);
  min-width: 320px;
}

.ck-editor,
.text-formatted {
  p {
    &:last-child {
      margin-bottom: 0;
    }

    // Text sizes
    &.text-large {
      @include font-sizes(text-large)
    }

    &.text-card {
      @include font-sizes(text-card)
    }

    &.text-small {
      @include font-sizes(text-small)
    }
  }

  h1 {
    margin-bottom: rem-calc(24);
  }

  h2 {
    margin-bottom: rem-calc(16);
    @include breakpoint(medium) {
      margin-bottom: rem-calc(24);
    }
  }

  h3 {
    margin-bottom: rem-calc(16);
  }

  h4 {
    margin-bottom: rem-calc(10);
  }

  h5,
  h6 {
    margin-bottom: rem-calc(12);
  }

  a:not([class*="btn"]):not([class*="link"]) {
    @include link(default);
  }

  ul,
  ol {
    line-height: inherit;
    @include breakpoint(medium) {
      margin-left: rem-calc(24);
    }

    li + li {
      margin-top: rem-calc(8);
      @include breakpoint(medium) {
        margin-top: rem-calc(16);
      }
    }
  }

  ul {
    margin-left: rem-calc(16);
    list-style-type: none;

    li {
      position: relative;
      padding-left: rem-calc(28);

      &::before {
        position: absolute;
        top: .8em;
        left: 0;
        width: rem-calc(8);
        height: rem-calc(8);
        border-radius: 50%;
        transform: translate3d(0, -50%, 0);
        content: '';
      }

      &:nth-child(3n+1)::before {
        background-color: $color-green-500;
        @include breakpoint(medium) {
          background: $color-linear-vertical-green;
        }
      }

      &:nth-child(3n+2)::before {
        background-color: $color-purple-600;
        @include breakpoint(medium) {
          background: $color-linear-vertical-purple;
        }
      }

      &:nth-child(3n+3)::before {
        background-color: $color-primary-600;
        @include breakpoint(medium) {
          background: $color-linear-vertical-blue;
        }
      }
    }
  }

  ol {
    margin-left: rem-calc(32);

    li {
      padding-left: rem-calc(10);

      &::marker {
        display: inline-block;
      }
    }
  }

  blockquote {
    @include blockquote;

    &::before {
      display: none;
    }
  }

  // Heading styles
  @each $size, $headers in $header-styles {
    @include breakpoint($size) {
      @each $header, $header-defs in $headers {
        #{$header}, .#{$header} {
          @if map-has-key($header-defs, font-size) {
            $font-size-temp: rem-calc(map-get($header-defs, font-size));
            font-size: $font-size-temp;
          }
          @if map-has-key($header-defs, font-weight) {
            font-weight: map-get($header-defs, font-weight);
          }
          @if map-has-key($header-defs, line-height) {
            line-height: map-get($header-defs, line-height);
          }
        }
      }
    }
  }

  // Hr styles
  .ck-content hr,
  hr {
    @include hr();
  }

  // Default table styles
  table {
    th {
      @include heading(h5);
      box-shadow: inset 0 -2px 0 $color-primary-600;
    }

    td {
      @include font-sizes(text-small);
    }
  }
}

*::selection {
  background-color: $color-primary-600;
  color: $color-white;
}
