/*

*/

@mixin scut-clearfix {

&:after {
  content: "";
  display: table;
  clear: both;
}

}

%scut-clearfix {

@include scut-clearfix;

} @mixin scut-list-unstyled(

$no-margin: true

) {

list-style-type: none;
padding-left: 0;

@if $no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

}

%scut-list-unstyled {

@include scut-list-unstyled();

} // Depends on `list-unstyled` and `clearfix`.

@mixin scut-list-floated (

$space: false,
$dir: left,
$no-margin: true

) {

@include scut-list-unstyled($no-margin);
@include scut-clearfix;

& > li {
  float: $dir;
}

@if $space {
  & > li + li {
    margin-#{$dir}: $space;
  }
}

}

%scut-list-floated {

@include scut-list-floated;

}

@function scut-autoOrValue ($val) {

@if $val == a or $val == auto {
  @return auto;
}
@else {
  @return $val;
}

}

@mixin scut-coords (

$coordinates: n n n n

) {

$top: nth($coordinates, 1);
$right: nth($coordinates, 2);
$bottom: nth($coordinates, 3);
$left: nth($coordinates, 4);

@if $top != n {
  top: scut-autoOrValue($top);
}
@if $right != n {
  right: scut-autoOrValue($right);
}
@if $bottom != n {
  bottom: scut-autoOrValue($bottom);
}
@if $left != n {
  left: scut-autoOrValue($left);
}

} @function scut-strip-unit (

$num

) {

@return $num / ($num * 0 + 1);

} // Depends on `scut-strip-unit`.

$scut-em-base: 16 !default;

@function scut-em (

$pixels,
$base: $scut-em-base

) {

// $base could be in em or px (no unit = px).
// Adjust accordingly to create a $divisor that
// serves as context for $pixels.
$multiplier: if(unit($base) == em, 16, 1);
$divisor: scut-strip-unit($base) * $multiplier;

$em-vals: ();
@each $val in $pixels {
  $val-in-ems: (scut-strip-unit($val) / $divisor) * 1em;
  $em-vals: append($em-vals, $val-in-ems);
}

@if length($em-vals) == 1 {
  // return a single value instead of a list,
  // so it can be used in calculations
  @return nth($em-vals, 1);
}
@else {
  @return $em-vals;
}

} // Depends on `scut-strip-unit`.

$scut-rem-base: 16 !default;

@function scut-rem (

$pixels

) {

$rem-vals: ();
@each $val in $pixels {
  $val-in-rems: scut-strip-unit($val) / $scut-rem-base * 1rem;
  $rem-vals: append($rem-vals, $val-in-rems);
}

@if length($rem-vals) == 1 {
  // return a single value instead of a list,
  // so it can be used in calculations
  @return nth($rem-vals, 1);
}
@else {
  @return $rem-vals;
}

} @mixin scut-border (

$style,
$sides: n y

) {

@if length($sides) == 2 {
  @if nth($sides, 1) != n {
    border-top: $style;
    border-bottom: $style;
  }
  @if nth($sides, 2) != n {
    border-left: $style;
    border-right: $style;
  }
}

@else if length($sides) == 4 {
  @if nth($sides, 1) != n {
    border-top: $style;
  }
  @if nth($sides, 2) != n {
    border-right: $style;
  }
  @if nth($sides, 3) != n {
    border-bottom: $style;
  }
  @if nth($sides, 4) != n {
    border-left: $style;
  }
}

@else {
  @warn "Scut-border requires a $sides argument of 2 or 4 values."
}

} @mixin scut-circle (

$size,
$color: inherit

) {

border-radius: 50%;
display: inline-block;

@if $color == inherit {
  // If user wants to inherit the color,
  // take advantage of the fact that border
  // color defaults to the text color of the element.
  border-width: $size / 2;
  border-style: solid;
  height: 0;
  width: 0;
}
@else {
  // Otherwise, just use background-color.
  background-color: $color;
  height: $size;
  width: $size;
}

} @mixin scut-color-swap (

$off,
$on,
$duration: 0,
$bg: false

) {

$transition-properties: null;
$off-is-list: type-of($off) == list;
$on-is-list: type-of($on) == list;

// If $off IS a list,
// assign color and background-color.
@if $off-is-list {
  color: nth($off, 1);
  background-color: nth($off, 2);
  $transition-properties: background-color, color;
}

// If $off IS NOT a list and $bg is TRUE,
// assign background-color.
@else if $bg and not($off-is-list) {
  background-color: $off;
  $transition-properties: background-color;
}

// If $off IS NOT a list and $bg is FALSE,
// assign color.
@else {
  color: $off;
  $transition-properties: color;
}

// Only set-up transition if $duration != 0.
@if $duration != 0 {
  transition-property: $transition-properties;
  transition-duration: $duration;
}

&:hover,
&:focus {

  // $on is treated the same as $off, above.
  @if $on-is-list {
    color: nth($on, 1);
    background-color: nth($on, 2);
  }

  @else if $bg and not($on-is-list) {
    background-color: $on;
  }

  @else {
    color: $on;
  }
}

} @mixin scut-hd-bp (

$ratio: 1.3

) {

@media (-o-min-device-pixel-ratio: ($ratio / 1)),
       (-webkit-min-device-pixel-ratio: $ratio),
       (min-resolution: (round(96 * $ratio) * 1dpi)) {
  @content;
}

}

@mixin scut-hide-visually {

border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

}

%scut-hide-visually {

@include scut-hide-visually;

} @mixin scut-image-replace {

text-indent: 102%;
white-space: nowrap;
overflow: hidden;
padding: 0;

}

%scut-image-replace {

@include scut-image-replace;

}

// Depends on scut-rem and scut-strip-unit

@mixin scut-rem-fallback (

$pixels,
$property: font-size

) {

$px-vals: null;
@each $val in $pixels {
  $val-in-px: scut-strip-unit($val) * 1px;
  $px-vals: append($px-vals, $val-in-px);
}
$rem-vals: scut-rem($pixels);

#{$property}: $px-vals;
#{$property}: $rem-vals;

} @mixin scut-reset-border-box {

// Make everything a border-box, because why not?
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

}

@mixin scut-reset-antialias {

// Antialias!
body {
  -webkit-font-smoothing: antialiased;
}
*, *:before, *:after {
  -webkit-font-smoothing: inherit;
}

}

@mixin scut-reset-semanticize {

// Make headers and <b> semantic, not presentational.
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}
b {
  font-weight: normal;
}

}

@mixin scut-reset-pointer {

// Clickable form elements should have a pointer.
label,
select,
option,
button {
  cursor: pointer;
}

}

@mixin scut-reset-form {

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}

}

@mixin scut-reset-button {

// Reset default button styles, which are never used.
button,
[type="button"],
[type="submit"],
[type="reset"] {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  width: auto;
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  &::-moz-focus-inner {
    padding: 0;
    border: 0;
  }
}

}

@mixin scut-reset-paragraph {

// Some paragraph margins just get in the way.
p:first-of-type {
  margin-top: 0;
}
p:last-of-type {
  margin-bottom: 0;
}

}

@mixin scut-reset-media {

// You want these elements fluid, probably.
img,
video {
  max-width: 100%;
  height: auto;
}

}

@mixin scut-reset-figure {

// Remove default margins.
figure {
  margin: 0;
}

}

// Call them all, minus exclusions! @mixin scut-reset ($exclude: false) {

@if not(index($exclude, border-box)) {
  @include scut-reset-border-box;
}
@if not(index($exclude, antialias)) {
  @include scut-reset-antialias;
}
@if not(index($exclude, semanticize)) {
  @include scut-reset-semanticize;
}
@if not(index($exclude, pointer)) {
  @include scut-reset-pointer;
}
@if not(index($exclude, form)) {
  @include scut-reset-form;
}
@if not(index($exclude, button)) {
  @include scut-reset-button;
}
@if not(index($exclude, paragraph)) {
  @include scut-reset-paragraph;
}
@if not(index($exclude, media)) {
  @include scut-reset-media;
}
@if not(index($exclude, figure)) {
  @include scut-reset-figure;
}

}

@mixin scut-selected (

$active: false

) {

@if $active {
  &:hover,
  &:focus,
  &:active {
    @content;
  }
}
@else {
  &:hover,
  &:focus {
    @content;
  }
}

} @mixin scut-triangle (

$direction: right,
$size: 0.75em,
$color: inherit

) {

display: inline-block;
height: 0;
width: 0;
// For improved appearance in some Webkit browsers
-webkit-transform: rotate(360deg);

// Set up some variables
$width: null;
$height: null;
$border-widths: null;

@if type-of($size) == list {
  $width: nth($size, 1);
  $height: nth($size, 2);
}
@else {
  $width: $size;
  $height: $size;
}

@if ($direction == up) or ($direction == down) {
  // For up and down, width gets two borders but height only one,
  // so divide second border-width value by 2
  $border-widths: $height ($width / 2);
}
@else if ($direction == right) or ($direction == left) {
  // For right and left, height gets two borders but width only one,
  // so divide first border-width value by 2
  $border-widths: ($height / 2) $width;
}
@else {
  // For right triangles (the rest), both sides get two borders,
  // so divide both by 2
  $border-widths: ($height / 2) ($width / 2);
}

border-width: $border-widths;
border-style: solid;

// STANDARD TRIANGLES

@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
  border-color: transparent;
  @if $direction == up {
    border-bottom-color: $color;
    border-top-width: 0;
  }
  @else if $direction == right {
    border-left-color: $color;
    border-right-width: 0;
  }
  @else if $direction == down {
    border-top-color: $color;
    border-bottom-width: 0;
  }
  @else if $direction == left {
    border-right-color: $color;
    border-left-width: 0;
  }
}

// CORNER TRIANGLES

@else if ($direction == top-right) or ($direction == top-left) {
  border-top-color: $color;
  border-bottom-color: transparent;
  @if $direction == top-right {
    border-left-color: transparent;
    border-right-color: $color;
  }
  @else if $direction == top-left {
    border-left-color: $color;
    border-right-color: transparent;
  }
}

@else if ($direction == bottom-right) or ($direction == bottom-left) {
  border-top-color: transparent;
  border-bottom-color: $color;
  @if $direction == bottom-right {
    border-left-color: transparent;
    border-right-color: $color;
  }
  @else if $direction == bottom-left {
    border-left-color: $color;
    border-right-color: transparent;
  }
}

}

%scut-triangle {

@include scut-triangle;

} @mixin scut-center-absolutely (

$dimensions

) {

$width: nth($dimensions, 1);
$height: nth($dimensions, 2);

position: absolute;

@if $width != n {
  width: $width;
  left: 50%;
  margin-left: (-$width / 2);
}

@if $height != n {
  height: $height;
  top: 50%;
  margin-top: (-$height / 2);
}

} @mixin scut-center-block (

$max-width: false

) {

margin-left: auto;
margin-right: auto;
@if $max-width {
  max-width: $max-width;
}

}

%scut-center-block {

@include scut-center-block;

}

@mixin scut-center-transform (

$axis: false // or x or y

) {

position: absolute;

@if $axis != x {
  top: 50%;
  margin-top: auto;
  margin-bottom: auto;
}

@if $axis != y {
  left: 50%;
  margin-left: auto;
  margin-right: auto;
}

$translate-val: null;

@if not($axis) {
  $translate-val: translate(-50%, -50%);
}
@else if $axis != x {
  $translate-val: translateY(-50%);
}
@else if $axis != y {
  $translate-val: translateX(-50%);
}

-webkit-transform: $translate-val;
-ms-transform: $translate-val;
transform: $translate-val;

}

%scut-center-transform {

@include scut-center-transform;

}

%scut-center-transform-x {

@include scut-center-transform(x);

}

%scut-center-transform-y {

@include scut-center-transform(y);

}

@mixin scut-fill (

$width-height: false

) {

position: absolute;
left: 0;
top: 0;
@if $width-height {
  width: 100%;
  height: 100%;
}
@else {
  right: 0;
  bottom: 0;
}

}

%scut-fill {

@include scut-fill;

} @mixin scut-list-custom (

$content: "\2022",
$marker-width: 0.75em,
$pad: 0,
$no-margin: false

) {

$content-val: null;
$counter: index($content, count);
@if $counter {
  @if length($content) == 3 {
    $content-val: counter(scutlistcounter, nth($content, 3))nth($content,2);
  }
  @else if length($content) == 2 {
    $content-val: counter(scutlistcounter)nth($content,2);
  }
  @else {
    $content-val: counter(scutlistcounter);
  }
}
@else {
  $content-val: $content;
}

padding-left: $marker-width + $pad;
list-style-type: none;

@if $no-margin {
  margin-top: 0;
  margin-bottom: 0;
}

& > li {
  position: relative;
  @if $counter {
    counter-increment: scutlistcounter;
  }
  &:before {
    content: $content-val;
    display: block;
    position: absolute;
    top: 0;
    left: -$marker-width;
    width: $marker-width;
    @content;
  }
}

} // Depends on `list-floated`, which depends in turn on `list-unstyled` and `clearfix`.

@mixin scut-list-divided (

$divider: "|",
$space: 0.5em,
$dir: left,
$height: false,
$no-margin: true

) {

@include scut-list-floated($dir: $dir, $no-margin: $no-margin);

$pseudo: if($dir == left, 'before', 'after');

// If an explicit height is passed,
// things are different: All <li>s
// need the pseudo-element (to force height),
// but the first's must be hidden.

@if $height {
  & > li {
    height: $height;
  }
  & > li:#{$pseudo} {
    height: $height;
    content: $divider;
    display: inline-block;
    vertical-align: middle;
    @content;
  }
  & > li:first-child:#{$pseudo} {
    width: 0;
    overflow: hidden;
  }
}

& > li + li:#{$pseudo} {
  @if not($height) {
    content: $divider;
    display: inline-block;
    @content;
  }
  margin-left: $space;
  margin-right: $space;
}

}

%scut-list-bar {

@include scut-list-divided;

}

%scut-list-breadcrumb {

@include scut-list-divided("/");

} // Depends on `list-unstyled`.

@mixin scut-list-inline (

$space: false,
$no-margin: true

) {

@include scut-list-unstyled($no-margin);

& > li {
  display: inline-block;
}

@if $space {
  & > li + li {
    margin-left: $space;
  }
}

}

%scut-list-inline {

@include scut-list-inline;

} // Depends on `list-unstyled`.

@mixin scut-list-punctuated (

$divider: ", ",
$display: inline,
$no-margin: true

) {

@include scut-list-unstyled($no-margin);

& > li {
  display: $display;
  &:not(:last-child):after {
    content: $divider;
  }
}

}

%scut-list-comma {

@include scut-list-punctuated;

} @mixin scut-margin (

$margin

) {

@if length($margin) == 1 and $margin != n {
  margin-top: $margin;
  margin-right: $margin;
  margin-bottom: $margin;
  margin-left: $margin;
}

@if length($margin) == 2 {
  $margin-y: nth($margin, 1);
  $margin-x: nth($margin, 2);
  @if $margin-y != n {
    margin-top: $margin-y;
    margin-bottom: $margin-y;
  }
  @if $margin-x != n {
    margin-left: $margin-x;
    margin-right: $margin-x;
  }
}

@if length($margin) == 3 {
  $margin-y-top: nth($margin, 1);
  $margin-x: nth($margin, 2);
  $margin-y-bottom: nth($margin, 3);
  @if $margin-y-top != n {
    margin-top: $margin-y-top;
  }
  @if $margin-x != n {
    margin-right: $margin-x;
    margin-left: $margin-x;
  }
  @if $margin-y-bottom != n {
    margin-bottom: $margin-y-bottom;
  }
}

@if length($margin) == 4 {
  $margin-top: nth($margin, 1);
  $margin-right: nth($margin, 2);
  $margin-bottom: nth($margin, 3);
  $margin-left: nth($margin, 4);
  @if $margin-top != n {
    margin-top: $margin-top;
  }
  @if $margin-right != n {
    margin-right: $margin-right;
  }
  @if $margin-bottom != n {
    margin-bottom: $margin-bottom;
  }
  @if $margin-left != n {
    margin-left: $margin-left;
  }
}

} @mixin scut-padding (

$padding

) {

@if length($padding) == 1 and $padding != n {
  padding-top: $padding;
  padding-right: $padding;
  padding-bottom: $padding;
  padding-left: $padding;
}

@if length($padding) == 2 {
  $padding-y: nth($padding, 1);
  $padding-x: nth($padding, 2);
  @if $padding-y != n {
    padding-top: $padding-y;
    padding-bottom: $padding-y;
  }
  @if $padding-x != n {
    padding-left: $padding-x;
    padding-right: $padding-x;
  }
}

@if length($padding) == 3 {
  $padding-y-top: nth($padding, 1);
  $padding-x: nth($padding, 2);
  $padding-y-bottom: nth($padding, 3);
  @if $padding-y-top != n {
    padding-top: $padding-y-top;
  }
  @if $padding-x != n {
    padding-right: $padding-x;
    padding-left: $padding-x;
  }
  @if $padding-y-bottom != n {
    padding-bottom: $padding-y-bottom;
  }
}

@if length($padding) == 4 {
  $padding-top: nth($padding, 1);
  $padding-right: nth($padding, 2);
  $padding-bottom: nth($padding, 3);
  $padding-left: nth($padding, 4);
  @if $padding-top != n {
    padding-top: $padding-top;
  }
  @if $padding-right != n {
    padding-right: $padding-right;
  }
  @if $padding-bottom != n {
    padding-bottom: $padding-bottom;
  }
  @if $padding-left != n {
    padding-left: $padding-left;
  }
}

} // Depends on `positioning-coordinates`.

@mixin scut-absolute (

$coordinates: 0 n n 0

) {

position: absolute;
@include scut-coords($coordinates);

}

%scut-absolute {

@include scut-absolute;

} // Depends on `positioning-coordinates`.

@mixin scut-fixed (

$coordinates: 0 n n 0

) {

position: fixed;
@include scut-coords($coordinates);

}

%scut-fixed {

@include scut-fixed;

} // Depends on `positioning-coordinates`.

@mixin scut-relative (

$coordinates: n n n n

) {

position: relative;
@include scut-coords($coordinates);

} @mixin scut-ratio-box (

$ratio: 1/1

) {

overflow: hidden;
position: relative;

// The container's height, as a percentage of the
// container's width, is set by assigning
// padding-top to a pseudo-element.
&:before {
  content: "";
  display: block;
  height: 0;
  padding-top: (1 / $ratio) * 100%;
}

}

%scut-ratio-box {

@include scut-ratio-box;

} @mixin scut-size(

$size

) {

@if length($size) == 1 {
  width:  $size;
  height: $size;
}
@else if length($size) == 2 {
  width:  nth($size, 1);
  height: nth($size, 2);
}

} @mixin scut-sticky-footer-fixed (

$height,
$wrapper: ".wrapper",
$footer: ".scut-sticky"

) {

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#{$wrapper} {
  min-height: 100%;
  margin-bottom: -$height;
  &:after {
    content: "";
    display: block;
  }
}

#{$wrapper}:after,
#{$footer} {
  height: $height;
}

}

// deprecated @mixin scut-sticky-footer (

$height,
$wrapper: ".wrapper",
$footer: ".scut-sticky"

){

@include scut-sticky-footer-fixed($height, $wrapper, $footer);

} @mixin scut-sticky-footer-fluid (

$wrapper: ".wrapper",
$footer: ".scut-sticky"

) {

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#{$wrapper} {
  display: table;
  height: 100%;
  width: 100%;
}

#{$footer} {
  display: table-row;
  height: 1px;
}

} @mixin scut-vcenter-ib (

$inner...

) {

// The inner element is vertically centered
// by middle-aligning it with an inline pseudo-element
// whose height is 100%.

&:before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  // A small negative right margin is set
  // to account for the default
  // word-spacing of inline-block.
  margin-right: -0.25em;
}

$inner: if(length($inner) == 0, ".scut-inner", $inner);
@each $cell-selector in $inner {
  $cell-selector: unquote($cell-selector);
  & > #{$cell-selector} {
    display: inline-block;
    vertical-align: middle;
  }
}

}

%scut-vcenter-ib {

@include scut-vcenter-ib;

}

@mixin scut-vcenter-lh (

$height

) {

height: $height;
line-height: $height;

} @mixin scut-vcenter-td (

$inner...

) {

display: table;

$inner: if(length($inner) == 0, ".scut-inner", $inner);
@each $cell-selector in $inner {
  $cell-selector: unquote($cell-selector);
  & > #{$cell-selector} {
    display: table-cell;
    vertical-align: middle;
  }
}

}

%scut-vcenter-td {

@include scut-vcenter-td;

}

// Depends on scut-center-transform

@mixin scut-vcenter-tt () {

@include scut-center-transform(y);

}

%scut-vcenter-tt {

@include scut-vcenter-tt;

} // space $scut-space: “0020”; // non-breaking space $scut-nbsp: “00a0”;

// quotation mark $scut-quot: “0022”; // left single curly quote $scut-lsquo: “2018”; // right single curly quote $scut-rsquo: “2019”; // left double curly quote $scut-ldquo: “201C”; // right double curly quote $scut-rdquo: “201D”; // left single angle quote (guillemet) $scut-lsaquo: “2039”; // right single angle quote (guillemet) $scut-rsaquo: “203A”; // left double angle quote (guillemet) $scut-laquo: “00ab”; // right double angle quote (guillemet) $scut-raquo: “00bb”;

// em dash (mutton) $scut-mdash: “2014”; // en dash (nut) $scut-ndash: “2013”; // hyphen $scut-hyphen: “2010”;

// ampersand $scut-amp: “0026”; // greater than $scut-gt: “003e”; // less than $scut-lt: “003c”; // times $scut-times: “00D7”; // big times $scut-bigtimes: “2715”; // checkmark $scut-checkmark: “2713”;

// section sign (double S, hurricane, sectional symbol, the legal doughnut, signum sectionis) $scut-sect: “00a7”; // paragraph symbol (pilcrow) $scut-para: “00b6”;

// middot (interpunct, interpoint) $scut-middot: “00b7”; // o-slash (slashed o) $scut-oslash: “00f8”; // bullet $scut-bull: “2022”; // white bullet $scut-whibull: “25E6”; // horizontal ellipsis $scut-hellip: “2026”; // vertical ellipsis $scut-vellip: “22EE”; // midline horizontal ellipsis $scut-midhellip: “22EF”;

// up-pointing triangle $scut-utri: “25b2”; // down-pointing triangle $scut-dtri: “25bc”; // left-pointing triangle $scut-ltri: “25c0”; // right-pointing triangle $scut-rtri: “25b6”; // up-pointing small triangle $scut-ustri: “25b4”; // down-pointing small triangle $scut-dstri: “25be”; // left-pointing small triangle $scut-lstri: “25c2”; // right-pointing small triangle $scut-rstri: “25b8”; // diamond $scut-diamond: “25c6”; // fisheye $scut-fisheye: “25c9”; // bullseye $scut-bullseye: “25ce”; // circle $scut-circle: “25cf”; // white circle $scut-whitecircle: “25cb”; // square $scut-square: “25a0”; // white square $scut-whitesquare: “25a1”; // small square $scut-ssquare: “25aa”; // small white square $scut-swhitesquare: “25ab”;

// general currency $scut-currency: “00a4”; // cent $scut-cent: “00a2”; // dollar $scut-dollar: “0024”; // pound $scut-pound: “00a3”; // euro $scut-euro: “20ac”; // yen $scut-yen: “00a5”; // rupee $scut-rupee: “20B9”; @function main-src($formats, $file-path, $font-family) {

// Return the list of `src` values, in order, that
// a good `@font-face` will need, including only
// those formats specified in the list `$formats`.
$result: ();
@if index($formats, eot) {
  $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
  $result: append($result, $eot-val, comma);
}
@if index($formats, woff2) {
  $woff2-val: url('#{$file-path}.woff2') format('woff2');
  $result: append($result, $woff2-val, comma);
}
@if index($formats, woff) {
  $woff-val: url('#{$file-path}.woff') format('woff');
  $result: append($result, $woff-val, comma);
}
@if index($formats, ttf) {
  $ttf-val: url('#{$file-path}.ttf') format('truetype');
  $result: append($result, $ttf-val, comma);
}
@if index($formats, svg) {
  $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
  $result: append($result, $svg-val, comma);
}
@return $result;

}

@mixin scut-font-face (

$font-family,
$file-path,
$weight: normal,
$style: normal,
$formats: eot woff2 woff ttf svg

) {

@if index('italic' 'oblique', $weight) {
  $style: $weight;
  $weight: normal;
}

@font-face {
  font-family: $font-family;
  font-weight: $weight;
  font-style: $style;

  @if index($formats, eot) {
    src: url('#{$file-path}.eot');
  }
  src: main-src($formats, $file-path, $font-family);
}

}

@mixin scut-hanging-indent (

$indent: 1em

) {

// padding-left creates the indent,
// while text-indent pulls the first line
// back to the edge.

padding-left: $indent;
text-indent: -$indent;

}

%scut-hanging-indent {

@include scut-hanging-indent;

} @mixin scut-indented-ps (

$indent: 1.5em,
$no-first-indent: true

) {

p {
  margin: 0;
  text-indent: $indent;
}

@if $no-first-indent {
  p:first-of-type {
    text-indent: 0;
  }
}

}

%scut-indented-ps {

@include scut-indented-ps;

} @mixin scut-key-val (

$divider: ":",
$pad: 0.25em,
$indent: 1em,
$spacing: 0,
$pad-left: 0

) {

& > dt {
  clear: both;
  float: left;
  &:after {
    content: $divider;
    margin-right: $pad;
    @if $pad-left != 0 {
      margin-left: $pad-left;
    }
  }
}

& > dd {
  margin-left: $indent;
  @if $spacing != 0 {
    margin-bottom: $spacing;
  }
}

}

%scut-key-val {

@include scut-key-val;

} @mixin scut-link-bb (

$color: inherit,
$style: solid,
$width: 1px

) {

text-decoration: none;

border-bottom-width: $width;
border-bottom-style: $style;
@if $color != inherit {
  border-bottom-color: $color;
}

}

%scut-link-bb {

@include scut-link-bb;

} // SCUT LINK UNSTYLED // davidtheclark.github.io/scut/#link-unstyled

@mixin scut-link-unstyled() {

text-decoration: none;
color: inherit;

}

%scut-link-unstyled {

@include scut-link-unstyled();

}

@mixin scut-reverse-italics (

$elements: null

) {

$element-list: em, cite, i;
font-style: italic;
#{join($element-list, $elements)} {
  font-style: normal;
}

}

%scut-reverse-italics {

@include scut-reverse-italics;

}

@mixin scut-side-lined (

$height: 1px,
$space: 0.5em,
$color: inherit,
$style: solid,
$v-adjust: false,
$double: false

) {

display: block;
overflow: hidden;
text-align: center;

&:before,
&:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  width: 50%;

  border-top-style: $style;
  border-top-width: $height;

  @if $color != inherit {
    border-top-color: $color;
  }

  @if $v-adjust != false {
    bottom: $v-adjust;
  }

  @if $double != false {
    height: $double;
    border-bottom-style: $style;
    border-bottom-width: $height;
    @if $color != inherit {
      border-bottom-color: $color;
    }
  }
}

&:before {
  right: $space;
  margin-left: -50%;
}
&:after {
  left: $space;
  margin-right: -50%;
}

}

%scut-side-lined {

@include scut-side-lined;

} @mixin scut-truncate {

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

%scut-truncate {

@include scut-truncate;

}