//====================================================
//  Typography Base
//====================================================
$font-family--primary: 'Whitney SSm A', 'Whitney SSm B', 'Open Sans', Helvetica, Arial, sans-serif;
$font-family--secondary: 'Tungsten A', 'Tungsten B', Helvetica, Arial, sans-serif;

@mixin font-primary {
  font-family: $font-family--primary;
}

@mixin font-secondary($case: null) {
  font-family: $font-family--secondary;
  font-weight: 300;

  @if $case == 'upper' {
    text-transform: uppercase;
    letter-spacing: 1px;
  }
}

// Font Sizes
//====================================================
$font-sizes: (
  body: (
    xx-small: 0.625em,
    x-small: 0.75em,
    small: 0.875em,
    default: 1em,
    large: 1.125em,
    x-large: 1.5em
  ),
  title: (
    x-small: 12,
    small: 16,
    default: 18,
    large: 21,
    x-large: 32,
    xx-large: 40,
    jumbo: 60
  )
);

@function font-size($font-size: 'body', $size: 'default') {
  @return map-get(map-get($font-sizes, $font-size), $size);
}

// Line Heights
//====================================================
$line-heights: (
  body: (
    x-small: 0.5,
    small: 1,
    default: 1.5,
    large: 1.875,
    x-large: 2,
  ),
  title: (
    x-small: 1,
    small: 1.1,
    default: 1.5,
    medium: 1.875,
    large: 2,
  )
);

@function line-height($line-height: 'body', $size: 'default') {
  @return map-get(map-get($line-heights, $line-height), $size);
}

// Font Weights
//====================================================
$font-weights: (
  light: 100,
  regular: 300,
  medium: 500,
  heavy: 600,
  x-heavy: 700
) !default;

@function font-weight($weight: 300) {
  @return map-get($font-weights, $weight);
}

//====================================================
//  Typography Helpers
//====================================================
%label {
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: palette(gray, med-dark);
  user-select: none;
  margin-bottom: 10px;
}

//====================================================
//  Links
//====================================================
a {
  @include font-primary;

  color: palette(blue);
  text-decoration: underline;
  transition: all 0.1s ease-in-out;

  &:hover,
  &:focus {
    color: inherit;
    cursor: pointer;
    outline: 0;
  }

  &:focus {
    outline: thin dotted;
  }

  &.inactive {
    opacity: 0.3;

    &:hover,
    &:focus {
      color: inherit;
    }
  }

  &.back {
    text-decoration: none;
    color: palette(gray, base);

    &::before {
      content: "\2190";
      margin-right: 0.5em;
    }
  }
}

//====================================================
//  TODO: Move elsewhere
//====================================================
.disclaimer--block {
  display: block;
  padding: 2em;

  &--lg {
    padding: 4em;
  }
}

.numbered {
  &__list {
    counter-reset: li;
    margin: 0;
    padding: 0;
  }

  &__item {
    font-size: font-size(body, small);
    list-style: none;
    margin: 0 0 1em 2em;
    padding: 0.25em 0.5em;
    position: relative;

    &::before {
      align-items: center;
      background: palette(blue);
      border-radius: 100%;
      color: $white;
      content: counter(li);
      counter-increment: li;
      display: flex;
      height: 1.5em;
      justify-content: center;
      left: -2em;
      position: absolute;
      top: 6px;
      width: 1.5em;
    }

    p {
      line-height: line-height(body, medium);
    }
  }
}

.legal {
  font-size: font-size(body, small);

  ol {
    margin: 0;
    padding: 0;
  }

  li {
    margin-bottom: 1em;
  }
}

.faux-input {
  align-items: center;
  display: flex;
}

dl {
  margin: 0;
  padding: 0 0.5em;
}

dd {
  margin: 0 0 0.5em;
}