@mixin mobile() { ... }

@mixin phablet() { ... }

@mixin tablet-and-below() { ... }

@mixin tablet() { ... }

@mixin desktop-and-below() { ... }

@mixin desktop() { ... }

@mixin desktop-xl() { ... }

@mixin button-small() { ... }

@mixin button-medium() { ... }

@mixin button-large() { ... }

@mixin button-extra-large() { ... }

@mixin button-disabled() { ... }

@mixin button() { ... }

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

@mixin button-block() { ... }

@mixin button-icon() { ... }

@mixin button-icon-left() { ... }

@mixin spot-image($image: null, $size: 8rem) { ... }

@mixin theme($property: null, $default: null, $exception: null) { ... }

@mixin theme-body($property: null, $default: null, $exception: null) { ... }

@mixin theme-content($default: null, $exception: null) { ... }

@function set-themified-property($colors, $default, $exception) { ... }

@function rgba-to-rgb($base-color, $background: #fff) { ... }

@function color($base-color, $tint: 0, $transparent: false, $colors$: $colors) { ... }

@function tint($base-color, $tint, $colors$: $colors) { ... }

@function shade($base-color, $tint, $colors$: $colors) { ... }

//
/// The theme-body() function adds the color class to the first element of the
/// selector:
///
/// <code>
///   .cs--blue.original-selector .child ... { ... }

$colors: (
  // 6.x colors
  'gray': #001823,
  'gray-medium': #687278,
  'gray-light': #e6e8ea,
  'gray-ultra-light': #f0f1f2,
  'blue': #005ba9,
  'blue-light': #ccdeee,
  'yellow': #ffdb5a,
  'yellow-pastel': #ffec93,
  'yellow-light': #fff8d4,
  'cyan': #009de0,
  'cyan-pastel': #7ed9ff,
  'cyan-light': #e6f8ff,
  'cyan-hover': #1abcff,
  'red': #ea0d33,
  'red-pastel': #ff8a9d,
  'red-light': #ffe8ec,
  'orange': #e06c00,
  'orange-pastel': #ffb673,
  'orange-light': #fff2e5,
  'green': #2c8726,
  'green-pastel': #8ee088,
  'green-light': #e1fde1,
  'white': #fff,
) !default;

$tints: (
  1: 10%,
  2: 25%,
  3: 50%,
  -1: .75,
  -2: .6,
  -3: .5,
  -4: .25,
  -5: .1,
  -6: .06,
  -7: .02,
) !default;

@mixin extra-wide() { ... }

@mixin row() { ... }

%container { ... }

%content-container { ... }

$styleguide-dir: '../styleguide' !default;

$uuid: unique-id();

$border-radius: (
  'radius-0': 0,
  'radius-1': .2rem,
  'radius-2': .3rem,
  'radius-3': 1rem,
  'radius-4': 1.2rem,
  'radius-5': 1.6rem,
) !default;

$z-layers: (
  'default': 1,
  'skiplink': 5,
  'language-switcher': 6,
  'boxes': (
    'spotimage': 1
  ),
  'menu': (
    'overlay': 4,
    'base': 4
  ),
  'timeline': (
    'dots': 1,
    'video': (
      'background': 1,
      'dots': 2,
      'player': 2
    )
  ),
  'hero': (
    'base': 1,
    'caption': 3,
    'accolade': 2,
    'overlay': -1
  ),
  'teaser': (
    'overlay-link': 3,
    'content-link': 4,
    'label': 1
  ),
  'modal': (
    'base': 6, // creates new stacking context
    'overlay': -1,
    'content': 1,
    'actions': 3, // iOS fix
    'inner': 3
  )
) !default;

$bp-mobile: 320px !default;

$bp-phablet: 576px !default;

$bp-tablet: 768px !default;

$bp-desktop: 960px !default;

$bp-desktop-xl: 1680px !default;

$container-padding: 20px !default;

$bp-container: 1680px !default;

$six-of-bp-container: 32rem !default;

$grid-columns: 12 !default;

$gutter-width: 30px !default;

$default-paragraph-margin: 1.6rem !default;

$default-font-family: 'Fira Sans', sans-serif !default;

$default-font-weight: 400 !default;

$default-font-size: 20px !default;

$default-line-height: 1.78 !default;

$themes: (
  'blue': (
    // Required colors!
    'color-zero': color('gray'),
    'color-none': color('white'),
    'color-primary': color('blue'),
    'color-primary-light': color('blue-light'),
    'color-secondary': color('yellow'),
    'color-secondary-pastel': color('yellow-pastel'),
    'color-secondary-light': color('yellow-light'),
    'color-tertiary': color('cyan'),
    'color-tertiary-pastel': color('cyan-pastel'),
    'color-tertiary-light': color('cyan-light'),
    'color-quaternary': color('cyan-hover'),
    'color-info': color('cyan'),
    'color-info-pastel': color('cyan-pastel'),
    'color-info-light': color('cyan-light'),
    'color-success': color('green'),
    'color-success-pastel': color('green-pastel'),
    'color-success-light': color('green-light'),
    'color-warning': color('orange'),
    'color-warning-pastel': color('orange-pastel'),
    'color-warning-light': color('orange-light'),
    'color-error': color('red'),
    'color-error-pastel': color('red-pastel'),
    'color-error-light': color('red-light'),

    'default-text-color': color('gray'),

    // Exceptions to colors go here...
    // These should be as limited as possible though!
    'heading-inverse-primary-background-color': color('blue'),
    'heading-2-color': color('blue'),

    'link-color': color('blue'),
    'link-underline-color': color('blue'),
    'link-hover-background': color('blue-light'),
    'link-hover-color': color('blue'),
    'link-underlined-hover-color': color('blue'),

    'focus-outline': color('gray'),

    'modal-overlay-background-color': color('cyan-light'),

    'button-primary-background': color('gray'),
    'button-primary-color': color('white'),
    'button-primary-hover-background': color('gray-medium'),
    'button-primary-hover-color': color('white'),
    'button-primary-active-background': color('gray-medium'),
    'button-primary-active-color': color('white'),

    'button-secondary-background': color('cyan-pastel'),
    'button-secondary-color': color('gray'),
    'button-secondary-hover-background': color('cyan-hover'),
    'button-secondary-hover-color': color('gray'),
    'button-secondary-active-background': color('cyan-hover'),
    'button-secondary-active-color': color('gray'),

    'tag-close-button-background-hover': color('gray-light'),

    'help-text-color': color('gray-medium'),
  )
) !default;

@mixin field-base() { ... }

@mixin choices-field-base() { ... }

@mixin abstract-shadow($v-position, $h-position, $background-color, $offset, $width, $height) { ... }

@mixin accolade($v-position, $h-position, $width, $height, $color, $background-color) { ... }

@mixin read-more-icon-link() { ... }

@mixin clearfix() { ... }

@mixin element-states($state, $state-hover, $property) { ... }

@mixin no-link-style() { ... }

@mixin small-text() { ... }

@mixin medium-text() { ... }

@mixin large-text() { ... }

@mixin extra-large-text() { ... }

@mixin normal-text() { ... }

@mixin semi-bold-text() { ... }

@mixin bold-text() { ... }

@mixin extra-bold-text() { ... }

@mixin full-width() { ... }

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

@mixin optional-label() { ... }

@mixin label() { ... }

@mixin link-background($underline, $hover: null, $underline-exception: null, $hover-exception: null) { ... }

@mixin reset-link-background() { ... }

@mixin link-underlined($active-selector: null) { ... }

@mixin table-backgrounds($child-selector: null) { ... }

@function str-replace($string, $search, $replace: '') { ... }

@function border-radius($name, $border-radius: $border-radius) { ... }

@function str-split($string, $separator) { ... }

@function number($value) { ... }

@function svg-url($svg) { ... }

@function svg-icon($icon, $fill-color, $width, $height) { ... }

@function svg-as-background($icon, $fill-color, $width, $height) { ... }

@function map-deep-get($map, $keys...) { ... }

@function z($layers) { ... }

.nowrap { ... }

.bold { ... }

.element-hidden { ... }

.element-invisible { ... }

&.standalone-link:not(.no-icon) { ... }

&[download]:not(.no-icon) { ... }

&[href^="mailto:"]:not(.no-icon) { ... }

&[href^="tel:"]:not(.no-icon) { ... }

&[href^="http://"]:not(.no-icon):not(.tag):not([href*="gent.be"]),
  &[href^="https://"]:not(.no-icon):not(.tag):not([href*="gent.be"]) { ... }

&[download] { ... }

&.standalone-link:not(.no-icon) { ... }

.text-right { ... }

.text-left { ... }

[class*="cs--"] & a { ... }

&-header { ... }

&-content { ... }

&-actions { ... }

.modal-overlay { ... }

[class*="cs--"] & a { ... }

&-slot { ... }

&-detail { ... }

a { ... }

%visually-hidden { ... }

%no-link-style { ... }

%button-alert { ... }

%button-primary { ... }

%button-alert { ... }

%button-secondary { ... }

%button-success { ... }

%a-remove-indicator { ... }

%list-no-style { ... }

$directions: top, right, bottom, left;

@mixin hide() { ... }