//
// Variables
//

// Dependencies
@import 'config/variables';
@import 'config/fonts';

$colors: map-get($variables, 'colors');
$statuses: map-get($variables, 'color-statuses');
$combinations: map-get($variables, 'color-combinations');

// Variables
$color-black: map-get($colors, 'color-black');
$color-blue: map-get($colors, 'color-blue');
$color-blue-bright: map-get($colors, 'color-blue-bright');
$color-blue-dark: map-get($colors, 'color-blue-dark');
$color-blue-light: map-get($colors, 'color-blue-light');
$color-green: map-get($colors, 'color-green');
$color-green-dark: map-get($colors, 'color-green-dark');
$color-green-mid: map-get($colors, 'color-green-mid');
$color-green-light: map-get($colors, 'color-green-light');
$color-grey-dark: map-get($colors, 'color-grey-dark');
$color-grey-light: map-get($colors, 'color-grey-light');
$color-grey-lightest: map-get($colors, 'color-grey-lightest');
$color-grey-mid: map-get($colors, 'color-grey-mid');
$color-pink: map-get($colors, 'color-pink');
$color-pink-light: map-get($colors, 'color-pink-light');
$color-purple: map-get($colors, 'color-purple');
$color-red: map-get($colors, 'color-red');
$color-yellow-access: map-get($colors, 'color-yellow-access');
$color-yellow-light: map-get($colors, 'color-yellow-light');
$color-white: map-get($colors, 'color-white');
$color-transparent: map-get($colors, 'color-transparent');

// Mixins
@mixin combination($selector, $combination, $colors, $smoothing: false) {
  color: map-get($colors, map-get($combination, 'color'));
  background-color: map-get($colors, map-get($combination, 'background-color'));

  @if $smoothing {
    @include font-smooth;
  }

  #{$selector}__alt {
    color: map-get($colors, map-get($combination, 'color-alt'));
  }

  a:not(.btn), .btn-link, .button-link {
    color: map-get($colors, map-get($combination, 'hyperlinks'));
    text-decoration-color: map-get($colors, map-get($combination, 'hyperlinks-underline'));

    &:visited {
      color: map-get($colors, map-get($combination, 'visited'));
    }

    &:hover, &:active, &:focus {
      color: map-get($colors, map-get($combination, 'hover'));
    }
  }

  h1, h3, h5, .type-h1, .type-h2, .type-h3 {
    color: map-get($colors, map-get($combination, 'headings'));
  }
}