/**
 * CSS properties
 *
 Some values have to be changed in the _variables.scss file.
 Use CMD + click on those values.

 It's recommended to disable unused properties as these get,
 in contrary to SASS variables, compiled in the CSS file.
 */
/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
/**
 * Colums
 */
:root {
  --row-width: 90rem;
  --cols-xsmall: 8;
  --cols: 24;
  --gutter: 22px;
  --wrapper-xsmall: 20px;
  --wrapper: 70px;
}

/**
 * Colors
 */
:root {
  --primary-color: #4891CE;
  --primary-light-color: #EDF4FA;
  --secondary-color: #FEBE10;
  --body-background: #FFFFFF;
  --text-color: var(--black);
  --anchor-color: var(--primary-color);
  --hover-color: var(--primary-light-color);
  --accent-color: var(--primary-color);
  --white: #FFFFFF;
  --black: #000000;
  --selection-color: var(--white);
  --selection-background-color: var(--primary-color);
  --primary-filter: invert(15%) sepia(34%) saturate(5867%) hue-rotate(224deg) brightness(90%) contrast(88%);
  --white-filter: invert(100%) sepia(91%) saturate(38%) hue-rotate(254deg) brightness(110%) contrast(110%);
}

/**
 * Spacings
 */
:root {
  --component-margin-bottom: 100px;
}
@media (min-width: 992px) {
  :root {
    --component-margin-bottom: 150px;
  }
}

/**
 * Text
 */
:root {
  --font-size-body: 1rem;
  --font-size-xxsmall: 0.75rem;
  --font-size-xsmall: 0.875rem;
  --font-size-small: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.625rem;
  --letter-spacing-body: 0;
  --body-font-family: Helvetica Neue, sans-serif;
  --line-height: 1.75;
  --header-font-family: Helvetica Neue, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 800;
  --header-font-weight: 400;
}

/**
 * Form
 */
:root {
  --font-size-label: var(--font-size-large);
  --font-weight-label: var(--font-weight-normal);
  --form-item-margin: 30px;
  --form-label-color: var(--primary-color);
  --form-label-color-focus: var(--black);
}

/**
 * Animation
 */
:root {
  --transition-effect: ease-out;
  --transition-duration: .3s;
  --transition: var(--transition-effect) var(--transition-duration) all;
}

/**
 * Navigation
 */
:root {
  --dropdown-menu-min-width: 145px;
  --dropdown-menu-padding: 12px 15px;
}

/**
 * Buttons
 */
:root {
  --button-font-size: 1.125rem;
  --button-border-radius: 50px;
  --button-font-family: var(--header-font-family);
  --button--default-bg-color: var(--button--primary-bg-color);
  --button--default-color: var(--button--primary-color);
  --button--default-hover-bg-color: var(--button--primary-hover-bg-color);
  --button--default-hover-color: var(--button--primary-hover-color);
  --button--default-hover-thickness: 1px;
  --button--default-border-color: var(--button--primary-border-color);
  --button--default-hover-border: var(--button--primary-hover-border);
  --button--default-link-hover-color: var(--primary-color);
  --button--primary-bg-color: var(--primary-color);
  --button--primary-color: var(--white);
  --button--primary-border-color: var(--button--primary-bg-color);
  --button--primary-hover-bg-color: var(--primary-light-color);
  --button--primary-hover-color: var(--primary-color);
  --button--primary-hover-border: 1px solid var(--primary-color);
}

/**
 * Styling
 */
:root {
  --border-radius: 8px;
  --image-border-radius: --border-radius;
}