@import "../styles/global-variables";

// The top utility class(es) in each pairing map(s) to Bootstrap's naming conventions
// The bottom utility class(es) in each pairing map(s) to Blueprint's naming conventions

// Bootstrap is using !important, so we need to use it in order to override Bootstrap until we remove Bootstrap

// text styles
// stylelint-disable declaration-no-important

.h1
{
  margin-bottom: $space-md !important;
  font-weight: $font-weight-regular !important;
  font-size: $font-size-h1 !important;
}

.h2
{
  margin-bottom: $space-md !important;
  font-weight: $font-weight-semi-bold !important;
  font-size: $font-size-h2 !important;
}

.h3
{
  margin-bottom: $space-sm !important;
  font-weight: $font-weight-bold !important;
  font-size: $font-size-h3 !important;
}

.h4
{
  margin-bottom: $space-sm !important;
  color: $font-color-secondary !important;
  font-weight: $font-weight-semi-bold !important;
  font-size: $font-size-h4 !important;
}

.display-1,
.text-style-1
{
  color: $font-color-primary !important;
  font-weight: $font-weight-regular !important;
  font-size: $font-size-xl !important;
}

.display-2,
.text-style-2
{
  color: $font-color-primary !important;
  font-weight: $font-weight-semi-bold !important;
  font-size: $font-size-lg !important;
}

.display-3,
.text-style-3
{
  color: $font-color-primary !important;
  font-weight: $font-weight-bold !important;
  font-size: $font-size-md !important;
}

.display-4,
.text-style-4 // previously .text-secondary
{
  color: $font-color-secondary !important;
  font-weight: $font-weight-semi-bold !important;
  font-size: $font-size-md !important;
}

.text-style-muted-1
{
  color: $font-color-secondary !important;
  font-weight: $font-weight-regular !important;
}

.text-style-muted-2
{
  color: $font-color-secondary !important;
  font-style: italic !important;
  font-weight: $font-weight-regular !important;
}

.text-style-muted-3
{
  color: $font-color-secondary !important;
  font-weight: $font-weight-semi-bold !important;
}

// font sizes

.font-size-xl
{
  font-size: $font-size-xl !important;
}

.font-size-lg // previously .u-font-size-2
{
  font-size: $font-size-lg !important;
}

.font-size-md
{
  font-size: $font-size-md !important;
}

.small,
.font-size-sm // previously .text-small
{
  font-size: $font-size-sm !important;
}

.font-size-body-lead
{
  font-size: $font-size-body-lead !important;
}

.font-size-body
{
  font-size: $font-size-body !important;
}

// font weights

.font-weight-normal,
.font-weight-regular
{
  font-weight: $font-weight-regular !important;
}

.font-weight-semi-bold
{
  font-weight: $font-weight-semi-bold !important;
}

.font-weight-bold
{
  font-weight: $font-weight-bold !important;
}

// font styles

.font-style-normal
{
  font-style: normal !important;
}

.font-style-italic
{
  font-style: italic !important;
}

// text transforms

.text-lowercase,
.text-transform-lowercase
{
  text-transform: lowercase !important;
}

.text-capitalize,
.text-transform-capitalize
{
  text-transform: capitalize !important;
}

.text-uppercase,
.text-transform-uppercase
{
  text-transform: uppercase !important;
}

// text decoration

.text-decoration-none
{
  text-decoration: none !important;
}

.text-decoration-underline
{
  text-decoration: underline !important;
}

// text alignment

.text-left,
.text-align-left
{
  text-align: left !important;
}

.text-center,
.text-align-center
{
  text-align: center !important;
}

.text-right,
.text-align-right
{
  text-align: right !important;
}

// text wrapping

.text-nowrap
{
  white-space: nowrap !important;
}

.text-wrap
{
  white-space: normal !important;
}

.text-break
{
  // for inline elements
  word-break: break-all !important; // Firefox, > Edge 18
  /* stylelint-disable-next-line declaration-block-no-duplicate-properties */
  word-break: break-word !important; // IE, < Edge 18, Chrome
  // for block elements
  overflow-wrap: break-word !important;
}