// $con-font:          "Inter";
//$con-font:          'Euclid Circular A', Tahoma, Geneva, Verdana, sans-serif;

$con-font:          'Euclid Triangle';
$euclid-font: 'Euclid Triangle';

@mixin fontSetup {
    font-family: $euclid-font;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    font-feature-settings: "kern";
    font-kerning: normal;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    -webkit-font-feature-settings:"liga" 0;
    font-feature-settings:"liga" 0;
    -webkit-font-feature-settings:"liga" 0;
    font-feature-settings:"liga" 0;

    //input, button, select, optgroup, textarea {
    //    font-family: inherit;
    //    font-size: inherit;
    //    font-weight: inherit;
    //    line-height: inherit;
    //    color: inherit;
    //}

    //a {
    //    color: color(key);
    //    &:hover{
    //        color: color(key,2);
    //    }
    //    &.inactive{
    //        color: color(grey,5);
    //    }
    //}

    //TODO: research
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    font-feature-settings: 'case' 1; // Switches out some glyphs to work better with capital letters and numbers.
}

@mixin font($options...){

    @each $option in $options {

        @if         $option == header{
            font-size: 24px;
            font-weight: 500;
            line-height: 1.2;
        }
        @else if    $option == subheader{
            font-size:  16px;
            font-weight: 700;
            line-height: 1.2;
        }
        @else if    $option == caption{
            font-size: 10px;
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        @else if    $option == 'light'            {font-weight: 300 }
        @else if    $option == 'regular'          {font-weight: 400}
        @else if    $option == 'medium'           {font-weight: 500}
        @else if    $option == 'semi-bold'        {font-weight: 600}
        @else if    $option == 'bold'             {font-weight: 700}

        @else if    $option == 's-10'           {font-size: 10px}
        @else if    $option == 's-12'           {font-size: 12px}
        @else if    $option == 's-13'           {font-size: 13px}
        @else if    $option == 's-14'           {font-size: 14px}
        @else if    $option == 's-16'           {font-size: 16px}
        @else if    $option == 's-18'           {font-size: 18px}
        @else if    $option == 's-20'           {font-size: 20px}
        @else if    $option == 's-22'           {font-size: 22px}
        @else if    $option == 's-24'           {font-size: 24px}
        @else if    $option == 's-30'           {font-size: 30px}
        @else if    $option == 's-32'           {font-size: 32px;letter-spacing: -0.5px;}
        @else if    $option == 's-40'           {font-size: 40px}
        @else if    $option == 's-48'           {font-size: 48px}

        @else if    $option == 'l-1'            {line-height: 1}
        @else if    $option == 'l-1.2'          {line-height: 1.2}
        @else if    $option == 'l-1.4'          {line-height: 1.4}
        @else if    $option == 'l-1.6'          {line-height: 1.6}
        @else if    $option == 'l-1.8'          {line-height: 1.8}

        @else if    $option == 'uppercase'      {text-transform: uppercase;letter-spacing: 2px;}
        @else if    $option == 'italic'         {font-style: italic;}

        @else if    $option == 'left'           {text-align: left;}
        @else if    $option == 'center'         {text-align: center;}
        @else if    $option == 'right'          {text-align: right;}


        @else if    $option == 'digit'          {font-feature-settings: 'ss01' 1}
        @else if    $option == 'digit-tab'      {font-feature-settings: 'tnum' 1;font-variant-numeric: tabular-nums;}
        @else if    $option == 'noselect'       {user-select: none;}
        @else if    $option == 'noligatures'    {font-variant-ligatures: no-common-ligatures !important;}
        @else if    $option == 'smooth'         {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}


        @else if    $option == 'family'         {font-family:$con-font !important;}
        @else if    $option == 'family-euclid'         {font-family:$euclid-font !important;}

        @else {}
    }
}