@import "../properties.css";

@media only screen and (max-width: 1023px) {
  .mobile-center { text-align: center; }
  .mobile-small { font-size: 12px; font-family: var(--font-family-noto-sans); }
  .mobile-bold { font-weight: bold; }
  .mobile-align-center { text-align: center; }
  .mobile-align-left { text-align: left; }
  .mobile-align-right { text-align: right; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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