@import '../properties.css';

/*
  ## Spacing Introduction

  Spacing is a layout helper domain driven developed to VAI LLC front-end products.

  In the code you will see A LOT of `<S>`, it uses a DIV for Web Browsers
  and a `<View>` for React Native JSX. In this file you can check all the CSS
  styles applied to the Web Browsers. The React Native styles are located at
  /vai/ui/src/native/Spacing.

  This component abstract styling, and the styles follow a Design System,
  we only have two breakpoints at the moment `mobile` and `desktop`,
  and `default` that applies the style for both breakpoints.

  * `tablet` will be introduced soon.

  for mobile: `@media only screen and (max-width: 1023px) { ... }`
  for default: `@media only screen { ... }`
  for desktop: `@media only screen and (min-width: 1024px) { ... }`

  ## Spacing Usage

  Import S component from vai/ui, S means Spacing, and again you will see a lot
  of <S>...</S> declarations in the code.
  
  ```
  import { S } from '@vai/ui'
  ```

  All properties all optional by default
  ```
  <S>
    Content
  </S>
  ```

  A default flex element with a spacing from horizontal, and background.
  ```
  <S default={{ flex: true, horizontal: 2, background: 'white' }}>
    Content
  </S>
  ```

  Let's apply a different horizontal for mobile
  ```
  <S
    default={{ flex: true, horizontal: 2, background: 'white' }}
    mobile={{ horizontal: 1 }}
  >
    Content
  </S>
  ```

  But on desktop, let's use a higher value
  ```
  <S
    default={{ flex: true, horizontal: 2, background: 'white' }}
    mobile={{ horizontal: 1 }}
    desktop={{ horizontal: 3 }}
  >
    Content
  </S>
  ```

  > WARN: Today the `default` horizontal would get ignored. It is still under
  >       development, if you see a strange behaviour zoom call the best co-worker
  >       to fix the issue.

  > WARN 2: ALWAYS keep retro-compapatibility and progressively deprecate old properties
  >         and styles in a call huge refactors are not necessary on the already developed
  >         screens of our products.

  ## Class Name Scheme

  .[mediaProperty]-[propertyName]-[propertyValue] { [propertyMatchSideEffect] }

  ### Examples:

  .mobile-flex-true
  <S mobile={{ flex: true }}>
  <S mobile={<P flex />}>

  .default-justify-center
  <S mobile={{ flex: true, justify: 'center' }}>
  <S mobile={<P flex justify="center" />}>
*/

:global(*) {
  box-sizing: border-box;
}

/* mobile */
@media only screen and (max-width: 1023px) {
  /* utils */
  .mobile-hide-true { display: none !important; }

  /* flex */
  .mobile-flex { display: flex; }
  .mobile-direction-row-reverse { flex-direction: row-reverse; }
  .mobile-direction-column { flex-direction: column; }
  .mobile-flexColumn { flex-direction: column; } /* deprecate */
  .mobile-direction-column-reverse { flex-direction: column-reverse; }
  .mobile-direction-row { flex-direction: row; }
  .mobile-flexRow { flex-direction: row; } /* deprecate */
  .mobile-flex-grow { flex-grow: 1; }
  .mobile-flexEnd { justify-content: flex-end; }
  .mobile-justify-end { justify-content: flex-end; } /* deprecate */
  .mobile-flexStart { justify-content: flex-start; }
  .mobile-justify-start { justify-content: flex-start; } /* deprecate */
  .mobile-justify-center { justify-content: center; }
  .mobile-justify-between { justify-content: space-between; }
  .mobile-justify-around { justify-content: space-around; }
  .mobile-align-center { align-items: center; }
  .mobile-align-end { align-items: flex-end; }

  /* grid */
  .mobile-grid-true {
    display: grid;
  }

  .mobile-grid-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, calc(100% / 2));
  }

  .mobile-grid-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, calc(100% / 3));
  }

  .mobile-grid-columns-4 {
    display: grid;
    grid-template-columns: repeat(4, calc(100% / 4));
  }

  .mobile-grid-columns-5 {
    display: grid;
    grid-template-columns: repeat(5, calc(100% / 5));
  }

  /* height */
  .mobile-height-009 { height: var(--height-009); }
  .mobile-height-005 { height: var(--height-005); }
  .mobile-height-002 { height: var(--height-002); }

  /* width */
  .mobile-width-full { width: 100%; }

  /* overflow */
  .mobile-overflow-true { overflow: auto; }

  /* text */
  .mobile-text-center { text-align: center; }

  /* right */
  .mobile-right-large { padding-right: var(--spacing-3); }
  .mobile-right-medium { padding-right: var(--spacing-2); }
  .mobile-right-small { padding-right: var(--spacing-1); }

  /* left */
  .mobile-left-large { padding-left: var(--spacing-3); }
  .mobile-left-medium { padding-left: var(--spacing-2); }
  .mobile-left-small { padding-left: var(--spacing-1); }

  /* top */
  .mobile-top-large { padding-top: var(--spacing-3); }
  .mobile-top-medium { padding-top: var(--spacing-2); }
  .mobile-top-small { padding-top: var(--spacing-1-5); }
  .mobile-top-0-5 { padding-top: var(--spacing-4); }
  .mobile-top-0-5 { padding-top: var(--spacing-0-5); }
  .mobile-top-1-5 { padding-top: var(--spacing-1-5) }
  .mobile-top-1-8 { padding-top: var(--spacing-1-8) }
  .mobile-top-1 { padding-top: var(--spacing-1); }
  .mobile-top-2 { padding-top: var(--spacing-2); }
  .mobile-top-3 { padding-top: var(--spacing-3); }
  .mobile-top-4 { padding-top: var(--spacing-4); }
  .mobile-top-5 { padding-top: var(--spacing-5); }
  .mobile-top-6 { padding-top: var(--spacing-6); }
  .mobile-top-7 { padding-top: var(--spacing-7); }
  .mobile-top-8 { padding-top: var(--spacing-8); }
  .mobile-top-9 { padding-top: var(--spacing-9); }
  .mobile-top-10 { padding-top: var(--spacing-10); }
  .mobile-top-11 { padding-top: var(--spacing-11); }
  .mobile-top-12 { padding-top: var(--spacing-12); }
  .mobile-top-13 { padding-top: var(--spacing-13); }
  .mobile-top-14 { padding-top: var(--spacing-14); }
  .mobile-top-15 { padding-top: var(--spacing-15); }
  .mobile-top-20 { padding-top: var(--spacing-20); }

  /* bottom */
  .mobile-bottom-0-5 { padding-bottom: var(--spacing-0-5); }
  .mobile-bottom-1-5 { padding-bottom: var(--spacing-1-5) }
  .mobile-bottom-1 { padding-bottom: var(--spacing-1); }
  .mobile-bottom-1-5 { padding-bottom: var(--spacing-1-5); }
  .mobile-bottom-1-8 { padding-bottom: var(--spacing-1-8); }
  .mobile-bottom-2 { padding-bottom: var(--spacing-2); }
  .mobile-bottom-3 { padding-bottom: var(--spacing-3); }
  .mobile-bottom-4 { padding-bottom: var(--spacing-4); }
  .mobile-bottom-5 { padding-bottom: var(--spacing-5); }
  .mobile-bottom-6 { padding-bottom: var(--spacing-6); }
  .mobile-bottom-7 { padding-bottom: var(--spacing-7); }
  .mobile-bottom-8 { padding-bottom: var(--spacing-8); }
  .mobile-bottom-9 { padding-bottom: var(--spacing-9); }
  .mobile-bottom-10 { padding-bottom: var(--spacing-10); }
  .mobile-bottom-11 { padding-bottom: var(--spacing-11); }
  .mobile-bottom-12 { padding-bottom: var(--spacing-12); }
  .mobile-bottom-13 { padding-bottom: var(--spacing-13); }
  .mobile-bottom-14 { padding-bottom: var(--spacing-14); }
  .mobile-bottom-15 { padding-bottom: var(--spacing-15); }
  .mobile-bottom-20 { padding-bottom: var(--spacing-20); }

  /* left */
  .mobile-left-0-5 { padding-left: var(--spacing-0-5); }
  .mobile-left-1-5 { padding-left: var(--spacing-1-5) }
  .mobile-left-1-8 { padding-left: var(--spacing-1-8) }
  .mobile-left-1 { padding-left: var(--spacing-1); }
  .mobile-left-2 { padding-left: var(--spacing-2); }
  .mobile-left-3 { padding-left: var(--spacing-3); }
  .mobile-left-4 { padding-left: var(--spacing-4); }
  .mobile-left-5 { padding-left: var(--spacing-5); }
  .mobile-left-6 { padding-left: var(--spacing-6); }
  .mobile-left-7 { padding-left: var(--spacing-7); }
  .mobile-left-8 { padding-left: var(--spacing-8); }
  .mobile-left-9 { padding-left: var(--spacing-9); }
  .mobile-left-10 { padding-left: var(--spacing-10); }
  .mobile-left-11 { padding-left: var(--spacing-11); }
  .mobile-left-12 { padding-left: var(--spacing-12); }
  .mobile-left-13 { padding-left: var(--spacing-13); }
  .mobile-left-14 { padding-left: var(--spacing-14); }
  .mobile-left-15 { padding-left: var(--spacing-15); }
  .mobile-left-20 { padding-left: var(--spacing-20); }

  /* right */
  .mobile-right-0-5 { padding-right: var(--spacing-0-5); }
  .mobile-right-1-5 { padding-right: var(--spacing-1-5) }
  .mobile-right-1-8 { padding-right: var(--spacing-1-8) }
  .mobile-right-1 { padding-right: var(--spacing-1); }
  .mobile-right-2 { padding-right: var(--spacing-2); }
  .mobile-right-3 { padding-right: var(--spacing-3); }
  .mobile-right-4 { padding-right: var(--spacing-4); }
  .mobile-right-5 { padding-right: var(--spacing-5); }
  .mobile-right-6 { padding-right: var(--spacing-6); }
  .mobile-right-7 { padding-right: var(--spacing-7); }
  .mobile-right-8 { padding-right: var(--spacing-8); }
  .mobile-right-9 { padding-right: var(--spacing-9); }
  .mobile-right-10 { padding-right: var(--spacing-10); }
  .mobile-right-11 { padding-right: var(--spacing-11); }
  .mobile-right-12 { padding-right: var(--spacing-12); }
  .mobile-right-13 { padding-right: var(--spacing-13); }
  .mobile-right-14 { padding-right: var(--spacing-14); }
  .mobile-right-15 { padding-right: var(--spacing-15); }
  .mobile-right-20 { padding-right: var(--spacing-20); }

  /* vertical  */
  .mobile-vertical-0-5 { composes: mobile-top-0-5; composes: mobile-bottom-0-5; }
  .mobile-vertical-1-5 { composes: mobile-top-1-5; composes: mobile-bottom-1-5; }
  .mobile-vertical-1-8 { composes: mobile-top-1-8; composes: mobile-bottom-1-8; }
  .mobile-vertical-1 { composes: mobile-top-1; composes: mobile-bottom-1; }
  .mobile-vertical-2 { composes: mobile-top-2; composes: mobile-bottom-2; }
  .mobile-vertical-3 { composes: mobile-top-3; composes: mobile-bottom-3; }
  .mobile-vertical-4 { composes: mobile-top-4; composes: mobile-bottom-4; }
  .mobile-vertical-5 { composes: mobile-top-5; composes: mobile-bottom-5; }
  .mobile-vertical-6 { composes: mobile-top-6; composes: mobile-bottom-6; }
  .mobile-vertical-7 { composes: mobile-top-7; composes: mobile-bottom-7; }
  .mobile-vertical-8 { composes: mobile-top-8; composes: mobile-bottom-8; }
  .mobile-vertical-9 { composes: mobile-top-9; composes: mobile-bottom-9; }
  .mobile-vertical-10 { composes: mobile-top-10; composes: mobile-bottom-10; }
  .mobile-vertical-11 { composes: mobile-top-11; composes: mobile-bottom-11; }
  .mobile-vertical-12 { composes: mobile-top-11; composes: mobile-bottom-11; }
  .mobile-vertical-13 { composes: mobile-top-11; composes: mobile-bottom-11; }
  .mobile-vertical-14 { composes: mobile-top-11; composes: mobile-bottom-11; }
  .mobile-vertical-15 { composes: mobile-top-11; composes: mobile-bottom-11; }
  .mobile-vertical-20 { composes: mobile-top-20; composes: mobile-bottom-20; }

  /* horizontal */
  .mobile-horizontal-0-5 { composes: mobile-left-0-5; composes: mobile-right-0-5; }
  .mobile-horizontal-1-5 { composes: mobile-left-1-5; composes: mobile-right-1-5; }
  .mobile-horizontal-1-8 { composes: mobile-left-1-8; composes: mobile-right-1-8; }
  .mobile-horizontal-1 { composes: mobile-left-1; composes: mobile-right-1; }
  .mobile-horizontal-2 { composes: mobile-left-2; composes: mobile-right-2; }
  .mobile-horizontal-3 { composes: mobile-left-3; composes: mobile-right-3; }
  .mobile-horizontal-4 { composes: mobile-left-4; composes: mobile-right-4; }
  .mobile-horizontal-5 { composes: mobile-left-5; composes: mobile-right-5; }
  .mobile-horizontal-6 { composes: mobile-left-6; composes: mobile-right-6; }
  .mobile-horizontal-7 { composes: mobile-left-7; composes: mobile-right-7; }
  .mobile-horizontal-8 { composes: mobile-left-8; composes: mobile-right-8; }
  .mobile-horizontal-9 { composes: mobile-left-9; composes: mobile-right-9; }
  .mobile-horizontal-10 { composes: mobile-left-10; composes: mobile-right-10; }
  .mobile-horizontal-11 { composes: mobile-left-11; composes: mobile-right-11; }
  .mobile-horizontal-12 { composes: mobile-left-11; composes: mobile-right-11; }
  .mobile-horizontal-13 { composes: mobile-left-11; composes: mobile-right-11; }
  .mobile-horizontal-14 { composes: mobile-left-11; composes: mobile-right-11; }
  .mobile-horizontal-15 { composes: mobile-left-11; composes: mobile-right-11; }
  .mobile-horizontal-20 { composes: mobile-left-20; composes: mobile-right-20; }

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

  /* bottom */
  .mobile-bottom-large { padding-bottom: var(--spacing-3); }
  .mobile-bottom-medium { padding-bottom: var(--spacing-2); }
  .mobile-bottom-small { padding-bottom: var(--spacing-1); }

  /* vertical */
  .mobile-vertical-large { padding-bottom: var(--spacing-3); padding-top: var(--spacing-3); }
  .mobile-vertical-medium { padding-bottom: var(--spacing-2); padding-top: var(--spacing-2); }
  .mobile-vertical-small { padding-bottom: var(--spacing-1); padding-top: var(--spacing-1); }

  /* horizontal */
  .mobile-horizontal-large { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
  .mobile-horizontal-medium { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
  .mobile-horizontal-small { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }

  /* card */
  .mobile-card { background: var(--color-white); box-shadow: var(--card-shadow-4); border-radius: var(--card-radius); }
  .mobile-container-full-height { height: 100%; }
  .mobile-container-full-width { width: 100%; }
  .mobile-container-true,
  .mobile-container-medium { composes: mobile-container-full-width; max-width: var(--card-container-medium); }
  .mobile-container-small { composes: mobile-container-full-width; max-width: var(--card-container-small); }
  .mobile-container-large { composes: mobile-container-full-width; max-width: var(--card-container-large); }

  .mobile-container-full-height-large {
    composes: mobile-container-full-height;
    composes: mobile-container-full-width;
    max-width: var(--card-container-large) !important;
  }

  /* z-index */
  .mobile-z-0 { position: relative; z-index: 0; }
  .mobile-z-1 { position: relative; z-index: 1; }
  .mobile-z-2 { position: relative; z-index: 2; }
  .mobile-z-3 { position: relative; z-index: 3; }

  .mobile-position-fixed { position: fixed !important; }
}

/* default */
@media only screen {
  /* utils */
  .default-hide-true { display: none !important; }

  /* flex */
  .default-flex { display: flex; }
  .default-inline-block { display: inline-block; }
  .default-flex-grow-true { flex-grow: 1; }
  .default-flex-wrap { flex-wrap: wrap; }
  .default-flexWrap { flex-wrap: wrap; }
  .default-direction-row-reverse { flex-direction: row-reverse; }
  .default-direction-column { flex-direction: column; }
  .default-direction-row { flex-direction: row; }
  .default-align-center { align-items: center; }
  .default-align-end { align-items: flex-end; }
  .default-justify-center { justify-content: center; }
  .default-justify-start { justify-content: flex-start; }
  .default-justify-end { justify-content: flex-end; }
  .default-justify-between { justify-content: space-between; }
  .default-justify-around { justify-content: space-around; }

  /* grid */
  .default-grid-true {
    display: grid;
  }

  .default-grid-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, calc(100% / 2 - 8px));
  }

  .default-grid-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, calc(100% / 3 - 8px));
  }

  .default-grid-columns-4 {
    display: grid;
    grid-template-columns: repeat(4, calc(100% / 4));
  }

  .default-grid-columns-5 {
    display: grid;
    grid-template-columns: repeat(5, calc(100% / 5));
  }

  /* height */
  .default-height-009 { height: var(--height-009); }
  .default-height-005 { height: var(--height-005); }
  .default-height-002 { height: var(--height-002); }

  /* container */
  .default-container-full-height { height: 100%; }
  .default-container-full-width { width: 100%; }
  .default-container-full-box { height: 100%; width: 100%; }

  .default-container-true,
  .default-container-medium {
    composes: default-container-full-width;
    max-width: var(--card-container-medium);
    width: var(--card-container-medium);
  }

  .default-container-small { composes: default-container-full-width; max-width: var(--card-container-small); }
  .default-container-large { composes: default-container-full-width; max-width: var(--card-container-large); }
  .default-container-extra-large { composes: default-container-full-width; max-width: var(--card-container-extra-large); }

  .default-container-full-height-large {
    composes: default-container-full-height;
    composes: default-container-full-width;
    max-width: var(--card-container-large) !important;
  }

  .default-container-full-height-desktop {
    composes: default-container-full-height;
    composes: default-container-full-width;
    max-width: 600px !important;
  }

  .default-container-full-height-full-width {
    composes: default-container-full-height;
    composes: default-container-full-width;
  }

  /* overflow */
  .default-overflow-true { overflow: auto; -webkit-overflow-scrolling: touch; }

  /* text */
  .default-text-center { text-align: center; }
  .default-overflow-hidden { overflow: hidden; }
  .default-radius-true { border-radius: var(--radius-small); }

  /* right */
  .default-right-large { padding-right: var(--spacing-3); }
  .default-right-medium { padding-right: var(--spacing-2); }
  .default-right-small { padding-right: var(--spacing-1); }

  /* left */
  .default-left-large { padding-left: var(--spacing-3); }
  .default-left-medium { padding-left: var(--spacing-2); }
  .default-left-small { padding-left: var(--spacing-1); }
  .default-top-0-5 { padding-top: var(--spacing-0-5); }
  .default-top-1-5 { padding-top: var(--spacing-1-5) }
  .default-top-1-8 { padding-top: var(--spacing-1-8) }
  .default-top-1 { padding-top: var(--spacing-1); }
  .default-top-2 { padding-top: var(--spacing-2); }
  .default-top-3 { padding-top: var(--spacing-3); }
  .default-top-4 { padding-top: var(--spacing-4); }
  .default-top-5 { padding-top: var(--spacing-5); }
  .default-top-6 { padding-top: var(--spacing-6); }
  .default-top-7 { padding-top: var(--spacing-7); }
  .default-top-8 { padding-top: var(--spacing-8); }
  .default-top-9 { padding-top: var(--spacing-9); }
  .default-top-10 { padding-top: var(--spacing-10); }
  .default-top-11 { padding-top: var(--spacing-11); }
  .default-top-12 { padding-top: var(--spacing-12); }
  .default-top-13 { padding-top: var(--spacing-13); }
  .default-top-14 { padding-top: var(--spacing-14); }
  .default-top-15 { padding-top: var(--spacing-15); }
  .default-top-20 { padding-top: var(--spacing-20); }

  /* bottom */
  .default-bottom-0-5 { padding-bottom: var(--spacing-0-5); }
  .default-bottom-1-5 { padding-bottom: var(--spacing-1-5) }
  .default-bottom-1 { padding-bottom: var(--spacing-1); }
  .default-bottom-2 { padding-bottom: var(--spacing-2); }
  .default-bottom-3 { padding-bottom: var(--spacing-3); }
  .default-bottom-4 { padding-bottom: var(--spacing-4); }
  .default-bottom-5 { padding-bottom: var(--spacing-5); }
  .default-bottom-6 { padding-bottom: var(--spacing-6); }
  .default-bottom-7 { padding-bottom: var(--spacing-7); }
  .default-bottom-8 { padding-bottom: var(--spacing-8); }
  .default-bottom-9 { padding-bottom: var(--spacing-9); }
  .default-bottom-10 { padding-bottom: var(--spacing-10); }
  .default-bottom-11 { padding-bottom: var(--spacing-11); }
  .default-bottom-12 { padding-bottom: var(--spacing-12); }
  .default-bottom-13 { padding-bottom: var(--spacing-13); }
  .default-bottom-14 { padding-bottom: var(--spacing-14); }
  .default-bottom-15 { padding-bottom: var(--spacing-15); }
  .default-bottom-20 { padding-bottom: var(--spacing-20); }

  /* left */
  .default-left-0-5 { padding-left: var(--spacing-0-5); }
  .default-left-1-5 { padding-left: var(--spacing-1-5) }
  .default-left-1 { padding-left: var(--spacing-1); }
  .default-left-2 { padding-left: var(--spacing-2); }
  .default-left-3 { padding-left: var(--spacing-3); }
  .default-left-4 { padding-left: var(--spacing-4); }
  .default-left-5 { padding-left: var(--spacing-5); }
  .default-left-6 { padding-left: var(--spacing-6); }
  .default-left-7 { padding-left: var(--spacing-7); }
  .default-left-8 { padding-left: var(--spacing-8); }
  .default-left-9 { padding-left: var(--spacing-9); }
  .default-left-10 { padding-left: var(--spacing-10); }
  .default-left-11 { padding-left: var(--spacing-11); }
  .default-left-12 { padding-left: var(--spacing-12); }
  .default-left-13 { padding-left: var(--spacing-13); }
  .default-left-14 { padding-left: var(--spacing-14); }
  .default-left-15 { padding-left: var(--spacing-15); }
  .default-left-20 { padding-left: var(--spacing-20); }

  /* right */
  .default-right-0-5 { padding-right: var(--spacing-0-5); }
  .default-right-1-5 { padding-right: var(--spacing-1-5) }
  .default-right-1 { padding-right: var(--spacing-1); }
  .default-right-2 { padding-right: var(--spacing-2); }
  .default-right-3 { padding-right: var(--spacing-3); }
  .default-right-4 { padding-right: var(--spacing-4); }
  .default-right-5 { padding-right: var(--spacing-5); }
  .default-right-6 { padding-right: var(--spacing-6); }
  .default-right-7 { padding-right: var(--spacing-7); }
  .default-right-8 { padding-right: var(--spacing-8); }
  .default-right-9 { padding-right: var(--spacing-9); }
  .default-right-10 { padding-right: var(--spacing-10); }
  .default-right-11 { padding-right: var(--spacing-11); }
  .default-right-12 { padding-right: var(--spacing-12); }
  .default-right-13 { padding-right: var(--spacing-13); }
  .default-right-14 { padding-right: var(--spacing-14); }
  .default-right-15 { padding-right: var(--spacing-15); }
  .default-right-20 { padding-right: var(--spacing-20); }

  /* vertical */
  .default-vertical-0-5 { composes: default-top-0-5; composes: default-bottom-0-5; }
  .default-vertical-1-5 { composes: default-top-1-5; composes: default-bottom-1-5; }
  .default-vertical-1 { composes: default-top-1; composes: default-bottom-1; }
  .default-vertical-2 { composes: default-top-2; composes: default-bottom-2; }
  .default-vertical-3 { composes: default-top-3; composes: default-bottom-3; }
  .default-vertical-4 { composes: default-top-4; composes: default-bottom-4; }
  .default-vertical-5 { composes: default-top-5; composes: default-bottom-5; }
  .default-vertical-6 { composes: default-top-6; composes: default-bottom-6; }
  .default-vertical-7 { composes: default-top-7; composes: default-bottom-7; }
  .default-vertical-8 { composes: default-top-8; composes: default-bottom-8; }
  .default-vertical-9 { composes: default-top-9; composes: default-bottom-9; }
  .default-vertical-10 { composes: default-top-10; composes: default-bottom-10; }
  .default-vertical-11 { composes: default-top-11; composes: default-bottom-11; }
  .default-vertical-12 { composes: default-top-11; composes: default-bottom-11; }
  .default-vertical-13 { composes: default-top-11; composes: default-bottom-11; }
  .default-vertical-14 { composes: default-top-11; composes: default-bottom-11; }
  .default-vertical-15 { composes: default-top-11; composes: default-bottom-11; }
  .default-vertical-20 { composes: default-top-20; composes: default-bottom-20; }

  /* horizontal */
  .default-horizontal-0-5 { composes: default-left-0-5; composes: default-right-0-5; }
  .default-horizontal-1-5 { composes: default-left-1-5; composes: default-right-1-5; }
  .default-horizontal-1 { composes: default-left-1; composes: default-right-1; }
  .default-horizontal-2 { composes: default-left-2; composes: default-right-2; }
  .default-horizontal-3 { composes: default-left-3; composes: default-right-3; }
  .default-horizontal-4 { composes: default-left-4; composes: default-right-4; }
  .default-horizontal-5 { composes: default-left-5; composes: default-right-5; }
  .default-horizontal-6 { composes: default-left-6; composes: default-right-6; }
  .default-horizontal-7 { composes: default-left-7; composes: default-right-7; }
  .default-horizontal-8 { composes: default-left-8; composes: default-right-8; }
  .default-horizontal-9 { composes: default-left-9; composes: default-right-9; }
  .default-horizontal-10 { composes: default-left-10; composes: default-right-10; }
  .default-horizontal-11 { composes: default-left-11; composes: default-right-11; }
  .default-horizontal-12 { composes: default-left-11; composes: default-right-11; }
  .default-horizontal-13 { composes: default-left-11; composes: default-right-11; }
  .default-horizontal-14 { composes: default-left-11; composes: default-right-11; }
  .default-horizontal-15 { composes: default-left-11; composes: default-right-11; }
  .default-horizontal-20 { composes: default-left-20; composes: default-right-20; }

  /* top */
  .default-top-large { padding-top: var(--spacing-3); }
  .default-top-medium { padding-top: var(--spacing-2); }
  .default-top-small { padding-top: var(--spacing-1-5); }

  /* borders */
  .default-border-bottom { border-bottom: 1px solid var(--color-grey-300); }
  .default-border-top { border-top: 1px solid var(--color-grey-300); }
  .default-border-all { border: 1px solid var(--color-grey-300); }
  .default-border-bottom-solid { border-bottom: 4px solid var(--color-primary); }
  .default-border-bottom-primary { border-bottom: 4px solid var(--color-primary); }

  /* bottom */
  .default-bottom-large { padding-bottom: var(--spacing-3); }
  .default-bottom-medium { padding-bottom: var(--spacing-2); }
  .default-bottom-small { padding-bottom: var(--spacing-1); }

  /* vertical */
  .default-vertical-large { padding-bottom: var(--spacing-3); padding-top: var(--spacing-3); }
  .default-vertical-medium { padding-bottom: var(--spacing-2); padding-top: var(--spacing-2); }
  .default-vertical-small { padding-bottom: var(--spacing-1); padding-top: var(--spacing-1); }

  /* horizontal */
  .default-horizontal-large { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
  .default-horizontal-medium { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
  .default-horizontal-small { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }

  /* card */
  .default-card { background: var(--color-white); border-radius: var(--card-radius); box-shadow: var(--card-shadow-4); }
  .default-card-basic { background: var(--color-white); border-radius: var(--radius-medium); box-shadow: var(--card-shadow-5); }

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

  .default-z-0 { position: relative; z-index: 0; }
  .default-z-1 { position: relative; z-index: 1; }
  .default-z-2 { position: relative; z-index: 2; }
  .default-z-3 { position: relative; z-index: 3; }

  .desktop-position-fixed { position: fixed !important; }
}

/* desktop */
@media only screen and (min-width: 1024px) {
  /* utils */
  .desktop-hide-true { display: none !important; }
  
  /* flex */
  .desktop-flex { display: flex; }
  .desktop-direction-row-reverse { flex-direction: row-reverse; }
  .desktop-direction-column-reverse { flex-direction: column-reverse; }
  .desktop-direction-column { flex-direction: column; }
  .desktop-direction-row { flex-direction: row; }
  .desktop-flex-grow-true { flex-grow: 1; }
  .desktop-flexColumn { flex-direction: column; }
  .desktop-flexWrap { flex-wrap: wrap; }
  .desktop-flexEnd { justify-content: flex-end; }
  .desktop-flexStart { justify-content: flex-start; }
  .desktop-align-center { align-items: center; }
  .desktop-align-end { align-items: flex-end; }
  .desktop-spaceBetween { justify-content: space-between; }
  .desktop-flexRow { flex-direction: row; }
  .desktop-justify-center { justify-content: center; }
  .desktop-justify-start { justify-content: flex-start; }
  .desktop-justify-end { justify-content: flex-end; }
  .desktop-justify-between { justify-content: space-between; }
  .desktop-justify-around { justify-content: space-around; }

  /* grid */
  .desktop-grid-true {
    display: grid;
  }

  .desktop-grid-columns-2 {
    display: grid;
    grid-template-columns: repeat(2, calc(100% / 2 - 8px));
    grid-column-gap: 16px;
  }

  .desktop-grid-columns-3 {
    display: grid;
    grid-template-columns: repeat(3, calc(100% / 3));
  }

  .desktop-grid-columns-4 {
    display: grid;
    grid-template-columns: repeat(4, calc(100% / 4));
  }

  .desktop-grid-columns-5 {
    display: grid;
    grid-template-columns: repeat(5, calc(100% / 5));
  }

  /* container */
  .desktop-container-full-height { height: 100%; }
  .desktop-container-full-width { width: 100%; }
  .desktop-container-true,
  .desktop-container-medium { max-width: calc(100% / 2 - 8px); width: 100%; }
  .desktop-container-small { max-width: calc(100% / 3); width: 100%; }
  .desktop-container-large { max-width: var(--card-container-large) !important; width: 100%; }

  .desktop-container-full-height-large {
    composes: desktop-container-full-height;
    composes: desktop-container-full-width;
    max-width: var(--card-container-large) !important;
  }

  .desktop-container-extra-large { composes: default-container-full-width; max-width: var(--card-container-extra-large); }

  /* height */
  .desktop-height-009 { height: var(--height-009); }
  .desktop-height-005 { height: var(--height-005); }
  .desktop-height-002 { height: var(--height-002); }
  .desktop-height-full { min-height: 100%; }
  .desktop-width-full { width: 100%; }

  /* overflow */
  .desktop-overflow-true { overflow: auto; }

  /* text */
  .desktop-text-center { text-align: center; }

  /* right */
  .desktop-right-large { padding-right: var(--spacing-3); }
  .desktop-right-medium { padding-right: var(--spacing-2); }
  .desktop-right-small { padding-right: var(--spacing-1); }

  /* left */
  .desktop-left-large { padding-left: var(--spacing-3); }
  .desktop-left-medium { padding-left: var(--spacing-2); }
  .desktop-left-small { padding-left: var(--spacing-1); }

  /* top */
  .desktop-top-0-5 { padding-top: var(--spacing-0-5); }
  .desktop-top-1-5 { padding-top: var(--spacing-1-5) }
  .desktop-top-1-8 { padding-top: var(--spacing-1-8) }
  .desktop-top-1 { padding-top: var(--spacing-1); }
  .desktop-top-2 { padding-top: var(--spacing-2); }
  .desktop-top-3 { padding-top: var(--spacing-3); }
  .desktop-top-4 { padding-top: var(--spacing-4); }
  .desktop-top-5 { padding-top: var(--spacing-5); }
  .desktop-top-6 { padding-top: var(--spacing-6); }
  .desktop-top-7 { padding-top: var(--spacing-7); }
  .desktop-top-8 { padding-top: var(--spacing-8); }
  .desktop-top-9 { padding-top: var(--spacing-9); }
  .desktop-top-10 { padding-top: var(--spacing-10); }
  .desktop-top-11 { padding-top: var(--spacing-11); }
  .desktop-top-12 { padding-top: var(--spacing-12); }
  .desktop-top-13 { padding-top: var(--spacing-13); }
  .desktop-top-14 { padding-top: var(--spacing-14); }
  .desktop-top-15 { padding-top: var(--spacing-15); }
  .desktop-top-20 { padding-top: var(--spacing-20); }

  /* bottom */
  .desktop-bottom-0-5 { padding-bottom: var(--spacing-0-5); }
  .desktop-bottom-1-5 { padding-bottom: var(--spacing-1-5) }
  .desktop-bottom-1 { padding-bottom: var(--spacing-1); }
  .desktop-bottom-2 { padding-bottom: var(--spacing-2); }
  .desktop-bottom-3 { padding-bottom: var(--spacing-3); }
  .desktop-bottom-4 { padding-bottom: var(--spacing-4); }
  .desktop-bottom-5 { padding-bottom: var(--spacing-5); }
  .desktop-bottom-6 { padding-bottom: var(--spacing-6); }
  .desktop-bottom-7 { padding-bottom: var(--spacing-7); }
  .desktop-bottom-8 { padding-bottom: var(--spacing-8); }
  .desktop-bottom-9 { padding-bottom: var(--spacing-9); }
  .desktop-bottom-10 { padding-bottom: var(--spacing-10); }
  .desktop-bottom-11 { padding-bottom: var(--spacing-11); }
  .desktop-bottom-12 { padding-bottom: var(--spacing-12); }
  .desktop-bottom-13 { padding-bottom: var(--spacing-13); }
  .desktop-bottom-14 { padding-bottom: var(--spacing-14); }
  .desktop-bottom-15 { padding-bottom: var(--spacing-15); }
  .desktop-bottom-20 { padding-bottom: var(--spacing-20); }

  /* left */
  .desktop-left-0-5 { padding-left: var(--spacing-0-5); }
  .desktop-left-1-5 { padding-left: var(--spacing-1-5) }
  .desktop-left-1 { padding-left: var(--spacing-1); }
  .desktop-left-2 { padding-left: var(--spacing-2); }
  .desktop-left-3 { padding-left: var(--spacing-3); }
  .desktop-left-4 { padding-left: var(--spacing-4); }
  .desktop-left-5 { padding-left: var(--spacing-5); }
  .desktop-left-6 { padding-left: var(--spacing-6); }
  .desktop-left-7 { padding-left: var(--spacing-7); }
  .desktop-left-8 { padding-left: var(--spacing-8); }
  .desktop-left-9 { padding-left: var(--spacing-9); }
  .desktop-left-10 { padding-left: var(--spacing-10); }
  .desktop-left-11 { padding-left: var(--spacing-11); }
  .desktop-left-12 { padding-left: var(--spacing-12); }
  .desktop-left-13 { padding-left: var(--spacing-13); }
  .desktop-left-14 { padding-left: var(--spacing-14); }
  .desktop-left-15 { padding-left: var(--spacing-15); }
  .desktop-left-20 { padding-left: var(--spacing-20); }
  .desktop-left-30 { padding-left: var(--spacing-30); }

  /* right */
  .desktop-right-0-5 { padding-right: var(--spacing-0-5); }
  .desktop-right-1-5 { padding-right: var(--spacing-1-5) }
  .desktop-right-1 { padding-right: var(--spacing-1); }
  .desktop-right-2 { padding-right: var(--spacing-2); }
  .desktop-right-3 { padding-right: var(--spacing-3); }
  .desktop-right-4 { padding-right: var(--spacing-4); }
  .desktop-right-5 { padding-right: var(--spacing-5); }
  .desktop-right-6 { padding-right: var(--spacing-6); }
  .desktop-right-7 { padding-right: var(--spacing-7); }
  .desktop-right-8 { padding-right: var(--spacing-8); }
  .desktop-right-9 { padding-right: var(--spacing-9); }
  .desktop-right-10 { padding-right: var(--spacing-10); }
  .desktop-right-11 { padding-right: var(--spacing-11); }
  .desktop-right-12 { padding-right: var(--spacing-12); }
  .desktop-right-13 { padding-right: var(--spacing-13); }
  .desktop-right-14 { padding-right: var(--spacing-14); }
  .desktop-right-15 { padding-right: var(--spacing-15); }
  .desktop-right-20 { padding-right: var(--spacing-20); }
  .desktop-right-30 { padding-right: var(--spacing-30); }

  /* vertical */
  .desktop-vertical-0-5 { composes: desktop-top-0-5; composes: desktop-bottom-0-5; }
  .desktop-vertical-1-5 { composes: desktop-top-1-5; composes: desktop-bottom-1-5; }
  .desktop-vertical-1 { composes: desktop-top-1; composes: desktop-bottom-1; }
  .desktop-vertical-2 { composes: desktop-top-2; composes: desktop-bottom-2; }
  .desktop-vertical-3 { composes: desktop-top-3; composes: desktop-bottom-3; }
  .desktop-vertical-4 { composes: desktop-top-4; composes: desktop-bottom-4; }
  .desktop-vertical-5 { composes: desktop-top-5; composes: desktop-bottom-5; }
  .desktop-vertical-6 { composes: desktop-top-6; composes: desktop-bottom-6; }
  .desktop-vertical-7 { composes: desktop-top-7; composes: desktop-bottom-7; }
  .desktop-vertical-8 { composes: desktop-top-8; composes: desktop-bottom-8; }
  .desktop-vertical-9 { composes: desktop-top-9; composes: desktop-bottom-9; }
  .desktop-vertical-10 { composes: desktop-top-10; composes: desktop-bottom-10; }
  .desktop-vertical-11 { composes: desktop-top-11; composes: desktop-bottom-11; }
  .desktop-vertical-12 { composes: desktop-top-11; composes: desktop-bottom-11; }
  .desktop-vertical-13 { composes: desktop-top-11; composes: desktop-bottom-11; }
  .desktop-vertical-14 { composes: desktop-top-11; composes: desktop-bottom-11; }
  .desktop-vertical-15 { composes: desktop-top-11; composes: desktop-bottom-11; }
  .desktop-vertical-20 { composes: desktop-top-20; composes: desktop-bottom-20; }

  /* horizontal */
  .desktop-horizontal-0-5 { composes: desktop-left-0-5; composes: desktop-right-0-5; }
  .desktop-horizontal-1-5 { composes: desktop-left-1-5; composes: desktop-right-1-5; }
  .desktop-horizontal-1 { composes: desktop-left-1; composes: desktop-right-1; }
  .desktop-horizontal-2 { composes: desktop-left-2; composes: desktop-right-2; }
  .desktop-horizontal-3 { composes: desktop-left-3; composes: desktop-right-3; }
  .desktop-horizontal-4 { composes: desktop-left-4; composes: desktop-right-4; }
  .desktop-horizontal-5 { composes: desktop-left-5; composes: desktop-right-5; }
  .desktop-horizontal-6 { composes: desktop-left-6; composes: desktop-right-6; }
  .desktop-horizontal-7 { composes: desktop-left-7; composes: desktop-right-7; }
  .desktop-horizontal-8 { composes: desktop-left-8; composes: desktop-right-8; }
  .desktop-horizontal-9 { composes: desktop-left-9; composes: desktop-right-9; }
  .desktop-horizontal-10 { composes: desktop-left-10; composes: desktop-right-10; }
  .desktop-horizontal-11 { composes: desktop-left-11; composes: desktop-right-11; }
  .desktop-horizontal-12 { composes: desktop-left-11; composes: desktop-right-11; }
  .desktop-horizontal-13 { composes: desktop-left-11; composes: desktop-right-11; }
  .desktop-horizontal-14 { composes: desktop-left-11; composes: desktop-right-11; }
  .desktop-horizontal-15 { composes: desktop-left-11; composes: desktop-right-11; }
  .desktop-horizontal-20 { composes: desktop-left-20; composes: desktop-right-20; }

  /* top */
  .desktop-top-large { padding-top: var(--spacing-3); }
  .desktop-top-medium { padding-top: var(--spacing-2); }
  .desktop-top-small { padding-top: var(--spacing-1-5); }

  /* bottom */
  .desktop-bottom-large { padding-bottom: var(--spacing-3); }
  .desktop-bottom-medium { padding-bottom: var(--spacing-2); }
  .desktop-bottom-small { padding-bottom: var(--spacing-1); }

  /* vertical */
  .desktop-vertical-large { padding-bottom: var(--spacing-3); padding-top: var(--spacing-3); }
  .desktop-vertical-medium { padding-bottom: var(--spacing-2); padding-top: var(--spacing-2); }
  .desktop-vertical-small { padding-bottom: var(--spacing-1); padding-top: var(--spacing-1); }

  /* horizontal */
  .desktop-horizontal-large { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
  .desktop-horizontal-medium { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
  .desktop-horizontal-small { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }

  /* card */
  .desktop-card { background: var(--color-white); box-shadow: var(--card-shadow-4); border-radius: var(--card-radius); }

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

  /* z-index */
  .desktop-z-0 { position: relative; z-index: 0; }
  .desktop-z-1 { position: relative; z-index: 1; }
  .desktop-z-2 { position: relative; z-index: 2; }
  .desktop-z-3 { position: relative; z-index: 3; }

  .desktop-position-fixed { position: fixed !important; }
}