@import "../properties.css";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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