@import "variables";
@import "palette";
@import "mixins/fontSize";

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Bold"),
       local("Klavika Bold"),
       url("#{$font-path}/klavikabasic-bold-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-bold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Bold Italic"),
       local("Klavika Bold Italic"),
       url("#{$font-path}/klavikabasic-bolditalic-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-bolditalic-webfont.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Light"),
       local("Klavika Light"),
       url("#{$font-path}/klavikabasic-light-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Light Italic"),
       local("Klavika Light Italic"),
       url("#{$font-path}/klavikabasic-lightitalic-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-lightitalic-webfont.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Medium"),
       local("Klavika Medium"),
       url("#{$font-path}/klavikabasic-medium-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Medium Italic"),
       local("Klavika Medium Italic"),
       url("#{$font-path}/klavikabasic-mediumitalic-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-mediumitalic-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Regular"),
       local("Klavika Regular"),
       url("#{$font-path}/klavikabasic-regular-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Klavika";
  src: local("Klavika Basic Regular Italic"),
       local("Klavika Regular Italic"),
       url("#{$font-path}/klavikabasic-regularitalic-webfont.woff2") format("woff2"),
       url("#{$font-path}/klavikabasic-regularitalic-webfont.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Proxima Nova";
  src: local("Proxima Nova Bold"),
       url("#{$font-path}/proximanova-bold-webfont.woff2") format("woff2"),
       url("#{$font-path}/proximanova-bold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: local("Proxima Nova Light"),
       url("#{$font-path}/proximanova-light-webfont.woff2") format("woff2"),
       url("#{$font-path}/proximanova-light-webfont.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Proxima Nova";
  src: local("Proxima Nova Regular"),
       url("#{$font-path}/proximanova-regular-webfont.woff2") format("woff2"),
       url("#{$font-path}/proximanova-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: $global-primary-font;
  line-height: 1.45;
  color: $white-color;
  font-size: $base-font-size;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-bottom: em-calc(20px);
  font-weight: inherit;
}

h1,
h2,
h3,
h4 {
  margin: em-calc(22px) 0 em-calc(8px);
  font-family: inherit;
  line-height: 1.2;
  font-weight: 400;
}

h1,
.h1 {
  margin-top: 0;
  @include font-size(25px);
}

h2
.h2 {
  @include font-size(22px);
}

h3
.h3 {
  @include font-size(20px);
}

h4
.h4 {
  @include font-size(18px);
}

small {
  @include font-size(14px);
}

a {
  cursor: pointer;
  color: $brand-color;
  text-decoration: none;
  outline: none;
}

a:hover,
a:active {
  color: $white-color;
}

h1:first-of-type {
  @include font-size(18px);
  font-weight: 500;
  margin-bottom: em-calc(40px);
  text-transform: capitalize;
}

.modal h1, .modal h2
.dialog h1, .modal h2 {
  margin: em-calc(10px) 0;
  @include font-size(25px);
  font-weight: 400;
}

.section-heading {
  @include font-size(16px);
  position: relative;
  font-weight: 400;
  display: flex;

  &::before,
  &::after {
    background-image: linear-gradient(-90deg, $gradient-color 50px, $gradient-highlight-color calc(100% - 50px), $gradient-highlight-color 100%);
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    align-self: center;
  }

  &::before {
    width: 0;
    flex-shrink: 1;
  }

  &::after {
    left: 0.5em;
    flex-grow: 1;
  }

  &--large {
    @include font-size(24px);
    font-weight: 300;
  }
}

.form-heading {
  @include font-size(24px);
  position: relative;
  &::after {
    background-image: linear-gradient(-90deg, $gradient-color 50px, $gradient-highlight-color calc(100% - 50px), $gradient-highlight-color 100%);
    height: 1px;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    display: inline-block;
    content: "";
  }
}

.text {
  &--highlight {
    background-color: rgba($warning-color, 1);
    color: $dark-blue-color;
    padding: em-calc(1px);
  }

  &--positive {
    color: $positive-color;

    path,
    polygon {
      fill: $positive-color;
    }
  }

  &--negative {
    color: $negative-color;

    path,
    polygon {
      fill: $negative-color;
    }
  }

  &--neutral {
    color: $neutral-color;

    path,
    polygon {
      fill: $neutral-color;
    }
  }

  &--warning {
    color: $warning-color;
  }

  &--quiet {
    color: $unselected-text;
  }

  &--brand {
    color: $brand-color;
  }

  &--default {
    color: $white-color;
  }

  &--facebook {
    color: $facebook-color;
  }

  &--twitter {
    color: $twitter-color;
  }

  &--linkedin {
    color: $linkedin-color;
  }

  &--google {
    color: $google-color;
  }

  &--instagram {
    color: $instagram-color;
  }

  &--pinterest {
    color: $pinterest-color;
  }

  &--xxsmall {
    @include font-size(12px);
  }

  &--xsmall {
    @include font-size(13px);
  }

  &--small {
    @include font-size(14px);
  }

  &--large {
    @include font-size(18px);
  }

  &--xlarge {
    @include font-size(20px);
  }
  &--xxlarge {
    @include font-size(22px);
  }
}

.stat-label {
  text-transform: uppercase;
  letter-spacing: rem-calc(2px);
  @include font-size(11px);
  line-height: rem-calc(13px);
  font-weight: 500;
  &--header {
    font-weight: 400;
    letter-spacing: 0;
    @include font-size(13px);
    line-height: 1.3;
    color: $stat-label-dark-text;
  }
}

.stat {
  font-weight: 300;
  @include font-size(20px);
  letter-spacing: rem-calc(-0.15px);
  line-height: rem-calc(24px);
  &--small {
    @include font-size(16px);
    line-height: rem-calc(22px);
  }
  &--large {
    @include font-size(32px);
    font-weight: 400;
    line-height: rem-calc(44px);
  }
}

.list {
  margin: 0 0 em-calc(16px);
  padding: 0 0 0 em-calc(18px);

  li {
    margin: 0 0 em-calc(8px);
  }

  &--unstyled {
    list-style: none;
    padding: 0;
  }

  &--inline {
    list-style: none;
    padding: 0;

    li {
      display: inline;
      margin: 0 em-calc(16px) em-calc(16px) 0;
    }
  }
}

.bold {
  font-weight: bold;
}

.regular {
  font-weight: normal;
}

.italic {
  font-style: italic;
}

.caps {
  text-transform: uppercase;
  letter-spacing: em-calc(1px);
  &--extra-space {
    letter-spacing: em-calc(4px);
  }
}

.capitalize {
  text-transform: capitalize;
}

.left-align {
  text-align: left;
}

.center {
  text-align: center;
}

.right-align {
  text-align: right;
}

.justify {
  text-align: justify;
}

.nowrap {
  white-space: nowrap;
}

.underline {
  text-decoration: underline;
}

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-word {
  @include word-wrap(break-word);
}

.no-select {
  cursor: default;
  user-select: none;
}

.quiet {
  color: $unselected-text;
}