// do not use rem, this allow more content for the same width by
// changing font-size for breakpoints in the root element (e.g 88% for large screen)
$co-site-width: 1200px;
$co-page-container-paddings: (
  medium: 4px,
  xlarge: 40px,
);
$co-header__height: 3rem !default; // 48px
$co-brand-width: 11rem;
$co-pi-width: (
  graph: 15rem,
  ratings: 17rem,
  mini-ratings: 1rem,
);
$co-pi-height: (
  progressbar: 0.25rem,
);
$co-radius: 0.2rem;

// TODO refactor
// 24px
$co-margin: 1.5rem;
$co-margin_: (
  // 10px
  xsmall: 0.625rem,
  // 16px
  small: 1rem,
  // 24px
  medium: 1.5rem,
  // 42px
  large: 2.625rem,
  // 80px
  xlarge: 5rem
);
$co-font__size: 1rem;
$co-font__size--xsmall: 0.75rem;
$co-font__size--small: 0.875rem;
$co-font__size--large: 1.5rem;
$co-font__line-height: 1.4rem;
$co-component__height: 2.625rem;
$co-component__height--large: 3.5rem;
$co-component__spacing: 0.5rem;
$co-form__width: (
  // 160 px
  small: 10rem,
  // 208 px
  medium: 13rem,
  // 256 px
  large: 16rem,
  // 380 px
  xlarge: 23.75rem
);
$co-form__height: (
  // 24 px
  small: 1.5rem,
  // 36 px
  medium: 2.25rem,
  // 48 px
  large: 3rem
);
$co-form__spacing: (
  // 4 px
  xsmall: 0.25rem,
  // 10 px
  small: 0.625rem,
  // 15 px
  medium: 0.9375rem,
  // 25 px
  large: 1.5625rem,
  // 42px
  xlarge: 2.625rem
);
$co-grid__gutter: $co-margin;
$co-grid__gutter--small: 20px;
$co-animation__clickable-transition: background-color 0.1s ease-out,
  color 0.1s ease-out !default;
$co-animation__box-transition: box-shadow 0.15s, border-color 0.15s ease-in-out !default;
$co-animation__margin-transition: margin 0.15s, padding 0.15s ease !default;
$co-animation__width-transition: width 0.15s ease-in-out !default;
$co-animation__height-transition: height, max-height 0.15s ease-in-out !default;
$l-z-index__navbar-shadow: -1;
$l-z-index__dropdown: 1;
$l-z-index__action-bar: 1;
$l-z-index__active-tab: 2;
$l-z-index__flash-message: 2;
$l-z-index__navbar: 10;
$l-z-index__modal-overlay: 20;
$l-z-index__dropdown--first-layer: 30;
