$button-spacing: 0 1.2em;

$button-bd-radius: $border-radius-base;

$button-font-size: $font-size;

$button-bd-radius-xsmall: $border-radius-small;

$button-font-size-xsmall: $font-size-small;

$button-bd-radius-small: $border-radius-small;

$button-font-size-small: $font-size-small;

$button-bd-radius-large: $border-radius-large;

$button-font-size-large: $font-size-large;

$button-bg-default: $gray;

$button-default: $text;

$button-bg-default-hover: darken($button-bg-default, 2%);

$button-bg-yellow: $yellow-darken;

$button-yellow: $text;

$button-bg-yellow-hover: darken($button-bg-yellow, 2%);

$button-bg-primary: mix($white, $primary-color, 20%);

$button-primary: $white;

$button-bg-primary-hover: darken($button-bg-primary, 5%);

$button-bg-white: $white;

$button-white: $text;

$button-bg-white-hover: darken($button-bg-white, 5%);

@mixin button-variant($color, $background, $background-hover) { ... }

%button { ... }

%button-default { ... }

%button-blue { ... }

%button-yellow { ... }

%button-gray { ... }

%button-green { ... }

%button-orange { ... }

%button-red { ... }

%button-black { ... }

%button-white { ... }

%button-facebook { ... }

%button-pinterest { ... }

%button-youtube { ... }

%button-instagram { ... }

%button-link { ... }

%button-ghost { ... }

$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);

$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1);

$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);

$animation-curve-default: $animation-curve-fast-out-slow-in;

$input-bg: $white;

$input-color: $gray-darken-3;

$input-placeholder-color: $gray-darken-1;

$input-box-shadow-focus: $blue;

$input-border-focus: $primary-color;

$input-bg-disabled: $gray-lighten-1;

$checkbox-size: $height-small / 2;

$checkbox-bg-hover: $gray;

$checkbox-bg-unselected: $gray-lighten-2;

$checkbox-bg-select: lighten($blue, 10%);

$checkbox-bg-disabled: $gray-lighten-1;

$radio-size: $height-small / 2;

$radio-bg-hover: $gray;

$radio-bg-unselected: $gray-lighten-2;

$radio-bg-select: lighten($blue, 10%);

$radio-bg-disabled: $gray-lighten-1;

$select-indicator: url("data:image/svg+xml;

@mixin form-validation($effect) { ... }

@mixin input-control-focus() { ... }

@mixin input-placeholder($color) { ... }

%checkbox-radio { ... }

%control__indicator { ... }

%form-group { ... }

%input { ... }

%select { ... }

$images-path: "/dist/images";

@mixin image-2x() { ... }

%responsive-image { ... }

%responsive-image-force { ... }

$font-family-system: Arial, Helvetica, sans-serif;

$font-family: "Roboto", $font-family-system;

$font-family-heading: "Montserrat", $font-family;

$font-family-serif: Georgia, "Times New Roman", Times, serif;

$font-family-monospace: "Fira Code", Menlo, Monaco, "Courier New", Courier, monospace;

$font-family-shelby-regular: "shelby-regular", $font-family;

$font-family-shelby-bold: "shelby-bold", $font-family;

$font-size-base-px: 12px;

$font-size-small-px: 10px;

$font-size-large-px: 14px;

$font-size: 1rem;

$font-size-xsmall: 0.7143rem;

$font-size-small: 0.8571rem;

$font-size-large: 1.143rem;

$font-size-xlarge: 1.286rem;

$letter-spacing: 0.02rem;

$font-weight-light: 300;

$font-weight-normal: 400;

$font-weight-medium: 500;

$font-weight-bold: 700;

$line-height-small: 1;

$line-height-base: 1.3;

$line-height-large: 1.8;

$font-size-h1: $font-size-base-px * 2;

$font-size-h2: $font-size-base-px * 1.65;

$font-size-h3: $font-size-base-px * 1.375;

$font-size-h4: $font-size-base-px * 1.25;

$font-size-h5: $font-size-base-px * 1.15;

$font-size-h6: $font-size-base-px;

$fonts-path: "/dist/fonts";

%ellipsis { ... }

%hide-text { ... }

%optimize-font { ... }

$default-feature: min-width;

$cursor-disabled: not-allowed;

$primary-color: #ffca28;

$secondary-color: #0288d1;

$blue: $secondary-color;

$blue-lighten-1: #e5f3fa;

$blue-lighten-2: #29b6f6;

$blue-lighten-3: #039be5;

$blue-darken-1: #0277bd;

$blue-darken-2: #01579b;

$yellow: $primary-color;

$yellow-lighten: #fff9e6;

$yellow-medium-1: #ffe57f;

$yellow-medium-2: #ffd740;

$yellow-darken: #ffc107;

$gray: #bdbdbd;

$gray-lighten-1: #ebebeb;

$gray-lighten-2: #e1e1e1;

$gray-lighten-3: #ccc;

$gray-darken-1: #999;

$gray-darken-2: #757575;

$gray-darken-3: #424242;

$green-lighten: #66bb6a;

$green: #4caf50;

$green-darken: #43a047;

$orange-lighten: #ff9100;

$orange: #f57c00;

$orange-darken: #ef6c00;

$red-lighten: #ef5350;

$red: #e53935;

$red-darken: #d32f2f;

$white: #fff;

$black: #000;

$background: $white;

$link: $blue-lighten-2;

$link-hover: $blue;

$link-focus: $blue-darken-2;

$text: $gray-darken-3;

$text-2: $gray-darken-2;

$text-3: $gray-darken-1;

$success: $green;

$warning: $orange;

$info: $blue-lighten-2;

$danger: $red;

$facebook: #4568b2;

$pinterest: #bd081c;

$youtube: #cd201f;

$instagram: #e1306c;

$z-1: 1px 2px 3px 0 rgba($gray-darken-2, 0.15);

$z-2: 0 4px 7px 0 rgba($gray-darken-2, 0.15);

$z-3: 0 6px 10px 0 rgba($gray-darken-2, 0.2);

$z-4: 0px 5px 13px rgba($black, 0.3);

$spacing-xsmall: 10px;

$spacing-small: 15px;

$spacing: 20px;

$spacing-medium: 30px;

$spacing-large: 40px;

$spacing-xlarge: 60px;

$height-xsmall: 20px;

$height-small: 30px;

$height-base: 40px;

$height-large: 60px;

$height-xlarge: 80px;

$border-radius-small: 2px;

$border-radius-base: 4px;

$border-radius-large: 6px;

$border-radius-xlarge: 8px;

$border-color: $gray-lighten-3;

$border: 1px solid $border-color;

$border-color-lighten: $gray-lighten-1;

$border-lighten: 1px solid $border-color-lighten;

$enable-flex: true;

$max-width-container: 64em;

$array-directions: "", "top", "right", "bottom", "left";

$array-spacings: (xsmall: $spacing-xsmall, small: $spacing-small, base: $spacing, large: $spacing-large, xlarge: $spacing-xlarge);

@function to-em($px) { ... }

@function calc-percent($target-px, $container-px) { ... }

@function to-rem($px) { ... }

@function remove-unitless($unit) { ... }

@mixin arrow($size, $direction) { ... }

@mixin click-feedback($effect) { ... }

@mixin hover() { ... }

@mixin focus() { ... }

@mixin hover-focus() { ... }

@mixin focus-active() { ... }

@mixin hover-focus-active() { ... }

@mixin plain-hover-focus() { ... }

@mixin media($query, $feature, $value) { ... }

@mixin make-spacings($prefix, $is-important) { ... }

@mixin tab-focus() { ... }

%visually-hidden { ... }

%focusable { ... }

%focusable-inline { ... }

%accessibility-aid { ... }

%alert { ... }

%clearfix { ... }

%loading { ... }

%responsive-video { ... }