@import "../properties.css";
@import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Noto+Sans:400,700|Roboto+Mono);

.wrap { color: var(--color-default); font-size: 16px; margin: 0; }
.wrap a { color: var(--color-info); text-decoration: underline; }
.wrap a:hover { color: var(--color-accent); }
a:focus { text-decoration: none }
.center { text-align: center; }
.small { font-size: 12px; font-family: var(--font-family-noto-sans); }
.bold { font-weight: bold; }
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* colors */
.color-primary { color: var(--color-primary); }
.color-secondary-100 { color: var(--color-secondary-100); }
.color-secondary-200 { color: var(--color-secondary-200); }
.color-accent { color: var(--color-accent); }
.color-default { color: var(--color-default); }
.color-default { color: var(--color-default); }
.color-disabled { color: var(--color-disabled); }
.color-warning { color: var(--color-warning); }
.color-danger { color: var(--color-danger); }
.color-success { color: var(--color-success); }
.color-info { color: var(--color-info); }
.color-white { color: var(--color-white); }
.color-grey-100 { color: var(--color-grey-100); }
.color-grey-200 { color: var(--color-grey-200); }
.color-grey-300 { color: var(--color-grey-300); }
.color-grey-400 { color: var(--color-grey-400); }
.color-grey-500 { color: var(--color-grey-500); }
.color-grey-600 { color: var(--color-grey-600); }
.color-grey-700 { color: var(--color-grey-700); }
.color-grey-800 { color: var(--color-grey-800); }
.color-black { color: var(--color-black); }

/* weight */
.weight-200 { font-weight: 200; }
.weight-400 { font-weight: 400; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }

/* text transforms */
.case-upper { text-transform: uppercase !important; }
.case-sentence { text-transform: capitalize !important; }
.case-default { text-transform: initial !important; }

/* text */
.type-text { font-family: var(--typography-text-font-family); text-transform: var(--typography-text-font-case); }
.size-xs.type-text { font-size: var(--typography-text-size-xs); }
.size-s.type-text { font-size: var(--typography-text-size-s); }
.size-m.type-text { font-size: var(--typography-text-size-m); }
.size-l.type-text { font-size: var(--typography-text-size-l); }
.size-xl.type-text { font-size: var(--typography-text-size-xl); }

/* title */
.type-title { text-transform: var(--typography-title-font-case); font-family: var(--typography-title-font-family); }
.size-s.type-title { font-size: var(--typography-title-size-s); }
.size-m.type-title { font-size: var(--typography-title-size-m); }
.size-l.type-title { font-size: var(--typography-title-size-l); }
.size-xl.type-title { font-size: var(--typography-title-size-xl); }

/* header */
.type-header { text-transform: var(--typography-header-font-case); font-family: var(--typography-header-font-family); }
.size-sm.type-header { font-size: var(--typography-header-size-sm); }
.size-xs.type-header { font-size: var(--typography-header-size-xs); }
.size-s.type-header { font-size: var(--typography-header-size-s); }
.size-m.type-header { font-size: var(--typography-header-size-m); }
.size-l.type-header { font-size: var(--typography-header-size-l); }
.size-xl.type-header { font-size: var(--typography-header-size-xl); }

/* subheader */
.type-subheader { text-transform: var(--typography-subheader-font-case); font-family: var(--typography-subheader-font-family); }
.size-s.type-subheader { font-size: var(--typography-subheader-size-s); }
.size-sm.type-subheader { font-size: var(--typography-subheader-size-sm); }
.size-xs.type-subheader { font-size: var(--typography-subheader-size-xs); }
.size-m.type-subheader { font-size: var(--typography-subheader-size-m); }
.size-l.type-subheader { font-size: var(--typography-subheader-size-l); }
.size-xl.type-subheader { font-size: var(--typography-subheader-size-xl); }

/* display */
.type-display { font-family: var(--typography-text-display-font-family); text-transform: var(--typography-text-display-font-case); }
.size-s.type-display { font-size: var(--typography-text-display-size-s); }
.size-m.type-display { font-size: var(--typography-text-display-size-m); }
.size-l.type-display { font-size: var(--typography-text-display-size-l); }
.size-xl.type-display { font-size: var(--typography-text-display-size-xl); }

/* title-display */
.type-title-display { text-transform: var(--typography-title-display-font-case); font-family: var(--typography-title-display-font-family); }
.size-s.type-title-display { font-size: var(--typography-title-display-size-s); }
.size-m.type-title-display { font-size: var(--typography-title-display-size-m); }
.size-l.type-title-display { font-size: var(--typography-title-display-size-l); }
.size-xl.type-title-display { font-size: var(--typography-title-display-size-xl); }

/* link-nav */
.type-link-nav { text-transform: var(--typography-link-nav-font-case); font-family: var(--typography-link-nav-font-family); }
.size-s.type-link-nav { font-size: var(--typography-link-nav-size-s); }
.size-m.type-link-nav { font-size: var(--typography-link-nav-size-m); }
.size-l.type-link-nav { font-size: var(--typography-link-nav-size-l); }
.size-xl.type-link-nav { font-size: var(--typography-link-nav-size-xl); }

/* link */
.type-link,
.type-link a {
  color: var(--color-info);
  text-transform: var(--typography-link-font-case);
  font-family: var(--typography-link-font-family);
  text-decoration: none;
}

.type-link:hover,
.type-link a:hover { text-decoration: underline; color: inherit; }

.size-s.type-link { font-size: var(--typography-link-size-s); }
.size-m.type-link { font-size: var(--typography-link-size-m); }
.size-l.type-link { font-size: var(--typography-link-size-l); }
.size-xl.type-link { font-size: var(--typography-link-size-xl); }

/* caption */
.type-caption { text-transform: var(--typography-caption-font-case); font-family: var(--typography-caption-font-family); }
.size-s.type-caption { font-size: var(--typography-caption-size-s); }
.size-m.type-caption { font-size: var(--typography-caption-size-m); }
.size-l.type-caption { font-size: var(--typography-caption-size-l); }
.size-xl.type-caption { font-size: var(--typography-caption-size-xl); }

/* label */
.type-label { text-transform: var(--typography-label-font-case); font-family: var(--typography-label-font-family); }
.size-s.type-label { font-size: var(--typography-label-size-s); }
.size-m.type-label { font-size: var(--typography-label-size-m); }
.size-l.type-label { font-size: var(--typography-label-size-l); }
.size-xl.type-label { font-size: var(--typography-label-size-xl); }

/* button */
.type-button { text-transform: var(--typography-button-font-case); font-family: var(--typography-button-font-family); }
.size-xs.type-button { font-size: var(--typography-button-size-xs); }
.size-s.type-button { font-size: var(--typography-button-size-s); }
.size-m.type-button { font-size: var(--typography-button-size-m); }
.size-l.type-button { font-size: var(--typography-button-size-l); }
.size-xl.type-button { font-size: var(--typography-button-size-xl); }

/* numbers */
.type-numbers { font-family: var(--typography-numbers-font-family); }
.size-s.type-numbers { font-size: var(--typography-numbers-size-s); }
.size-m.type-numbers { font-size: var(--typography-numbers-size-m); }
.size-l.type-numbers { font-size: var(--typography-numbers-size-l); }
.size-xl.type-numbers { font-size: var(--typography-numbers-size-xl); }
    
/* navigation */
.type-navigation { font-family: var(--typography-navigation-font-family); }
.size-s.type-navigation { font-size: var(--typography-navigation-size-s); }
.size-m.type-navigation { font-size: var(--typography-navigation-size-m); }
.size-l.type-navigation { font-size: var(--typography-navigation-size-l); }
.size-xl.type-navigation { font-size: var(--typography-navigation-size-xl); }