@import '../src/tokens/tokens.sass'
@import '../src/tokens/tokens.legacy.sass'

@import "../src/mixins/_all"
@import '../src/helpers/typography.legacy.helpers'

$tablet: $bal-breakpoint-tablet !default
$desktop: $bal-breakpoint-desktop !default
$high-definition: $bal-breakpoint-high-definition !default
$widescreen: $bal-breakpoint-widescreen !default
$fullhd: $bal-breakpoint-fullhd !default

$black-bis: $grey-6
$black-ter: $grey-6
$grey-darker: $grey-5
$grey-dark: $grey-4
$grey-light: $grey-3
$grey-lighter: $grey-2
$white-ter: $grey-1
$white-bis: $grey-1

$cyan: $blue

$blue-darker: $blue-6
$blue-dark: $blue-5
$blue-light: $blue-1

$blue-light-text: $blue-3
$blue-lighter-text: $blue-2

$blue-line: $blue-2
$blue-light-line: $blue-1
$blue-line-inverted: $blue-5

$blue-light-hover: $light-blue-1

$family-monospace: monospace !default
$render-mode: optimizeLegibility !default
$family-primary: $font-family-text !default
$family-secondary: $font-family-text !default
$family-code: $family-monospace !default

$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default

$link: $primary !default
$link-hover: $primary !default
$text: $primary !default
$text-invert: $white !default
$text-light: $blue-4 !default
$text-strong: $blue !default

$code: $red-5 !default
$code-background: $grey-1 !default

$pre: $text !default
$pre-background: $grey-1 !default

$size-large: $size-x-large !default
$size-medium: $size-large !default
$size-normal: $size-normal !default
$size-small: $size-small !default

$text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)
$button-shadow: $text-shadow

$body-background-color: $white !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
$body-overflow-x: hidden !default
$body-overflow-y: scroll !default

$body-color: $text !default
$body-font-size: 1em !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default

$code-family: $family-code !default
$code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default
$code-size: 0.875em !default

$small-font-size: 0.875em !default

$hr-background-color: $blue-2 !default
$hr-height: 1px !default
$hr-margin: 2rem 0 !default

$strong-color: $text-strong !default
$strong-weight: $weight-bold !default

$pre-font-size: 0.875em !default
$pre-padding: 1.25rem 1.5rem !default
$pre-code-font-size: 1em !default

//
// HEADINGS
// -------------------------------------------------
$title-color: $text-strong !default
$title-family: $font-family-title !default
$title-size: $size-x-large !default
$title-weight: $weight-bold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default

$subtitle-color: $text-strong !default
$subtitle-family: $font-family-title !default
$subtitle-size: $size-normal !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default

.is-display-block
  display: block !important

.is-display-inline-block
  display: inline-block !important

.is-display-flex
  display: flex !important

.is-display-inline-flex
  display: inline-flex !important

.is-clipped
  overflow: hidden !important

.is-relative
  position: relative !important

.is-pulled-left
  float: left !important

.is-pulled-right
  float: right !important

.columns.is-variable
  --columnGap: 0.75rem
  +ltr-property("margin", calc(-1 * var(--columnGap)), false)
  +ltr-property("margin", calc(-1 * var(--columnGap)))
  > .column
    padding-left: var(--columnGap)
    padding-right: var(--columnGap)
  @for $i from 0 through 8
    &.is-#{$i}
      --columnGap: #{$i * 0.25rem}
    +mobile
      &.is-#{$i}-mobile
        --columnGap: #{$i * 0.25rem}
    +tablet
      &.is-#{$i}-tablet
        --columnGap: #{$i * 0.25rem}
    +tablet-only
      &.is-#{$i}-tablet-only
        --columnGap: #{$i * 0.25rem}
    +touch
      &.is-#{$i}-touch
        --columnGap: #{$i * 0.25rem}
    +desktop
      &.is-#{$i}-desktop
        --columnGap: #{$i * 0.25rem}
    +desktop-only
      &.is-#{$i}-desktop-only
        --columnGap: #{$i * 0.25rem}
    +high-definition
      &.is-#{$i}-high-definition
        --columnGap: #{$i * 0.25rem}
    +high-definition-only
      &.is-#{$i}-high-definition-only
        --columnGap: #{$i * 0.25rem}
    +widescreen
      &.is-#{$i}-widescreen
        --columnGap: #{$i * 0.25rem}
    +widescreen-only
      &.is-#{$i}-widescreen-only
        --columnGap: #{$i * 0.25rem}
    +fullhd
      &.is-#{$i}-fullhd
        --columnGap: #{$i * 0.25rem}

.is-regular,
span.is-regular,
p.is-regular,
a.is-regular,
.is-text-regular,
.is-text-regular span
  font-weight: var(--bal-font-weight-regular)

.is-bold,
span.is-bold,
p.is-bold,
a.is-bold,
.is-text-bold,
.is-text-bold span
  font-weight: var(--bal-font-weight-bold)

.is-light,
span.is-light,
p.is-light,
a.is-light,
.is-text-light,
.is-text-light span
  font-weight: var(--bal-weight-light)

.has-font-primary,
.has-font-text
  font-family: var(--bal-font-family-text)

.has-font-title
  font-family: var(--bal-font-family-title)

span.is-small,
p.is-small,
a.is-small,
.is-text-small,
.is-text-small span
  font-size: var(--bal-size-small)
  line-height: var(--bal-line-height-small)

p.is-lead,
p.is-lead > a
  font-size: var(--bal-size-large)
  line-height: var(--bal-line-height-large)
  +desktop
    font-size: var(--bal-size-desktop-large)
    line-height: var(--bal-line-height-desktop-large)

p.is-block,
p.is-block > a
  font-size: var(--bal-size-medium)
  line-height: var(--bal-line-height-medium)
  +desktop
    font-size: var(--bal-size-desktop-medium)
    line-height: var(--bal-line-height-desktop-medium)

p,
a,
span,
.title,
.subtitle
  &.has-blur-shadow
    text-shadow: var(--bal-text-shadow-normal)