//
// Typography
// --------------------------------------------------

// Headings
// -------------------------

@use "sass:math";

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 0;
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;

  @include themes(color, headings-color);

  .fa {
    vertical-align: middle;

    &.icon-un-activity_fund {
      vertical-align: -20%;
    }
  }

  small {
    font-weight: $font-weight-regular;
    line-height: 1;
    @include themes(color, headings-small-color);
  }
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-bottom: ($line-height-computed * 0.5);

  small,
  .small {
    font-size: 65%;
  }
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-bottom: ($line-height-computed * 0.5);

  small,
  .small {
    font-size: 75%;
  }
}

h1,
.h1 {
  line-height: $grid-unit-y * 6;

  @include text-responsive($font-size-h1);
}

h2,
.h2 {
  line-height: $grid-unit-y * 5;

  @include text-responsive($font-size-h2);
}

h3,
.h3 {
  line-height: $grid-unit-y * 4;

  @include text-responsive($font-size-h3);
}

h4,
.h4 {
  line-height: $grid-unit-y * 3;

  @include text-responsive($font-size-h4);
}

h5,
.h5 {
  line-height: $grid-unit-y * 2;

  @include text-responsive($font-size-h5);
}

h6,
.h6 {
  line-height: $grid-unit-y * 2;
  letter-spacing: 1px;
  text-transform: uppercase;

  @include text-responsive($font-size-h6);
}

// Body text
// -------------------------

p {
  margin: 0 0 ($grid-unit-y * 2);
  font-size: $font-size-large;
  line-height: $grid-unit-y * 3;

  @include themes(color, color-new-body-dark);
}

.lead {
  margin-bottom: $line-height-computed;
  font-size: $font-size-h3;
  font-weight: $font-weight-regular;
  line-height: $grid-unit-y * 4;

  @media (min-width: $screen-sm-min) {
    font-size: ($font-size-base * 1.5);
  }
}

// Emphasis & misc
// -------------------------

small,
.small {
  font-size: floor(math.div(100% * $font-size-small, $font-size-base));
}

// Alignment
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}

// Transformation
.text-lowercase {
  text-transform: lowercase;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-capitalize {
  text-transform: capitalize;
}

// Color variations
// -------------------------

.text-grey-light {
  @include themes(color, color-new-body-light, true);
}
a.text-grey-light {
  &:hover,
  &:focus {
    @include themes(color, color-new-body-dark, true);
  }
}

.text-grey-dark {
  @include themes(color, color-new-heading, true);
}
a.text-grey-dark {
  &:hover,
  &:focus {
    color: $brand-primary !important;
  }
}

.text-default {
  @include themes(color, color-new-body-light);
}
a.text-default {
  &:hover,
  &:focus {
    @include themes(color, color-new-body-dark);
  }
}

a.text-hover-red {
  &:hover,
  &:focus {
    color: $brand-danger !important;
  }
}

//# Brand

@include text-emphasis-variant(".text-primary", $brand-primary);

@include text-emphasis-variant(".text-success", $brand-success);

@include text-emphasis-variant(".text-info", $brand-info);

@include text-emphasis-variant(".text-warning", $brand-warning);

@include text-emphasis-variant(".text-danger", $brand-danger);

//# Harmony

@each $name, $color in $map-harmony-colors {
  .text-#{$name},
  a.text-#{$name} {
    color: $color;
  }

  a.text-#{$name} {
    &:hover,
    &:focus {
      color: darken($color, 5%);
    }
  }
}

// Extra Variations
// -------------------------

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

.text-line-through {
  text-decoration: line-through;
}

.text-larger {
  font-size: $font-size-large;
}

.text-currency {
  font-weight: $font-weight-medium;
  line-height: $grid-unit-y * 2;

  &:not(.text-*) {
    @include themes(color, color-new-body-dark);
  }
}

.text-time {
  font-size: $font-size-h2;
  line-height: $grid-unit-y * 5;
  font-weight: $font-weight-medium;

  @include themes(color, color-new-body-dark);
}

.text-caption {
  font-size: $font-size-extra-small - 1;
  font-weight: $font-weight-regular;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  line-height: $grid-unit-y * 2;

  &:not(.text-*) {
    @include themes(color, color-new-body-lght);
  }
}

@include bg-variant(".bg-primary", $state-primary-bg);

@include bg-variant(".bg-success", $state-success-bg);

@include bg-variant(".bg-info", $state-info-bg);

@include bg-variant(".bg-warning", $state-warning-bg);

@include bg-variant(".bg-danger", $state-danger-bg);

// Lists
// -------------------------

ul,
ol {
  margin-top: 0;
  margin-bottom: ($line-height-computed * 0.5);

  @include themes(color, color-new-body-dark);

  ul,
  ol {
    margin-bottom: 0;
  }
}

// List options

@mixin list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-unstyled {
  @include list-unstyled;
}

.list-inline {
  @include list-unstyled;

  margin-bottom: $grid-unit-y;
  margin-left: -$grid-unit-x;

  > li {
    display: inline-block;
    padding-right: $grid-unit-x;
    padding-left: $grid-unit-x;
    margin-bottom: $grid-unit-y;
  }

  &-muted {
    > li {
      cursor: pointer;

      @include themes(color, color-new-body-dark);

      &:hover,
      &:focus {
        color: $brand-primary;
      }

      &.active {
        color: $brand-primary;
      }
    }
  }
}

// Mark
// -------------------------

mark,
.mark {
  padding: 0.2em;
  background-color: $brand-primary-light-4;
}

// Description Lists
// -------------------------

dl {
  margin-top: 0;
  margin-bottom: $line-height-computed;
}
dt,
dd {
  line-height: $line-height-base;
}
dt {
  font-weight: $font-weight-regular;
}
dd {
  margin-left: 0;
}

.dl-options {
  dt,
  dd {
    font-size: $font-size-base;
    margin-bottom: $grid-unit-y;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  dt {
    width: $dl-options-x - $grid-unit-x * 2;
    text-align: left;
    float: left;
    clear: left;
    font-weight: $font-weight-regular;

    @include text-overflow();
  }

  dd {
    font-weight: $font-weight-bold;
    text-align: right;

    @include text-overflow();
  }
}

.dl-horizontal {
  dd {
    @include clearfix;
  }

  @media (min-width: $grid-float-breakpoint) {
    dt {
      float: left;
      width: ($dl-horizontal-offset - 20);
      clear: left;
      text-align: right;
      @include text-overflow;
    }
    dd {
      margin-left: $dl-horizontal-offset;
    }
  }
}

// Misc
// -------------------------

abbr[title],
abbr[data-original-title] {
  cursor: help;
}

.initialism {
  font-size: 90%;

  @extend .text-uppercase;
}

// Blockquotes
blockquote {
  padding: ($line-height-computed * 0.5) $line-height-computed;
  margin: 0 0 $line-height-computed;
  font-size: $blockquote-font-size;

  @include themes-border-left(
    blockquote-border-color,
    ceil($grid-unit-x * 0.5)
  );

  p,
  ul,
  ol {
    &:last-child {
      margin-bottom: 0;
    }
  }

  footer,
  small,
  .small {
    display: block;
    font-size: 80%;
    line-height: $line-height-base;

    @include themes(color, blockquote-small-color);

    &:before {
      content: "\2014 \00A0";
    }
  }
}

.blockquote-reverse,
blockquote.pull-right {
  padding-right: $grid-unit-x * 2;
  padding-left: 0;
  text-align: right;
  border-left: 0;
  border-right-width: ceil($grid-unit-x * 0.5);
  border-right-style: solid;

  @include themes(border-right-color, blockquote-border-color);

  // Account for citation
  footer,
  small,
  .small {
    &:before {
      content: "";
    }
    &:after {
      content: "\00A0 \2014"; // nbsp, em dash
    }
  }
}

// Addresses
address {
  margin-bottom: $line-height-computed;
  font-style: normal;
  line-height: $line-height-base;
}

// Link Toggle
// ------------------

.link-toggle {
  position: relative;
  padding-right: ceil($grid-unit-y * 2.5) !important;
  display: inline-block;

  &:before {
    font-family: $font-family-awesome;
    font-weight: $font-family-awesome-weight;
    font-size: $dropdown-arrow-size;
    content: "\f106";
    position: absolute;
    right: ($dropdown-arrow-size * 0.5);
    top: 50%;
    margin-top: -1px;

    @include transition($dropdown-arrow-transition-180deg);
    @include translate(0, -50%);
  }

  &.collapsed {
    margin-bottom: $grid-unit-y;

    &:before {
      -webkit-transform: translateY(-50%) rotate(-180deg);
      -ms-transform: translateY(-50%) rotate(-180deg);
      -o-transform: translateY(-50%) rotate(-180deg);
      transform: translateY(-50%) rotate(-180deg);
      margin-top: 1px;
    }
  }
}

// Text Overflow
// ------------------

.text-overflow {
  @include text-overflow();
}

.text-overflow-strings-2 {
  @include text-overflow-strings(2);
}