sass-atoms

a flexible kit for designing and materializing atomic utility classes, as a base for a sass/css framework.

why?

The motivation behind any SASS/CSS framework is to eliminate the paradox of choice in styling, and allow a team to put together a consistent, high-quality UI with less effort. However, a common problem with many CSS frameworks today is that they are too limited. Frequently, design systems need to be modified and extended in non-standard ways due to a lack flexibilty in the base of the framework:

"I need an xxl breakpoint, but framework X only supports sm -> xl"
"How do I add a custom font family to framework X?"

sass-atoms addresses this by adding a large number of well-designed 'atoms' (utility classes) that you can use to customize an existing framework, or use as a foundation when creating your own components.

how to use it

Install the sass-atoms package via npm, and your sass code add @import 'sass-atoms/index.scss';

sass-atoms, by default, creates no classes, so there is no size overhead to importing it in your code. All utility classes are generated as a sass placeholder classes (https://sass-lang.com/documentation/style-rules/placeholder-selectors).

When you want to use a utlilty class, you can extend it, like so:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

This banner will have a 100% width, an inline-block display, and different internal padding based on the current breakpoint.

When compiled, this resulting CSS for this banner component looks like:

  .banner {
    box-sizing: border-box;
  }

  .banner {
    display: inline-block;
  }

  .banner {
    padding: 1rem;
  }

  @media (min-width: 768px) {
    .banner:not(:root):not(:root) {
      padding: 1.5rem;
    }
  }

  @media (min-width: 992px) {
    .banner:not(:root):not(:root):not(:root) {
      padding: 2rem;
    }
  }

  .banner {
    width: 100%;
  }

Due to the way the @extend rule works, the result will be a number of small selectors rather than a single large one, but the resulting CSS is still performant and highly compressible.

If you want to add options to this banner, you can do so by materializing the utility placeholders as real classes for the banner, like so:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  $background-options: (
    'bg-primary-100',
    'bg-primary-900',
    'bg-secondary-100',
    'bg-secondary-900',
  );

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-options, '.banner');

The resulting CSS looks like this:

.banner.bg-primary-100 {
  background-color: #E0E7FF;
}

.banner.bg-primary-900 {
  background-color: #312E81;
}

.banner.bg-secondary-100 {
  background-color: #DBEAFE;
}

.banner.bg-secondary-900 {
  background-color: #1E3A8A;
}

.banner {
  box-sizing: border-box;
}

.banner {
  display: inline-block;
} 

.banner {
  padding: 1rem;
}

@media (min-width: 768px) {
  .banner:not(:root):not(:root) {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .banner:not(:root):not(:root):not(:root) {
    padding: 2rem;
  }
}

.banner {
  width: 100%;
}

The materialize mixin also accepts a map, if you want to alias certain utility classes:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  $background-options: (
    'bg-primary-light': 'bg-primary-100',
    'bg-primary-dark': 'bg-primary-900',
    'bg-secondary-light': 'bg-secondary-100',
    'bg-secondary-dark': 'bg-secondary-900',
  );

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-options, '.banner');

Will compile to:

.banner.bg-primary-light {
  background-color: #E0E7FF;
}

.banner.bg-primary-dark {
  background-color: #312E81;
}

.banner.bg-secondary-light {
  background-color: #DBEAFE;
}

.banner.bg-secondary-dark {
  background-color: #1E3A8A;
}

.banner {
  box-sizing: border-box;
}

.banner {
  display: inline-block;
}

.banner {
  padding: 1rem;
}

@media (min-width: 768px) {
  .banner:not(:root):not(:root) {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .banner:not(:root):not(:root):not(:root) {
    padding: 2rem;
  }
}

.banner {
  width: 100%;
}

You can also use this to add all default atoms to a class, but this will result in a larger output:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-color-atoms, '.banner');

development mode

if you want to test the different classes without rebuilding your sass, sass-atoms ships with a dev css bundle that includes all utlity classes as materialized classes, so you can add them directly to your html. Just load the bundle sass-atoms/dev.css.

atoms reference

`$align-content-atoms`

align-content-start align-content-end align-content-center align-content-between align-content-around align-content-evenly

`$align-content-atoms--breakpoints`

align-content-start--sm align-content-start--md align-content-start--lg align-content-start--xl align-content-end--sm align-content-end--md align-content-end--lg align-content-end--xl align-content-center--sm align-content-center--md align-content-center--lg align-content-center--xl align-content-between--sm align-content-between--md align-content-between--lg align-content-between--xl align-content-around--sm align-content-around--md align-content-around--lg align-content-around--xl align-content-evenly--sm align-content-evenly--md align-content-evenly--lg align-content-evenly--xl

`$align-content-atoms--states`

align-content-start--active align-content-start--hover align-content-start--focus align-content-start--disabled align-content-start--enabled align-content-end--active align-content-end--hover align-content-end--focus align-content-end--disabled align-content-end--enabled align-content-center--active align-content-center--hover align-content-center--focus align-content-center--disabled align-content-center--enabled align-content-between--active align-content-between--hover align-content-between--focus align-content-between--disabled align-content-between--enabled align-content-around--active align-content-around--hover align-content-around--focus align-content-around--disabled align-content-around--enabled align-content-evenly--active align-content-evenly--hover align-content-evenly--focus align-content-evenly--disabled align-content-evenly--enabled

`$align-items-atoms`

align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

`$align-items-atoms--breakpoints`

align-items-start--sm align-items-start--md align-items-start--lg align-items-start--xl align-items-end--sm align-items-end--md align-items-end--lg align-items-end--xl align-items-center--sm align-items-center--md align-items-center--lg align-items-center--xl align-items-baseline--sm align-items-baseline--md align-items-baseline--lg align-items-baseline--xl align-items-stretch--sm align-items-stretch--md align-items-stretch--lg align-items-stretch--xl

`$align-items-atoms--states`

align-items-start--active align-items-start--hover align-items-start--focus align-items-start--disabled align-items-start--enabled align-items-end--active align-items-end--hover align-items-end--focus align-items-end--disabled align-items-end--enabled align-items-center--active align-items-center--hover align-items-center--focus align-items-center--disabled align-items-center--enabled align-items-baseline--active align-items-baseline--hover align-items-baseline--focus align-items-baseline--disabled align-items-baseline--enabled align-items-stretch--active align-items-stretch--hover align-items-stretch--focus align-items-stretch--disabled align-items-stretch--enabled

`$align-self-atoms`

align-self-auto align-self-start align-self-end align-self-center align-self-stretch

`$align-self-atoms--breakpoints`

align-self-auto--sm align-self-auto--md align-self-auto--lg align-self-auto--xl align-self-start--sm align-self-start--md align-self-start--lg align-self-start--xl align-self-end--sm align-self-end--md align-self-end--lg align-self-end--xl align-self-center--sm align-self-center--md align-self-center--lg align-self-center--xl align-self-stretch--sm align-self-stretch--md align-self-stretch--lg align-self-stretch--xl

`$align-self-atoms--states`

align-self-auto--active align-self-auto--hover align-self-auto--focus align-self-auto--disabled align-self-auto--enabled align-self-start--active align-self-start--hover align-self-start--focus align-self-start--disabled align-self-start--enabled align-self-end--active align-self-end--hover align-self-end--focus align-self-end--disabled align-self-end--enabled align-self-center--active align-self-center--hover align-self-center--focus align-self-center--disabled align-self-center--enabled align-self-stretch--active align-self-stretch--hover align-self-stretch--focus align-self-stretch--disabled align-self-stretch--enabled

`$background-clip-atoms`

bg-clip-border bg-clip-padding bg-clip-content bg-clip-text

`$background-clip-atoms--breakpoints`

bg-clip-border--sm bg-clip-border--md bg-clip-border--lg bg-clip-border--xl bg-clip-padding--sm bg-clip-padding--md bg-clip-padding--lg bg-clip-padding--xl bg-clip-content--sm bg-clip-content--md bg-clip-content--lg bg-clip-content--xl bg-clip-text--sm bg-clip-text--md bg-clip-text--lg bg-clip-text--xl

`$background-clip-atoms--states`

bg-clip-border--active bg-clip-border--hover bg-clip-border--focus bg-clip-border--disabled bg-clip-border--enabled bg-clip-padding--active bg-clip-padding--hover bg-clip-padding--focus bg-clip-padding--disabled bg-clip-padding--enabled bg-clip-content--active bg-clip-content--hover bg-clip-content--focus bg-clip-content--disabled bg-clip-content--enabled bg-clip-text--active bg-clip-text--hover bg-clip-text--focus bg-clip-text--disabled bg-clip-text--enabled

`$background-color-atoms`

bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900 bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900 bg-link-50 bg-link-100 bg-link-200 bg-link-300 bg-link-400 bg-link-500 bg-link-600 bg-link-700 bg-link-800 bg-link-900 bg-muted-50 bg-muted-100 bg-muted-200 bg-muted-300 bg-muted-400 bg-muted-500 bg-muted-600 bg-muted-700 bg-muted-800 bg-muted-900 bg-success-50 bg-success-100 bg-success-200 bg-success-300 bg-success-400 bg-success-500 bg-success-600 bg-success-700 bg-success-800 bg-success-900 bg-warning-50 bg-warning-100 bg-warning-200 bg-warning-300 bg-warning-400 bg-warning-500 bg-warning-600 bg-warning-700 bg-warning-800 bg-warning-900 bg-error-50 bg-error-100 bg-error-200 bg-error-300 bg-error-400 bg-error-500 bg-error-600 bg-error-700 bg-error-800 bg-error-900 bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900

`$background-color-atoms--breakpoints`

bg-primary-50--sm bg-primary-50--md bg-primary-50--lg bg-primary-50--xl bg-primary-100--sm bg-primary-100--md bg-primary-100--lg bg-primary-100--xl bg-primary-200--sm bg-primary-200--md bg-primary-200--lg bg-primary-200--xl bg-primary-300--sm bg-primary-300--md bg-primary-300--lg bg-primary-300--xl bg-primary-400--sm bg-primary-400--md bg-primary-400--lg bg-primary-400--xl bg-primary-500--sm bg-primary-500--md bg-primary-500--lg bg-primary-500--xl bg-primary-600--sm bg-primary-600--md bg-primary-600--lg bg-primary-600--xl bg-primary-700--sm bg-primary-700--md bg-primary-700--lg bg-primary-700--xl bg-primary-800--sm bg-primary-800--md bg-primary-800--lg bg-primary-800--xl bg-primary-900--sm bg-primary-900--md bg-primary-900--lg bg-primary-900--xl bg-secondary-50--sm bg-secondary-50--md bg-secondary-50--lg bg-secondary-50--xl bg-secondary-100--sm bg-secondary-100--md bg-secondary-100--lg bg-secondary-100--xl bg-secondary-200--sm bg-secondary-200--md bg-secondary-200--lg bg-secondary-200--xl bg-secondary-300--sm bg-secondary-300--md bg-secondary-300--lg bg-secondary-300--xl bg-secondary-400--sm bg-secondary-400--md bg-secondary-400--lg bg-secondary-400--xl bg-secondary-500--sm bg-secondary-500--md bg-secondary-500--lg bg-secondary-500--xl bg-secondary-600--sm bg-secondary-600--md bg-secondary-600--lg bg-secondary-600--xl bg-secondary-700--sm bg-secondary-700--md bg-secondary-700--lg bg-secondary-700--xl bg-secondary-800--sm bg-secondary-800--md bg-secondary-800--lg bg-secondary-800--xl bg-secondary-900--sm bg-secondary-900--md bg-secondary-900--lg bg-secondary-900--xl bg-link-50--sm bg-link-50--md bg-link-50--lg bg-link-50--xl bg-link-100--sm bg-link-100--md bg-link-100--lg bg-link-100--xl bg-link-200--sm bg-link-200--md bg-link-200--lg bg-link-200--xl bg-link-300--sm bg-link-300--md bg-link-300--lg bg-link-300--xl bg-link-400--sm bg-link-400--md bg-link-400--lg bg-link-400--xl bg-link-500--sm bg-link-500--md bg-link-500--lg bg-link-500--xl bg-link-600--sm bg-link-600--md bg-link-600--lg bg-link-600--xl bg-link-700--sm bg-link-700--md bg-link-700--lg bg-link-700--xl bg-link-800--sm bg-link-800--md bg-link-800--lg bg-link-800--xl bg-link-900--sm bg-link-900--md bg-link-900--lg bg-link-900--xl bg-muted-50--sm bg-muted-50--md bg-muted-50--lg bg-muted-50--xl bg-muted-100--sm bg-muted-100--md bg-muted-100--lg bg-muted-100--xl bg-muted-200--sm bg-muted-200--md bg-muted-200--lg bg-muted-200--xl bg-muted-300--sm bg-muted-300--md bg-muted-300--lg bg-muted-300--xl bg-muted-400--sm bg-muted-400--md bg-muted-400--lg bg-muted-400--xl bg-muted-500--sm bg-muted-500--md bg-muted-500--lg bg-muted-500--xl bg-muted-600--sm bg-muted-600--md bg-muted-600--lg bg-muted-600--xl bg-muted-700--sm bg-muted-700--md bg-muted-700--lg bg-muted-700--xl bg-muted-800--sm bg-muted-800--md bg-muted-800--lg bg-muted-800--xl bg-muted-900--sm bg-muted-900--md bg-muted-900--lg bg-muted-900--xl bg-success-50--sm bg-success-50--md bg-success-50--lg bg-success-50--xl bg-success-100--sm bg-success-100--md bg-success-100--lg bg-success-100--xl bg-success-200--sm bg-success-200--md bg-success-200--lg bg-success-200--xl bg-success-300--sm bg-success-300--md bg-success-300--lg bg-success-300--xl bg-success-400--sm bg-success-400--md bg-success-400--lg bg-success-400--xl bg-success-500--sm bg-success-500--md bg-success-500--lg bg-success-500--xl bg-success-600--sm bg-success-600--md bg-success-600--lg bg-success-600--xl bg-success-700--sm bg-success-700--md bg-success-700--lg bg-success-700--xl bg-success-800--sm bg-success-800--md bg-success-800--lg bg-success-800--xl bg-success-900--sm bg-success-900--md bg-success-900--lg bg-success-900--xl bg-warning-50--sm bg-warning-50--md bg-warning-50--lg bg-warning-50--xl bg-warning-100--sm bg-warning-100--md bg-warning-100--lg bg-warning-100--xl bg-warning-200--sm bg-warning-200--md bg-warning-200--lg bg-warning-200--xl bg-warning-300--sm bg-warning-300--md bg-warning-300--lg bg-warning-300--xl bg-warning-400--sm bg-warning-400--md bg-warning-400--lg bg-warning-400--xl bg-warning-500--sm bg-warning-500--md bg-warning-500--lg bg-warning-500--xl bg-warning-600--sm bg-warning-600--md bg-warning-600--lg bg-warning-600--xl bg-warning-700--sm bg-warning-700--md bg-warning-700--lg bg-warning-700--xl bg-warning-800--sm bg-warning-800--md bg-warning-800--lg bg-warning-800--xl bg-warning-900--sm bg-warning-900--md bg-warning-900--lg bg-warning-900--xl bg-error-50--sm bg-error-50--md bg-error-50--lg bg-error-50--xl bg-error-100--sm bg-error-100--md bg-error-100--lg bg-error-100--xl bg-error-200--sm bg-error-200--md bg-error-200--lg bg-error-200--xl bg-error-300--sm bg-error-300--md bg-error-300--lg bg-error-300--xl bg-error-400--sm bg-error-400--md bg-error-400--lg bg-error-400--xl bg-error-500--sm bg-error-500--md bg-error-500--lg bg-error-500--xl bg-error-600--sm bg-error-600--md bg-error-600--lg bg-error-600--xl bg-error-700--sm bg-error-700--md bg-error-700--lg bg-error-700--xl bg-error-800--sm bg-error-800--md bg-error-800--lg bg-error-800--xl bg-error-900--sm bg-error-900--md bg-error-900--lg bg-error-900--xl bg-gray-50--sm bg-gray-50--md bg-gray-50--lg bg-gray-50--xl bg-gray-100--sm bg-gray-100--md bg-gray-100--lg bg-gray-100--xl bg-gray-200--sm bg-gray-200--md bg-gray-200--lg bg-gray-200--xl bg-gray-300--sm bg-gray-300--md bg-gray-300--lg bg-gray-300--xl bg-gray-400--sm bg-gray-400--md bg-gray-400--lg bg-gray-400--xl bg-gray-500--sm bg-gray-500--md bg-gray-500--lg bg-gray-500--xl bg-gray-600--sm bg-gray-600--md bg-gray-600--lg bg-gray-600--xl bg-gray-700--sm bg-gray-700--md bg-gray-700--lg bg-gray-700--xl bg-gray-800--sm bg-gray-800--md bg-gray-800--lg bg-gray-800--xl bg-gray-900--sm bg-gray-900--md bg-gray-900--lg bg-gray-900--xl

`$background-color-atoms--states`

bg-primary-50--active bg-primary-50--hover bg-primary-50--focus bg-primary-50--disabled bg-primary-50--enabled bg-primary-100--active bg-primary-100--hover bg-primary-100--focus bg-primary-100--disabled bg-primary-100--enabled bg-primary-200--active bg-primary-200--hover bg-primary-200--focus bg-primary-200--disabled bg-primary-200--enabled bg-primary-300--active bg-primary-300--hover bg-primary-300--focus bg-primary-300--disabled bg-primary-300--enabled bg-primary-400--active bg-primary-400--hover bg-primary-400--focus bg-primary-400--disabled bg-primary-400--enabled bg-primary-500--active bg-primary-500--hover bg-primary-500--focus bg-primary-500--disabled bg-primary-500--enabled bg-primary-600--active bg-primary-600--hover bg-primary-600--focus bg-primary-600--disabled bg-primary-600--enabled bg-primary-700--active bg-primary-700--hover bg-primary-700--focus bg-primary-700--disabled bg-primary-700--enabled bg-primary-800--active bg-primary-800--hover bg-primary-800--focus bg-primary-800--disabled bg-primary-800--enabled bg-primary-900--active bg-primary-900--hover bg-primary-900--focus bg-primary-900--disabled bg-primary-900--enabled bg-secondary-50--active bg-secondary-50--hover bg-secondary-50--focus bg-secondary-50--disabled bg-secondary-50--enabled bg-secondary-100--active bg-secondary-100--hover bg-secondary-100--focus bg-secondary-100--disabled bg-secondary-100--enabled bg-secondary-200--active bg-secondary-200--hover bg-secondary-200--focus bg-secondary-200--disabled bg-secondary-200--enabled bg-secondary-300--active bg-secondary-300--hover bg-secondary-300--focus bg-secondary-300--disabled bg-secondary-300--enabled bg-secondary-400--active bg-secondary-400--hover bg-secondary-400--focus bg-secondary-400--disabled bg-secondary-400--enabled bg-secondary-500--active bg-secondary-500--hover bg-secondary-500--focus bg-secondary-500--disabled bg-secondary-500--enabled bg-secondary-600--active bg-secondary-600--hover bg-secondary-600--focus bg-secondary-600--disabled bg-secondary-600--enabled bg-secondary-700--active bg-secondary-700--hover bg-secondary-700--focus bg-secondary-700--disabled bg-secondary-700--enabled bg-secondary-800--active bg-secondary-800--hover bg-secondary-800--focus bg-secondary-800--disabled bg-secondary-800--enabled bg-secondary-900--active bg-secondary-900--hover bg-secondary-900--focus bg-secondary-900--disabled bg-secondary-900--enabled bg-link-50--active bg-link-50--hover bg-link-50--focus bg-link-50--disabled bg-link-50--enabled bg-link-100--active bg-link-100--hover bg-link-100--focus bg-link-100--disabled bg-link-100--enabled bg-link-200--active bg-link-200--hover bg-link-200--focus bg-link-200--disabled bg-link-200--enabled bg-link-300--active bg-link-300--hover bg-link-300--focus bg-link-300--disabled bg-link-300--enabled bg-link-400--active bg-link-400--hover bg-link-400--focus bg-link-400--disabled bg-link-400--enabled bg-link-500--active bg-link-500--hover bg-link-500--focus bg-link-500--disabled bg-link-500--enabled bg-link-600--active bg-link-600--hover bg-link-600--focus bg-link-600--disabled bg-link-600--enabled bg-link-700--active bg-link-700--hover bg-link-700--focus bg-link-700--disabled bg-link-700--enabled bg-link-800--active bg-link-800--hover bg-link-800--focus bg-link-800--disabled bg-link-800--enabled bg-link-900--active bg-link-900--hover bg-link-900--focus bg-link-900--disabled bg-link-900--enabled bg-muted-50--active bg-muted-50--hover bg-muted-50--focus bg-muted-50--disabled bg-muted-50--enabled bg-muted-100--active bg-muted-100--hover bg-muted-100--focus bg-muted-100--disabled bg-muted-100--enabled bg-muted-200--active bg-muted-200--hover bg-muted-200--focus bg-muted-200--disabled bg-muted-200--enabled bg-muted-300--active bg-muted-300--hover bg-muted-300--focus bg-muted-300--disabled bg-muted-300--enabled bg-muted-400--active bg-muted-400--hover bg-muted-400--focus bg-muted-400--disabled bg-muted-400--enabled bg-muted-500--active bg-muted-500--hover bg-muted-500--focus bg-muted-500--disabled bg-muted-500--enabled bg-muted-600--active bg-muted-600--hover bg-muted-600--focus bg-muted-600--disabled bg-muted-600--enabled bg-muted-700--active bg-muted-700--hover bg-muted-700--focus bg-muted-700--disabled bg-muted-700--enabled bg-muted-800--active bg-muted-800--hover bg-muted-800--focus bg-muted-800--disabled bg-muted-800--enabled bg-muted-900--active bg-muted-900--hover bg-muted-900--focus bg-muted-900--disabled bg-muted-900--enabled bg-success-50--active bg-success-50--hover bg-success-50--focus bg-success-50--disabled bg-success-50--enabled bg-success-100--active bg-success-100--hover bg-success-100--focus bg-success-100--disabled bg-success-100--enabled bg-success-200--active bg-success-200--hover bg-success-200--focus bg-success-200--disabled bg-success-200--enabled bg-success-300--active bg-success-300--hover bg-success-300--focus bg-success-300--disabled bg-success-300--enabled bg-success-400--active bg-success-400--hover bg-success-400--focus bg-success-400--disabled bg-success-400--enabled bg-success-500--active bg-success-500--hover bg-success-500--focus bg-success-500--disabled bg-success-500--enabled bg-success-600--active bg-success-600--hover bg-success-600--focus bg-success-600--disabled bg-success-600--enabled bg-success-700--active bg-success-700--hover bg-success-700--focus bg-success-700--disabled bg-success-700--enabled bg-success-800--active bg-success-800--hover bg-success-800--focus bg-success-800--disabled bg-success-800--enabled bg-success-900--active bg-success-900--hover bg-success-900--focus bg-success-900--disabled bg-success-900--enabled bg-warning-50--active bg-warning-50--hover bg-warning-50--focus bg-warning-50--disabled bg-warning-50--enabled bg-warning-100--active bg-warning-100--hover bg-warning-100--focus bg-warning-100--disabled bg-warning-100--enabled bg-warning-200--active bg-warning-200--hover bg-warning-200--focus bg-warning-200--disabled bg-warning-200--enabled bg-warning-300--active bg-warning-300--hover bg-warning-300--focus bg-warning-300--disabled bg-warning-300--enabled bg-warning-400--active bg-warning-400--hover bg-warning-400--focus bg-warning-400--disabled bg-warning-400--enabled bg-warning-500--active bg-warning-500--hover bg-warning-500--focus bg-warning-500--disabled bg-warning-500--enabled bg-warning-600--active bg-warning-600--hover bg-warning-600--focus bg-warning-600--disabled bg-warning-600--enabled bg-warning-700--active bg-warning-700--hover bg-warning-700--focus bg-warning-700--disabled bg-warning-700--enabled bg-warning-800--active bg-warning-800--hover bg-warning-800--focus bg-warning-800--disabled bg-warning-800--enabled bg-warning-900--active bg-warning-900--hover bg-warning-900--focus bg-warning-900--disabled bg-warning-900--enabled bg-error-50--active bg-error-50--hover bg-error-50--focus bg-error-50--disabled bg-error-50--enabled bg-error-100--active bg-error-100--hover bg-error-100--focus bg-error-100--disabled bg-error-100--enabled bg-error-200--active bg-error-200--hover bg-error-200--focus bg-error-200--disabled bg-error-200--enabled bg-error-300--active bg-error-300--hover bg-error-300--focus bg-error-300--disabled bg-error-300--enabled bg-error-400--active bg-error-400--hover bg-error-400--focus bg-error-400--disabled bg-error-400--enabled bg-error-500--active bg-error-500--hover bg-error-500--focus bg-error-500--disabled bg-error-500--enabled bg-error-600--active bg-error-600--hover bg-error-600--focus bg-error-600--disabled bg-error-600--enabled bg-error-700--active bg-error-700--hover bg-error-700--focus bg-error-700--disabled bg-error-700--enabled bg-error-800--active bg-error-800--hover bg-error-800--focus bg-error-800--disabled bg-error-800--enabled bg-error-900--active bg-error-900--hover bg-error-900--focus bg-error-900--disabled bg-error-900--enabled bg-gray-50--active bg-gray-50--hover bg-gray-50--focus bg-gray-50--disabled bg-gray-50--enabled bg-gray-100--active bg-gray-100--hover bg-gray-100--focus bg-gray-100--disabled bg-gray-100--enabled bg-gray-200--active bg-gray-200--hover bg-gray-200--focus bg-gray-200--disabled bg-gray-200--enabled bg-gray-300--active bg-gray-300--hover bg-gray-300--focus bg-gray-300--disabled bg-gray-300--enabled bg-gray-400--active bg-gray-400--hover bg-gray-400--focus bg-gray-400--disabled bg-gray-400--enabled bg-gray-500--active bg-gray-500--hover bg-gray-500--focus bg-gray-500--disabled bg-gray-500--enabled bg-gray-600--active bg-gray-600--hover bg-gray-600--focus bg-gray-600--disabled bg-gray-600--enabled bg-gray-700--active bg-gray-700--hover bg-gray-700--focus bg-gray-700--disabled bg-gray-700--enabled bg-gray-800--active bg-gray-800--hover bg-gray-800--focus bg-gray-800--disabled bg-gray-800--enabled bg-gray-900--active bg-gray-900--hover bg-gray-900--focus bg-gray-900--disabled bg-gray-900--enabled

`$background-position-atoms`

bg-top-left bg-top bg-top-right bg-left bg-center bg-right bg-bottom-left bg-bottom bg-bottom-right

`$background-position-atoms--breakpoints`

bg-top-left--sm bg-top-left--md bg-top-left--lg bg-top-left--xl bg-top--sm bg-top--md bg-top--lg bg-top--xl bg-top-right--sm bg-top-right--md bg-top-right--lg bg-top-right--xl bg-left--sm bg-left--md bg-left--lg bg-left--xl bg-center--sm bg-center--md bg-center--lg bg-center--xl bg-right--sm bg-right--md bg-right--lg bg-right--xl bg-bottom-left--sm bg-bottom-left--md bg-bottom-left--lg bg-bottom-left--xl bg-bottom--sm bg-bottom--md bg-bottom--lg bg-bottom--xl bg-bottom-right--sm bg-bottom-right--md bg-bottom-right--lg bg-bottom-right--xl

`$background-position-atoms--states`

bg-top-left--active bg-top-left--hover bg-top-left--focus bg-top-left--disabled bg-top-left--enabled bg-top--active bg-top--hover bg-top--focus bg-top--disabled bg-top--enabled bg-top-right--active bg-top-right--hover bg-top-right--focus bg-top-right--disabled bg-top-right--enabled bg-left--active bg-left--hover bg-left--focus bg-left--disabled bg-left--enabled bg-center--active bg-center--hover bg-center--focus bg-center--disabled bg-center--enabled bg-right--active bg-right--hover bg-right--focus bg-right--disabled bg-right--enabled bg-bottom-left--active bg-bottom-left--hover bg-bottom-left--focus bg-bottom-left--disabled bg-bottom-left--enabled bg-bottom--active bg-bottom--hover bg-bottom--focus bg-bottom--disabled bg-bottom--enabled bg-bottom-right--active bg-bottom-right--hover bg-bottom-right--focus bg-bottom-right--disabled bg-bottom-right--enabled

`$background-repeat-atoms`

bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y

`$background-repeat-atoms--breakpoints`

bg-repeat--sm bg-repeat--md bg-repeat--lg bg-repeat--xl bg-no-repeat--sm bg-no-repeat--md bg-no-repeat--lg bg-no-repeat--xl bg-repeat-x--sm bg-repeat-x--md bg-repeat-x--lg bg-repeat-x--xl bg-repeat-y--sm bg-repeat-y--md bg-repeat-y--lg bg-repeat-y--xl

`$background-repeat-atoms--states`

bg-repeat--active bg-repeat--hover bg-repeat--focus bg-repeat--disabled bg-repeat--enabled bg-no-repeat--active bg-no-repeat--hover bg-no-repeat--focus bg-no-repeat--disabled bg-no-repeat--enabled bg-repeat-x--active bg-repeat-x--hover bg-repeat-x--focus bg-repeat-x--disabled bg-repeat-x--enabled bg-repeat-y--active bg-repeat-y--hover bg-repeat-y--focus bg-repeat-y--disabled bg-repeat-y--enabled

`$background-size-atoms`

bg-auto bg-cover bg-contain

`$background-size-atoms--breakpoints`

bg-auto--sm bg-auto--md bg-auto--lg bg-auto--xl bg-cover--sm bg-cover--md bg-cover--lg bg-cover--xl bg-contain--sm bg-contain--md bg-contain--lg bg-contain--xl

`$background-size-atoms--states`

bg-auto--active bg-auto--hover bg-auto--focus bg-auto--disabled bg-auto--enabled bg-cover--active bg-cover--hover bg-cover--focus bg-cover--disabled bg-cover--enabled bg-contain--active bg-contain--hover bg-contain--focus bg-contain--disabled bg-contain--enabled

`$border-color-atoms`

border-primary-50 border-primary-100 border-primary-200 border-primary-300 border-primary-400 border-primary-500 border-primary-600 border-primary-700 border-primary-800 border-primary-900 border-secondary-50 border-secondary-100 border-secondary-200 border-secondary-300 border-secondary-400 border-secondary-500 border-secondary-600 border-secondary-700 border-secondary-800 border-secondary-900 border-link-50 border-link-100 border-link-200 border-link-300 border-link-400 border-link-500 border-link-600 border-link-700 border-link-800 border-link-900 border-muted-50 border-muted-100 border-muted-200 border-muted-300 border-muted-400 border-muted-500 border-muted-600 border-muted-700 border-muted-800 border-muted-900 border-success-50 border-success-100 border-success-200 border-success-300 border-success-400 border-success-500 border-success-600 border-success-700 border-success-800 border-success-900 border-warning-50 border-warning-100 border-warning-200 border-warning-300 border-warning-400 border-warning-500 border-warning-600 border-warning-700 border-warning-800 border-warning-900 border-error-50 border-error-100 border-error-200 border-error-300 border-error-400 border-error-500 border-error-600 border-error-700 border-error-800 border-error-900 border-gray-50 border-gray-100 border-gray-200 border-gray-300 border-gray-400 border-gray-500 border-gray-600 border-gray-700 border-gray-800 border-gray-900

`$border-color-atoms--breakpoints`

border-primary-50--sm border-primary-50--md border-primary-50--lg border-primary-50--xl border-primary-100--sm border-primary-100--md border-primary-100--lg border-primary-100--xl border-primary-200--sm border-primary-200--md border-primary-200--lg border-primary-200--xl border-primary-300--sm border-primary-300--md border-primary-300--lg border-primary-300--xl border-primary-400--sm border-primary-400--md border-primary-400--lg border-primary-400--xl border-primary-500--sm border-primary-500--md border-primary-500--lg border-primary-500--xl border-primary-600--sm border-primary-600--md border-primary-600--lg border-primary-600--xl border-primary-700--sm border-primary-700--md border-primary-700--lg border-primary-700--xl border-primary-800--sm border-primary-800--md border-primary-800--lg border-primary-800--xl border-primary-900--sm border-primary-900--md border-primary-900--lg border-primary-900--xl border-secondary-50--sm border-secondary-50--md border-secondary-50--lg border-secondary-50--xl border-secondary-100--sm border-secondary-100--md border-secondary-100--lg border-secondary-100--xl border-secondary-200--sm border-secondary-200--md border-secondary-200--lg border-secondary-200--xl border-secondary-300--sm border-secondary-300--md border-secondary-300--lg border-secondary-300--xl border-secondary-400--sm border-secondary-400--md border-secondary-400--lg border-secondary-400--xl border-secondary-500--sm border-secondary-500--md border-secondary-500--lg border-secondary-500--xl border-secondary-600--sm border-secondary-600--md border-secondary-600--lg border-secondary-600--xl border-secondary-700--sm border-secondary-700--md border-secondary-700--lg border-secondary-700--xl border-secondary-800--sm border-secondary-800--md border-secondary-800--lg border-secondary-800--xl border-secondary-900--sm border-secondary-900--md border-secondary-900--lg border-secondary-900--xl border-link-50--sm border-link-50--md border-link-50--lg border-link-50--xl border-link-100--sm border-link-100--md border-link-100--lg border-link-100--xl border-link-200--sm border-link-200--md border-link-200--lg border-link-200--xl border-link-300--sm border-link-300--md border-link-300--lg border-link-300--xl border-link-400--sm border-link-400--md border-link-400--lg border-link-400--xl border-link-500--sm border-link-500--md border-link-500--lg border-link-500--xl border-link-600--sm border-link-600--md border-link-600--lg border-link-600--xl border-link-700--sm border-link-700--md border-link-700--lg border-link-700--xl border-link-800--sm border-link-800--md border-link-800--lg border-link-800--xl border-link-900--sm border-link-900--md border-link-900--lg border-link-900--xl border-muted-50--sm border-muted-50--md border-muted-50--lg border-muted-50--xl border-muted-100--sm border-muted-100--md border-muted-100--lg border-muted-100--xl border-muted-200--sm border-muted-200--md border-muted-200--lg border-muted-200--xl border-muted-300--sm border-muted-300--md border-muted-300--lg border-muted-300--xl border-muted-400--sm border-muted-400--md border-muted-400--lg border-muted-400--xl border-muted-500--sm border-muted-500--md border-muted-500--lg border-muted-500--xl border-muted-600--sm border-muted-600--md border-muted-600--lg border-muted-600--xl border-muted-700--sm border-muted-700--md border-muted-700--lg border-muted-700--xl border-muted-800--sm border-muted-800--md border-muted-800--lg border-muted-800--xl border-muted-900--sm border-muted-900--md border-muted-900--lg border-muted-900--xl border-success-50--sm border-success-50--md border-success-50--lg border-success-50--xl border-success-100--sm border-success-100--md border-success-100--lg border-success-100--xl border-success-200--sm border-success-200--md border-success-200--lg border-success-200--xl border-success-300--sm border-success-300--md border- 57AE success-300--lg border-success-300--xl border-success-400--sm border-success-400--md border-success-400--lg border-success-400--xl border-success-500--sm border-success-500--md border-success-500--lg border-success-500--xl border-success-600--sm border-success-600--md border-success-600--lg border-success-600--xl border-success-700--sm border-success-700--md border-success-700--lg border-success-700--xl border-success-800--sm border-success-800--md border-success-800--lg border-success-800--xl border-success-900--sm border-success-900--md border-success-900--lg border-success-900--xl border-warning-50--sm border-warning-50--md border-warning-50--lg border-warning-50--xl border-warning-100--sm border-warning-100--md border-warning-100--lg border-warning-100--xl border-warning-200--sm border-warning-200--md border-warning-200--lg border-warning-200--xl border-warning-300--sm border-warning-300--md border-warning-300--lg border-warning-300--xl border-warning-400--sm border-warning-400--md border-warning-400--lg border-warning-400--xl border-warning-500--sm border-warning-500--md border-warning-500--lg border-warning-500--xl border-warning-600--sm border-warning-600--md border-warning-600--lg border-warning-600--xl border-warning-700--sm border-warning-700--md border-warning-700--lg border-warning-700--xl border-warning-800--sm border-warning-800--md border-warning-800--lg border-warning-800--xl border-warning-900--sm border-warning-900--md border-warning-900--lg border-warning-900--xl border-error-50--sm border-error-50--md border-error-50--lg border-error-50--xl border-error-100--sm border-error-100--md border-error-100--lg border-error-100--xl border-error-200--sm border-error-200--md border-error-200--lg border-error-200--xl border-error-300--sm border-error-300--md border-error-300--lg border-error-300--xl border-error-400--sm border-error-400--md border-error-400--lg border-error-400--xl border-error-500--sm border-error-500--md border-error-500--lg border-error-500--xl border-error-600--sm border-error-600--md border-error-600--lg border-error-600--xl border-error-700--sm border-error-700--md border-error-700--lg border-error-700--xl border-error-800--sm border-error-800--md border-error-800--lg border-error-800--xl border-error-900--sm border-error-900--md border-error-900--lg border-error-900--xl border-gray-50--sm border-gray-50--md border-gray-50--lg border-gray-50--xl border-gray-100--sm border-gray-100--md border-gray-100--lg border-gray-100--xl border-gray-200--sm border-gray-200--md border-gray-200--lg border-gray-200--xl border-gray-300--sm border-gray-300--md border-gray-300--lg border-gray-300--xl border-gray-400--sm border-gray-400--md border-gray-400--lg border-gray-400--xl border-gray-500--sm border-gray-500--md border-gray-500--lg border-gray-500--xl border-gray-600--sm border-gray-600--md border-gray-600--lg border-gray-600--xl border-gray-700--sm border-gray-700--md border-gray-700--lg border-gray-700--xl border-gray-800--sm border-gray-800--md border-gray-800--lg border-gray-800--xl border-gray-900--sm border-gray-900--md border-gray-900--lg border-gray-900--xl

`$border-color-atoms--states`

border-primary-50--active border-primary-50--hover border-primary-50--focus border-primary-50--disabled border-primary-50--enabled border-primary-100--active border-primary-100--hover border-primary-100--focus border-primary-100--disabled border-primary-100--enabled border-primary-200--active border-primary-200--hover border-primary-200--focus border-primary-200--disabled border-primary-200--enabled border-primary-300--active border-primary-300--hover border-primary-300--focus border-primary-300--disabled border-primary-300--enabled border-primary-400--active border-primary-400--hover border-primary-400--focus border-primary-400--disabled border-primary-400--enabled border-primary-500--active border-primary-500--hover border-primary-500--focus border-primary-500--disabled border-primary-500--enabled border-primary-600--active border-primary-600--hover border-primary-600--focus border-primary-600--disabled border-primary-600--enabled border-primary-700--active border-primary-700--hover border-primary-700--focus border-primary-700--disabled border-primary-700--enabled border-primary-800--active border-primary-800--hover border-primary-800--focus border-primary-800--disabled border-primary-800--enabled border-primary-900--active border-primary-900--hover border-primary-900--focus border-primary-900--disabled border-primary-900--enabled border-secondary-50--active border-secondary-50--hover border-secondary-50--focus border-secondary-50--disabled border-secondary-50--enabled border-secondary-100--active border-secondary-100--hover border-secondary-100--focus border-secondary-100--disabled border-secondary-100--enabled border-secondary-200--active border-secondary-200--hover border-secondary-200--focus border-secondary-200--disabled border-secondary-200--enabled border-secondary-300--active border-secondary-300--hover border-secondary-300--focus border-secondary-300--disabled border-secondary-300--enabled border-secondary-400--active border-secondary-400--hover border-secondary-400--focus border-secondary-400--disabled border-secondary-400--enabled border-secondary-500--active border-secondary-500--hover border-secondary-500--focus border-secondary-500--disabled border-secondary-500--enabled border-secondary-600--active border-secondary-600--hover border-secondary-600--focus border-secondary-600--disabled border-secondary-600--enabled border-secondary-700--active border-secondary-700--hover border-secondary-700--focus border-secondary-700--disabled border-secondary-700--enabled border-secondary-800--active border-secondary-800--hover border-secondary-800--focus border-secondary-800--disabled border-secondary-800--enabled border-secondary-900--active border-secondary-900--hover border-secondary-900--focus border-secondary-900--disabled border-secondary-900--enabled border-link-50--active border-link-50--hover border-link-50--focus border-link-50--disabled border-link-50--enabled border-link-100--active border-link-100--hover border-link-100--focus border-link-100--disabled border-link-100--enabled border-link-200--active border-link-200--hover border-link-200--focus border-link-200--disabled border-link-200--enabled border-link-300--active border-link-300--hover border-link-300--focus border-link-300--disabled border-link-300--enabled border-link-400--active border-link-400--hover border-link-400--focus border-link-400--disabled border-link-400--enabled border-link-500--active border-link-500--hover border-link-500--focus border-link-500--disabled border-link-500--enabled border-link-600--active border-link-600--hover border-link-600--focus border-link-600--disabled border-link-600--enabled border-link-700--active border-link-700--hover border-link-700--focus border-link-700--disabled border-link-700--enabled border-link-800--active border-link-800--hover border-link-800--focus border-link-800--disabled border-link-800--enabled border-link-900--active border-link-900--hover border-link-900--focus border-link-900--disabled border-link-900--enabled border-muted-50--active border-muted-50--hover border-muted-50--focus border-muted-50--disabled border-muted-50--enabled border-muted-100--active border-muted-100--hover border-muted-100--focus border-muted-100--disabled border-muted-100--enabled border-muted-200--active border-muted-200--hover border-muted-200--focus border-muted-200--disabled border-muted-200--enabled border-muted-300--active border-muted-300--hover border-muted-300--focus border-muted-300--disabled border-muted-300--enabled border-muted-400--active border-muted-400--hover border-muted-400--focus border-muted-400--disabled border-muted-400--enabled border-muted-500--active border-muted-500--hover border-muted-500--focus border-muted-500--disabled border-muted-500--enabled border-muted-600--active border-muted-600--hover border-muted-600--focus border-muted-600--disabled border-muted-600--enabled border-muted-700--active border-muted-700--hover border-muted-700--focus border-muted-700--disabled border-muted-700--enabled border-muted-800--active border-muted-800--hover border-muted-800--focus border-muted-800--disabled border-muted-800--enabled border-muted-900--active border-muted-900--hover border-muted-900--focus border-muted-900--disabled border-muted-900--enabled border-success-50--active border-success-50--hover border-success-50--focus border-success-50--disabled border-success-50--enabled border-success-100--active border-success-100--hover border-success-100--focus border-success-100--disabled border-success-100--enabled border-success-200--active border-success-200--hover border-success-200--focus border-success-200--disabled border-success-200--enabled border-success-300--active border-success-300--hover border-success-300--focus border-success-300--disabled border-success-300--enabled border-success-400--active border-success-400--hover border-success-400--focus border-success-400--disabled border-success-400--enabled border-success-500--active border-success-500--hover border-success-500--focus border-success-500--disabled border-success-500--enabled border-success-600--active border-success-600--hover border-success-600--focus border-success-600--disabled border-success-600--enabled border-success-700--active border-success-700--hover border-success-700--focus border-success-700--disabled border-success-700--enabled border-success-800--active border-success-800--hover border-success-800--focus border-success-800--disabled border-success-800--enabled border-success-900--active border-success-900--hover border-success-900--focus border-success-900--disabled border-success-900--enabled border-warning-50--active border-warning-50--hover border-warning-50--focus border-warning-50--disabled border-warning-50--enabled border-warning-100--active border-warning-100--hover border-warning-100--focus border-warning-100--disabled border-warning-100--enabled border-warning-200--active border-warning-200--hover border-warning-200--focus border-warning-200--disabled border-warning-200--enabled border-warning-300--active border-warning-300--hover border-warning-300--focus border-warning-300--disabled border-warning-300--enabled border-warning-400--active border-warning-400--hover border-warning-400--focus border-warning-400--disabled border-warning-400--enabled border-warning-500--active border-warning-500--hover border-warning-500--focus border-warning-500--disabled border-warning-500--enabled border-warning-600--active border-warning-600--hover border-warning-600--focus border-warning-600--disabled border-warning-600--enabled border-warning-700--active border-warning-700--hover border-warning-700--focus border-warning-700--disabled border-warning-700--enabled border-warning-800--active border-warning-800--hover border-warning-800--focus border-warning-800--disabled border-warning-800--enabled border-warning-900--active border-warning-900--hover border-warning-900--focus border-warning-900--disabled border-warning-900--enabled border-error-50--active border-error-50--hover border-error-50--focus border-error-50--disabled border-error-50--enabled border-error-100--active border-error-100--hover border-error-100--focus border-error-100--disabled border-error-100--enabled border-error-200--active border-error-200--hover border-error-200--focus border-error-200--disabled border-error-200--enabled border-error-300--active border-error-300--hover border-error-300--focus border-error-300--disabled border-error-300--enabled border-error-400--active border-error-400--hover border-error-400--focus border-error-400--disabled border-error-400--enabled border-error-500--active border-error-500--hover border-error-500--focus border-error-500--disabled border-error-500--enabled border-error-600--active border-error-600--hover border-error-600--focus border-error-600--disabled border-error-600--enabled border-error-700--active border-error-700--hover border-error-700--focus border-error-700--disabled border-error-700--enabled border-error-800--active border-error-800--hover border-error-800--focus border-error-800--disabled border-error-800--enabled border-error-900--active border-error-900--hover border-error-900--focus border-error-900--disabled border-error-900--enabled border-gray-50--active border-gray-50--hover border-gray-50--focus border-gray-50--disabled border-gray-50--enabled border-gray-100--active border-gray-100--hover border-gray-100--focus border-gray-100--disabled border-gray-100--enabled border-gray-200--active border-gray-200--hover border-gray-200--focus border-gray-200--disabled border-gray-200--enabled border-gray-300--active border-gray-300--hover border-gray-300--focus border-gray-300--disabled border-gray-300--enabled border-gray-400--active border-gray-400--hover border-gray-400--focus border-gray-400--disabled border-gray-400--enabled border-gray-500--active border-gray-500--hover border-gray-500--focus border-gray-500--disabled border-gray-500--enabled border-gray-600--active border-gray-600--hover border-gray-600--focus border-gray-600--disabled border-gray-600--enabled border-gray-700--active border-gray-700--hover border-gray-700--focus border-gray-700--disabled border-gray-700--enabled border-gray-800--active border-gray-800--hover border-gray-800--focus border-gray-800--disabled border-gray-800--enabled border-gray-900--active border-gray-900--hover border-gray-900--focus border-gray-900--disabled border-gray-900--enabled

`$border-radius-atoms`

round-0 round-1 round-2 round-3 round-4 round-5 round-6 round-full

`$border-radius-atoms--breakpoints`

round-0--sm round-0--md round-0--lg round-0--xl round-1--sm round-1--md round-1--lg round-1--xl round-2--sm round-2--md round-2--lg round-2--xl round-3--sm round-3--md round-3--lg round-3--xl round-4--sm round-4--md round-4--lg round-4--xl round-5--sm round-5--md round-5--lg round-5--xl round-6--sm round-6--md round-6--lg round-6--xl round-full--sm round-full--md round-full--lg round-full--xl

`$border-radius-atoms--states`

round-0--active round-0--hover round-0--focus round-0--disabled round-0--enabled round-1--active round-1--hover round-1--focus round-1--disabled round-1--enabled round-2--active round-2--hover round-2--focus round-2--disabled round-2--enabled round-3--active round-3--hover round-3--focus round-3--disabled round-3--enabled round-4--active round-4--hover round-4--focus round-4--disabled round-4--enabled round-5--active round-5--hover round-5--focus round-5--disabled round-5--enabled round-6--active round-6--hover round-6--focus round-6--disabled round-6--enabled round-full--active round-full--hover round-full--focus round-full--disabled round-full--enabled

`$border-style-atoms`

border-solid border-dashed border-dotted border-double border-none

`$border-style-atoms--breakpoints`

border-solid--sm border-solid--md border-solid--lg border-solid--xl border-dashed--sm border-dashed--md border-dashed--lg border-dashed--xl border-dotted--sm border-dotted--md border-dotted--lg border-dotted--xl border-double--sm border-double--md border-double--lg border-double--xl border-none--sm border-none--md border-none--lg border-none--xl

`$border-style-atoms--states`

border-solid--active border-solid--hover border-solid--focus border-solid--disabled border-solid--enabled border-dashed--active border-dashed--hover border-dashed--focus border-dashed--disabled border-dashed--enabled border-dotted--active border-dotted--hover border-dotted--focus border-dotted--disabled border-dotted--enabled border-double--active border-double--hover border-double--focus border-double--disabled border-double--enabl B41A ed border-none--active border-none--hover border-none--focus border-none--disabled border-none--enabled

`$border-width-atoms`

border-0 border-1 border-2 border-3 border-4 border-5 border-6

`$border-width-atoms--breakpoints`

border-0--sm border-0--md border-0--lg border-0--xl border-1--sm border-1--md border-1--lg border-1--xl border-2--sm border-2--md border-2--lg border-2--xl border-3--sm border-3--md border-3--lg border-3--xl border-4--sm border-4--md border-4--lg border-4--xl border-5--sm border-5--md border-5--lg border-5--xl border-6--sm border-6--md border-6--lg border-6--xl

`$border-width-atoms--states`

border-0--active border-0--hover border-0--focus border-0--disabled border-0--enabled border-1--active border-1--hover border-1--focus border-1--disabled border-1--enabled border-2--active border-2--hover border-2--focus border-2--disabled border-2--enabled border-3--active border-3--hover border-3--focus border-3--disabled border-3--enabled border-4--active border-4--hover border-4--focus border-4--disabled border-4--enabled border-5--active border-5--hover border-5--focus border-5--disabled border-5--enabled border-6--active border-6--hover border-6--focus border-6--disabled border-6--enabled

`$box-sizing-atoms`

box-border box-content

`$box-sizing-atoms--breakpoints`

box-border--sm box-border--md box-border--lg box-border--xl box-content--sm box-content--md box-content--lg box-content--xl

`$box-sizing-atoms--states`

box-border--active box-border--hover box-border--focus box-border--disabled box-border--enabled box-content--active box-content--hover box-content--focus box-content--disabled box-content--enabled

`$clear-atoms`

clear-left clear-right clear-both clear-none

`$clear-atoms--breakpoints`

clear-left--sm clear-left--md clear-left--lg clear-left--xl clear-right--sm clear-right--md clear-right--lg clear-right--xl clear-both--sm clear-both--md clear-both--lg clear-both--xl clear-none--sm clear-none--md clear-none--lg clear-none--xl

`$clear-atoms--states`

clear-left--active clear-left--hover clear-left--focus clear-left--disabled clear-left--enabled clear-right--active clear-right--hover clear-right--focus clear-right--disabled clear-right--enabled clear-both--active clear-both--hover clear-both--focus clear-both--disabled clear-both--enabled clear-none--active clear-none--hover clear-none--focus clear-none--disabled clear-none--enabled

`$display-atoms`

d-block d-inline-block d-inline d-flex d-inline-flex d-table d-table-caption d-table-cell d-table-column d-table-column-group d-table-footer-group d-table-header-group d-table-row-group d-table-row d-flow-root d-grid d-inline-grid d-none

`$display-atoms--breakpoints`

d-block--sm d-block--md d-block--lg d-block--xl d-inline-block--sm d-inline-block--md d-inline-block--lg d-inline-block--xl d-inline--sm d-inline--md d-inline--lg d-inline--xl d-flex--sm d-flex--md d-flex--lg d-flex--xl d-inline-flex--sm d-inline-flex--md d-inline-flex--lg d-inline-flex--xl d-table--sm d-table--md d-table--lg d-table--xl d-table-caption--sm d-table-caption--md d-table-caption--lg d-table-caption--xl d-table-cell--sm d-table-cell--md d-table-cell--lg d-table-cell--xl d-table-column--sm d-table-column--md d-table-column--lg d-table-column--xl d-table-column-group--sm d-table-column-group--md d-table-column-group--lg d-table-column-group--xl d-table-footer-group--sm d-table-footer-group--md d-table-footer-group--lg d-table-footer-group--xl d-table-header-group--sm d-table-header-group--md d-table-header-group--lg d-table-header-group--xl d-table-row-group--sm d-table-row-group--md d-table-row-group--lg d-table-row-group--xl d-table-row--sm d-table-row--md d-table-row--lg d-table-row--xl d-flow-root--sm d-flow-root--md d-flow-root--lg d-flow-root--xl d-grid--sm d-grid--md d-grid--lg d-grid--xl d-inline-grid--sm d-inline-grid--md d-inline-grid--lg d-inline-grid--xl d-none--sm d-none--md d-none--lg d-none--xl

`$display-atoms--states`

d-block--active d-block--hover d-block--focus d-block--disabled d-block--enabled d-inline-block--active d-inline-block--hover d-inline-block--focus d-inline-block--disabled d-inline-block--enabled d-inline--active d-inline--hover d-inline--focus d-inline--disabled d-inline--enabled d-flex--active d-flex--hover d-flex--focus d-flex--disabled d-flex--enabled d-inline-flex--active d-inline-flex--hover d-inline-flex--focus d-inline-flex--disabled d-inline-flex--enabled d-table--active d-table--hover d-table--focus d-table--disabled d-table--enabled d-table-caption--active d-table-caption--hover d-table-caption--focus d-table-caption--disabled d-table-caption--enabled d-table-cell--active d-table-cell--hover d-table-cell--focus d-table-cell--disabled d-table-cell--enabled d-table-column--active d-table-column--hover d-table-column--focus d-table-column--disabled d-table-column--enabled d-table-column-group--active d-table-column-group--hover d-table-column-group--focus d-table-column-group--disabled d-table-column-group--enabled d-table-footer-group--active d-table-footer-group--hover d-table-footer-group--focus d-table-footer-group--disabled d-table-footer-group--enabled d-table-header-group--active d-table-header-group--hover d-table-header-group--focus d-table-header-group--disabled d-table-header-group--enabled d-table-row-group--active d-table-row-group--hover d-table-row-group--focus d-table-row-group--disabled d-table-row-group--enabled d-table-row--active d-table-row--hover d-table-row--focus d-table-row--disabled d-table-row--enabled d-flow-root--active d-flow-root--hover d-flow-root--focus d-flow-root--disabled d-flow-root--enabled d-grid--active d-grid--hover d-grid--focus d-grid--disabled d-grid--enabled d-inline-grid--active d-inline-grid--hover d-inline-grid--focus d-inline-grid--disabled d-inline-grid--enabled d-none--active d-none--hover d-none--focus d-none--disabled d-none--enabled

`$flex-direction-atoms`

flex-row flex-row-reverse flex-col flex-col-reverse

`$flex-direction-atoms--breakpoints`

flex-row--sm flex-row--md flex-row--lg flex-row--xl flex-row-reverse--sm flex-row-reverse--md flex-row-reverse--lg flex-row-reverse--xl flex-col--sm flex-col--md flex-col--lg flex-col--xl flex-col-reverse--sm flex-col-reverse--md flex-col-reverse--lg flex-col-reverse--xl

`$flex-direction-atoms--states`

flex-row--active flex-row--hover flex-row--focus flex-row--disabled flex-row--enabled flex-row-reverse--active flex-row-reverse--hover flex-row-reverse--focus flex-row-reverse--disabled flex-row-reverse--enabled flex-col--active flex-col--hover flex-col--focus flex-col--disabled flex-col--enabled flex-col-reverse--active flex-col-reverse--hover flex-col-reverse--focus flex-col-reverse--disabled flex-col-reverse--enabled

`$flex-grow-atoms`

flex-grow-0 flex-grow

`$flex-grow-atoms--breakpoints`

flex-grow-0--sm flex-grow-0--md flex-grow-0--lg flex-grow-0--xl flex-grow--sm flex-grow--md flex-grow--lg flex-grow--xl

`$flex-grow-atoms--states`

flex-grow-0--active flex-grow-0--hover flex-grow-0--focus flex-grow-0--disabled flex-grow-0--enabled flex-grow--active flex-grow--hover flex-grow--focus flex-grow--disabled flex-grow--enabled

`$flex-shrink-atoms`

flex-shrink-0 flex-shrink

`$flex-shrink-atoms--breakpoints`

flex-shrink-0--sm flex-shrink-0--md flex-shrink-0--lg flex-shrink-0--xl flex-shrink--sm flex-shrink--md flex-shrink--lg flex-shrink--xl

`$flex-shrink-atoms--states`

flex-shrink-0--active flex-shrink-0--hover flex-shrink-0--focus flex-shrink-0--disabled flex-shrink-0--enabled flex-shrink--active flex-shrink--hover flex-shrink--focus flex-shrink--disabled flex-shrink--enabled

`$flex-wrap-atoms`

flex-wrap flex-wrap-reverse flex-nowrap

`$flex-wrap-atoms--breakpoints`

flex-wrap--sm flex-wrap--md flex-wrap--lg flex-wrap--xl flex-wrap-reverse--sm flex-wrap-reverse--md flex-wrap-reverse--lg flex-wrap-reverse--xl flex-nowrap--sm flex-nowrap--md flex-nowrap--lg flex-nowrap--xl

`$flex-wrap-atoms--states`

flex-wrap--active flex-wrap--hover flex-wrap--focus flex-wrap--disabled flex-wrap--enabled flex-wrap-reverse--active flex-wrap-reverse--hover flex-wrap-reverse--focus flex-wrap-reverse--disabled flex-wrap-reverse--enabled flex-nowrap--active flex-nowrap--hover flex-nowrap--focus flex-nowrap--disabled flex-nowrap--enabled

`$float-atoms`

float-left float-right float-none

`$float-atoms--breakpoints`

float-left--sm float-left--md float-left--lg float-left--xl float-right--sm float-right--md float-right--lg float-right--xl float-none--sm float-none--md float-none--lg float-none--xl

`$float-atoms--states`

float-left--active float-left--hover float-left--focus float-left--disabled float-left--enabled float-right--active float-right--hover float-right--focus float-right--disabled float-right--enabled float-none--active float-none--hover float-none--focus float-none--disabled float-none--enabled

`$font-family-atoms`

font-sans font-serif font-mono

`$font-family-atoms--breakpoints`

font-sans--sm font-sans--md font-sans--lg font-sans--xl font-serif--sm font-serif--md font-serif--lg font-serif--xl font-mono--sm font-mono--md font-mono--lg font-mono--xl

`$font-family-atoms--states`

font-sans--active font-sans--hover font-sans--focus font-sans--disabled font-sans--enabled font-serif--active font-serif--hover font-serif--focus font-serif--disabled font-serif--enabled font-mono--active font-mono--hover font-mono--focus font-mono--disabled font-mono--enabled

`$font-weight-atoms`

font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900 font-thin font-light font-semilight font-normal font-medium font-semibold font-bold font-extrabold font-thick

`$font-weight-atoms--breakpoints`

font-100--sm font-100--md font-100--lg font-100--xl font-200--sm font-200--md font-200--lg font-200--xl font-300--sm font-300--md font-300--lg font-300--xl font-400--sm font-400--md font-400--lg font-400--xl font-500--sm font-500--md font-500--lg font-500--xl font-600--sm font-600--md font-600--lg font-600--xl font-700--sm font-700--md font-700--lg font-700--xl font-800--sm font-800--md font-800--lg font-800--xl font-900--sm font-900--md font-900--lg font-900--xl font-thin--sm font-thin--md font-thin--lg font-thin--xl font-light--sm font-light--md font-light--lg font-light--xl font-semilight--sm font-semilight--md font-semilight--lg font-semilight--xl font-normal--sm font-normal--md font-normal--lg font-normal--xl font-medium--sm font-medium--md font-medium--lg font-medium--xl font-semibold--sm font-semibold--md font-semibold--lg font-semibold--xl font-bold--sm font-bold--md font-bold--lg font-bold--xl font-extrabold--sm font-extrabold--md font-extrabold--lg font-extrabold--xl font-thick--sm font-thick--md font-thick--lg font-thick--xl

`$font-weight-atoms--states`

font-100--active font-100--hover font-100--focus font-100--disabled font-100--enabled font-200--active font-200--hover font-200--focus font-200--disabled font-200--enabled font-300--active font-300--hover font-300--focus font-300--disabled font-300--enabled font-400--active font-400--hover font-400--focus font-400--disabled font-400--enabled font-500--active font-500--hover font-500--focus font-500--disabled font-500--enabled font-600--active font-600--hover font-600--focus font-600--disabled font-600--enabled font-700--active font-700--hover font-700--focus font-700--disabled font-700--enabled font-800--active font-800--hover font-800--focus font-800--disabled font-800--enabled font-900--active font-900--hover font-900--focus font-900--disabled font-900--enabled font-thin--active font-thin--hover font-thin--focus font-thin--disabled font-thin--enabled font-light--active font-light--hover font-light--focus font-light--disabled font-light--enabled font-semilight--active font-semilight--hover font-semilight--focus font-semilight--disabled font-semilight--enabled font-normal--active font-normal--hover font-normal--focus font-normal--disabled font-normal--enabled font-medium--active font-medium--hover font-medium--focus font-medium--disabled font-medium--enabled font-semibold--active font-semibold--hover font-semibold--focus font-semibold--disabled font-semibold--enabled font-bold--active font-bold--hover font-bold--focus font-bold--disabled font-bold--enabled font-extrabold--active font-extrabold--hover font-extrabold--focus font-extrabold--disabled font-extrabold--enabled font-thick--active font-thick--hover font-thick--focus font-thick--disabled font-thick--enabled

`$grid-columns-atoms`

col-auto col-span-1 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-span-10 col-span-11 col-span-12 col-span-full

`$grid-columns-atoms--breakpoints`

col-auto--sm col-auto--md col-auto--lg col-auto--xl col-span-1--sm col-span-1--md col-span-1--lg col-span-1--xl col-span-2--sm col-span-2--md col-span-2--lg col-span-2--xl col-span-3--sm col-span-3--md col-span-3--lg col-span-3--xl col-span-4--sm col-span-4--md col-span-4--lg col-span-4--xl col-span-5--sm col-span-5--md col-span-5--lg col-span-5--xl col-span-6--sm col-span-6--md col-span-6--lg col-s F438 pan-6--xl col-span-7--sm col-span-7--md col-span-7--lg col-span-7--xl col-span-8--sm col-span-8--md col-span-8--lg col-span-8--xl col-span-9--sm col-span-9--md col-span-9--lg col-span-9--xl col-span-10--sm col-span-10--md col-span-10--lg col-span-10--xl col-span-11--sm col-span-11--md col-span-11--lg col-span-11--xl col-span-12--sm col-span-12--md col-span-12--lg col-span-12--xl col-span-full--sm col-span-full--md col-span-full--lg col-span-full--xl

`$grid-columns-atoms--states`

col-auto--active col-auto--hover col-auto--focus col-auto--disabled col-auto--enabled col-span-1--active col-span-1--hover col-span-1--focus col-span-1--disabled col-span-1--enabled col-span-2--active col-span-2--hover col-span-2--focus col-span-2--disabled col-span-2--enabled col-span-3--active col-span-3--hover col-span-3--focus col-span-3--disabled col-span-3--enabled col-span-4--active col-span-4--hover col-span-4--focus col-span-4--disabled col-span-4--enabled col-span-5--active col-span-5--hover col-span-5--focus col-span-5--disabled col-span-5--enabled col-span-6--active col-span-6--hover col-span-6--focus col-span-6--disabled col-span-6--enabled col-span-7--active col-span-7--hover col-span-7--focus col-span-7--disabled col-span-7--enabled col-span-8--active col-span-8--hover col-span-8--focus col-span-8--disabled col-span-8--enabled col-span-9--active col-span-9--hover col-span-9--focus col-span-9--disabled col-span-9--enabled col-span-10--active col-span-10--hover col-span-10--focus col-span-10--disabled col-span-10--enabled col-span-11--active col-span-11--hover col-span-11--focus col-span-11--disabled col-span-11--enabled col-span-12--active col-span-12--hover col-span-12--focus col-span-12--disabled col-span-12--enabled col-span-full--active col-span-full--hover col-span-full--focus col-span-full--disabled col-span-full--enabled

`$grid-rows-atoms`

row-auto row-span-1 row-span-2 row-span-3 row-span-4 row-span-5 row-span-6 row-span-full

`$grid-rows-atoms--breakpoints`

row-auto--sm row-auto--md row-auto--lg row-auto--xl row-span-1--sm row-span-1--md row-span-1--lg row-span-1--xl row-span-2--sm row-span-2--md row-span-2--lg row-span-2--xl row-span-3--sm row-span-3--md row-span-3--lg row-span-3--xl row-span-4--sm row-span-4--md row-span-4--lg row-span-4--xl row-span-5--sm row-span-5--md row-span-5--lg row-span-5--xl row-span-6--sm row-span-6--md row-span-6--lg row-span-6--xl row-span-full--sm row-span-full--md row-span-full--lg row-span-full--xl

`$grid-rows-atoms--states`

row-auto--active row-auto--hover row-auto--focus row-auto--disabled row-auto--enabled row-span-1--active row-span-1--hover row-span-1--focus row-span-1--disabled row-span-1--enabled row-span-2--active row-span-2--hover row-span-2--focus row-span-2--disabled row-span-2--enabled row-span-3--active row-span-3--hover row-span-3--focus row-span-3--disabled row-span-3--enabled row-span-4--active row-span-4--hover row-span-4--focus row-span-4--disabled row-span-4--enabled row-span-5--active row-span-5--hover row-span-5--focus row-span-5--disabled row-span-5--enabled row-span-6--active row-span-6--hover row-span-6--focus row-span-6--disabled row-span-6--enabled row-span-full--active row-span-full--hover row-span-full--focus row-span-full--disabled row-span-full--enabled

`$grid-template-columns-atoms`

grid-cols-1 grid-cols-2 grid-cols-3 grid-cols-4 grid-cols-5 grid-cols-6 grid-cols-7 grid-cols-8 grid-cols-9 grid-cols-10 grid-cols-11 grid-cols-12 grid-cols-none

`$grid-template-columns-atoms--breakpoints`

grid-cols-1--sm grid-cols-1--md grid-cols-1--lg grid-cols-1--xl grid-cols-2--sm grid-cols-2--md grid-cols-2--lg grid-cols-2--xl grid-cols-3--sm grid-cols-3--md grid-cols-3--lg grid-cols-3--xl grid-cols-4--sm grid-cols-4--md grid-cols-4--lg grid-cols-4--xl grid-cols-5--sm grid-cols-5--md grid-cols-5--lg grid-cols-5--xl grid-cols-6--sm grid-cols-6--md grid-cols-6--lg grid-cols-6--xl grid-cols-7--sm grid-cols-7--md grid-cols-7--lg grid-cols-7--xl grid-cols-8--sm grid-cols-8--md grid-cols-8--lg grid-cols-8--xl grid-cols-9--sm grid-cols-9--md grid-cols-9--lg grid-cols-9--xl grid-cols-10--sm grid-cols-10--md grid-cols-10--lg grid-cols-10--xl grid-cols-11--sm grid-cols-11--md grid-cols-11--lg grid-cols-11--xl grid-cols-12--sm grid-cols-12--md grid-cols-12--lg grid-cols-12--xl grid-cols-none--sm grid-cols-none--md grid-cols-none--lg grid-cols-none--xl

`$grid-template-columns-atoms--states`

grid-cols-1--active grid-cols-1--hover grid-cols-1--focus grid-cols-1--disabled grid-cols-1--enabled grid-cols-2--active grid-cols-2--hover grid-cols-2--focus grid-cols-2--disabled grid-cols-2--enabled grid-cols-3--active grid-cols-3--hover grid-cols-3--focus grid-cols-3--disabled grid-cols-3--enabled grid-cols-4--active grid-cols-4--hover grid-cols-4--focus grid-cols-4--disabled grid-cols-4--enabled grid-cols-5--active grid-cols-5--hover grid-cols-5--focus grid-cols-5--disabled grid-cols-5--enabled grid-cols-6--active grid-cols-6--hover grid-cols-6--focus grid-cols-6--disabled grid-cols-6--enabled grid-cols-7--active grid-cols-7--hover grid-cols-7--focus grid-cols-7--disabled grid-cols-7--enabled grid-cols-8--active grid-cols-8--hover grid-cols-8--focus grid-cols-8--disabled grid-cols-8--enabled grid-cols-9--active grid-cols-9--hover grid-cols-9--focus grid-cols-9--disabled grid-cols-9--enabled grid-cols-10--active grid-cols-10--hover grid-cols-10--focus grid-cols-10--disabled grid-cols-10--enabled grid-cols-11--active grid-cols-11--hover grid-cols-11--focus grid-cols-11--disabled grid-cols-11--enabled grid-cols-12--active grid-cols-12--hover grid-cols-12--focus grid-cols-12--disabled grid-cols-12--enabled grid-cols-none--active grid-cols-none--hover grid-cols-none--focus grid-cols-none--disabled grid-cols-none--enabled

`$grid-template-rows-atoms`

grid-rows-1 grid-rows-2 grid-rows-3 grid-rows-4 grid-rows-5 grid-rows-6 grid-rows-none

`$grid-template-rows-atoms--breakpoints`

grid-rows-1--sm grid-rows-1--md grid-rows-1--lg grid-rows-1--xl grid-rows-2--sm grid-rows-2--md grid-rows-2--lg grid-rows-2--xl grid-rows-3--sm grid-rows-3--md grid-rows-3--lg grid-rows-3--xl grid-rows-4--sm grid-rows-4--md grid-rows-4--lg grid-rows-4--xl grid-rows-5--sm grid-rows-5--md grid-rows-5--lg grid-rows-5--xl grid-rows-6--sm grid-rows-6--md grid-rows-6--lg grid-rows-6--xl grid-rows-none--sm grid-rows-none--md grid-rows-none--lg grid-rows-none--xl

`$grid-template-rows-atoms--states`

grid-rows-1--active grid-rows-1--hover grid-rows-1--focus grid-rows-1--disabled grid-rows-1--enabled grid-rows-2--active grid-rows-2--hover grid-rows-2--focus grid-rows-2--disabled grid-rows-2--enabled grid-rows-3--active grid-rows-3--hover grid-rows-3--focus grid-rows-3--disabled grid-rows-3--enabled grid-rows-4--active grid-rows-4--hover grid-rows-4--focus grid-rows-4--disabled grid-rows-4--enabled grid-rows-5--active grid-rows-5--hover grid-rows-5--focus grid-rows-5--disabled grid-rows-5--enabled grid-rows-6--active grid-rows-6--hover grid-rows-6--focus grid-rows-6--disabled grid-rows-6--enabled grid-rows-none--active grid-rows-none--hover grid-rows-none--focus grid-rows-none--disabled grid-rows-none--enabled

`$height-atoms`

h-0 h-vh0 h-vh1 h-vh2 h-vh3 h-vh4 h-vh5 h-vh6 h-vh7 h-vh8 h-vh9 h-vh10 h-vh11 h-vh12 h-p0 h-p1 h-p2 h-p3 h-p4 h-p5 h-p6 h-p7 h-p8 h-p9 h-p10 h-p11 h-p12

`$height-atoms--breakpoints`

h-0--sm h-0--md h-0--lg h-0--xl h-vh0--sm h-vh0--md h-vh0--lg h-vh0--xl h-vh1--sm h-vh1--md h-vh1--lg h-vh1--xl h-vh2--sm h-vh2--md h-vh2--lg h-vh2--xl h-vh3--sm h-vh3--md h-vh3--lg h-vh3--xl h-vh4--sm h-vh4--md h-vh4--lg h-vh4--xl h-vh5--sm h-vh5--md h-vh5--lg h-vh5--xl h-vh6--sm h-vh6--md h-vh6--lg h-vh6--xl h-vh7--sm h-vh7--md h-vh7--lg h-vh7--xl h-vh8--sm h-vh8--md h-vh8--lg h-vh8--xl h-vh9--sm h-vh9--md h-vh9--lg h-vh9--xl h-vh10--sm h-vh10--md h-vh10--lg h-vh10--xl h-vh11--sm h-vh11--md h-vh11--lg h-vh11--xl h-vh12--sm h-vh12--md h-vh12--lg h-vh12--xl h-p0--sm h-p0--md h-p0--lg h-p0--xl h-p1--sm h-p1--md h-p1--lg h-p1--xl h-p2--sm h-p2--md h-p2--lg h-p2--xl h-p3--sm h-p3--md h-p3--lg h-p3--xl h-p4--sm h-p4--md h-p4--lg h-p4--xl h-p5--sm h-p5--md h-p5--lg h-p5--xl h-p6--sm h-p6--md h-p6--lg h-p6--xl h-p7--sm h-p7--md h-p7--lg h-p7--xl h-p8--sm h-p8--md h-p8--lg h-p8--xl h-p9--sm h-p9--md h-p9--lg h-p9--xl h-p10--sm h-p10--md h-p10--lg h-p10--xl h-p11--sm h-p11--md h-p11--lg h-p11--xl h-p12--sm h-p12--md h-p12--lg h-p12--xl

`$height-atoms--states`

h-0--active h-0--hover h-0--focus h-0--disabled h-0--enabled h-vh0--active h-vh0--hover h-vh0--focus h-vh0--disabled h-vh0--enabled h-vh1--active h-vh1--hover h-vh1--focus h-vh1--disabled h-vh1--enabled h-vh2--active h-vh2--hover h-vh2--focus h-vh2--disabled h-vh2--enabled h-vh3--active h-vh3--hover h-vh3--focus h-vh3--disabled h-vh3--enabled h-vh4--active h-vh4--hover h-vh4--focus h-vh4--disabled h-vh4--enabled h-vh5--active h-vh5--hover h-vh5--focus h-vh5--disabled h-vh5--enabled h-vh6--active h-vh6--hover h-vh6--focus h-vh6--disabled h-vh6--enabled h-vh7--active h-vh7--hover h-vh7--focus h-vh7--disabled h-vh7--enabled h-vh8--active h-vh8--hover h-vh8--focus h-vh8--disabled h-vh8--enabled h-vh9--active h-vh9--hover h-vh9--focus h-vh9--disabled h-vh9--enabled h-vh10--active h-vh10--hover h-vh10--focus h-vh10--disabled h-vh10--enabled h-vh11--active h-vh11--hover h-vh11--focus h-vh11--disabled h-vh11--enabled h-vh12--active h-vh12--hover h-vh12--focus h-vh12--disabled h-vh12--enabled h-p0--active h-p0--hover h-p0--focus h-p0--disabled h-p0--enabled h-p1--active h-p1--hover h-p1--focus h-p1--disabled h-p1--enabled h-p2--active h-p2--hover h-p2--focus h-p2--disabled h-p2--enabled h-p3--active h-p3--hover h-p3--focus h-p3--disabled h-p3--enabled h-p4--active h-p4--hover h-p4--focus h-p4--disabled h-p4--enabled h-p5--active h-p5--hover h-p5--focus h-p5--disabled h-p5--enabled h-p6--active h-p6--hover h-p6--focus h-p6--disabled h-p6--enabled h-p7--active h-p7--hover h-p7--focus h-p7--disabled h-p7--enabled h-p8--active h-p8--hover h-p8--focus h-p8--disabled h-p8--enabled h-p9--active h-p9--hover h-p9--focus h-p9--disabled h-p9--enabled h-p10--active h-p10--hover h-p10--focus h-p10--disabled h-p10--enabled h-p11--active h-p11--hover h-p11--focus h-p11--disabled h-p11--enabled h-p12--active h-p12--hover h-p12--focus h-p12--disabled h-p12--enabled

`$min-height-atoms`

hmin-0 hmin-vh0 hmin-vh1 hmin-vh2 hmin-vh3 hmin-vh4 hmin-vh5 hmin-vh6 hmin-vh7 hmin-vh8 hmin-vh9 hmin-vh10 hmin-vh11 hmin-vh12 hmin-p0 hmin-p1 hmin-p2 hmin-p3 hmin-p4 hmin-p5 hmin-p6 hmin-p7 hmin-p8 hmin-p9 hmin-p10 hmin-p11 hmin-p12

`$min-height-atoms--breakpoints`

hmin-0--sm hmin-0--md hmin-0--lg hmin-0--xl hmin-vh0--sm hmin-vh0--md hmin-vh0--lg hmin-vh0--xl hmin-vh1--sm hmin-vh1--md hmin-vh1--lg hmin-vh1--xl hmin-vh2--sm hmin-vh2--md hmin-vh2--lg hmin-vh2--xl hmin-vh3--sm hmin-vh3--md hmin-vh3--lg hmin-vh3--xl hmin-vh4--sm hmin-vh4--md hmin-vh4--lg hmin-vh4--xl hmin-vh5--sm hmin-vh5--md hmin-vh5--lg hmin-vh5--xl hmin-vh6--sm hmin-vh6--md hmin-vh6--lg hmin-vh6--xl hmin-vh7--sm hmin-vh7--md hmin-vh7--lg hmin-vh7--xl hmin-vh8--sm hmin-vh8--md hmin-vh8--lg hmin-vh8--xl hmin-vh9--sm hmin-vh9--md hmin-vh9--lg hmin-vh9--xl hmin-vh10--sm hmin-vh10--md hmin-vh10--lg hmin-vh10--xl hmin-vh11--sm hmin-vh11--md hmin-vh11--lg hmin-vh11--xl hmin-vh12--sm hmin-vh12--md hmin-vh12--lg hmin-vh12--xl hmin-p0--sm hmin-p0--md hmin-p0--lg hmin-p0--xl hmin-p1--sm hmin-p1--md hmin-p1--lg hmin-p1--xl hmin-p2--sm hmin-p2--md hmin-p2--lg hmin-p2--xl hmin-p3--sm hmin-p3--md hmin-p3--lg hmin-p3--xl hmin-p4--sm hmin-p4--md hmin-p4--lg hmin-p4--xl hmin-p5--sm hmin-p5--md hmin-p5--lg hmin-p5--xl hmin-p6--sm hmin-p6--md hmin-p6--lg hmin-p6--xl hmin-p7--sm hmin-p7--md hmin-p7--lg hmin-p7--xl hmin-p8--sm hmin-p8--md hmin-p8--lg hmin-p8--xl hmin-p9--sm hmin-p9--md hmin-p9--lg hmin-p9--xl hmin-p10--sm hmin-p10--md hmin-p10--lg hmin-p10--xl hmin-p11--sm hmin-p11--md hmin-p11--lg hmin-p11--xl hmin-p12--sm hmin-p12--md hmin-p12--lg hmin-p12--xl

`$min-height-atoms--states`

hmin-0--active hmin-0--hover hmin-0--focus hmin-0--disabled hmin-0--enabled hmin-vh0--active hmin-vh0--hover hmin-vh0--focus hmin-vh0--disabled hmin-vh0--enabled hmin-vh1--active hmin-vh1--hover hmin-vh1--focus hmin-vh1--disabled hmin-vh1--enabled hmin-vh2--active hmin-vh2--hover hmin-vh2--focus hmin-vh2--disabled hmin-vh2--enabled hmin-vh3--active hmin-vh3--hover hmin-vh3--focus hmin-vh3--disabled hmin-vh3--enabled hmin-vh4--active hmin-vh4--hover hmin-vh4--focus hmin-vh4--disabled hmin-vh4--enabled hmin-vh5--active hmin-vh5--hover hmin-vh5--focus hmin-vh5--disabled hmin-vh5--enabled hmin-vh6--active hmin-vh6--hover hmin-vh6--focus hmin-vh6--disabled hmin-vh6--enabled hmin-vh7--active hmin-vh7--hover hmin-vh7--focus hmin-vh7--disabled hmin-vh7--enabled hmin-vh8--active hmin-vh8--hover hmin-vh8--focus hmin-vh8--disabled hmin-vh8--enabled hmin-vh9--active hmin-vh9--hover hmin-vh9--focus hmin-vh9--disabled hmin-vh9--enabled hmin-vh10--active hmin-vh10--hover hmin-vh10--focus hmin-vh10--disabled hmin-vh10--enabled hmin-vh11--active hmin-vh11--hover hmin-vh11--focus hmin-vh11--disabled hmin-vh11--enabled hmin-vh12--active hmin-vh12--hover hmin-vh12--focus hmin-vh12--disabled hmin-vh12--enabled hmin-p0--active hmin-p0--hover hmin-p0--focus hmin-p0--disabled hmin-p0--enabled hmin-p1--active hmin-p1--hover hmin-p1--focus hmin-p1--disabled hmin-p1--enabled hmin-p2--active hmin-p2--hover hmin-p2--focus hmin-p2--disabled hmin-p2--enabled hmin-p3--active hmin-p3--hover hmin-p3--focus hmin-p3--disabled hmin-p3--enabled hmin-p4--active hmin-p4--hover hmin-p4--focus hmin-p4--disabled hmin-p4--enabled hmin-p5--active hmin-p5--hover hmin-p5--focus hmin-p5--disabled hmin-p5--enabled hmin-p6--active hmin-p6--hover hmin-p6--focus hmin-p6--disabled hmin-p6--enabled hmin-p7--active hmin-p7--hover hmin-p7--focus hmin-p7--disabled hmin-p7--enabled hmin-p8--active hmin-p8--hover hmin-p8--focus hmin-p8--disabled hmin-p8--enabled hmin-p9--active hmin-p9--hover hmin-p9--focus hmin-p9--disabled hmin-p9--enabled hmin-p10--active hmin-p10--hover hmin-p10--focus hmin-p10--disabled hmin-p10--enabled hmin-p11--active hmin-p11--hover hmin-p11--focus hmin-p11--disabled hmin-p11--enabled hmin-p12--active hmin-p12--hover hmin-p12--focus hmin-p12--disabled hmin-p12--enabled

`$max-height-atoms`

hmax-0 hmax-vh0 hmax-vh1 hmax-vh2 hmax-vh3 hmax-vh4 hmax-vh5 hmax-vh6 hmax-vh7 hmax-vh8 hmax-vh9 hmax-vh10 hmax-vh11 hmax-vh12 hmax-p0 hmax-p1 hmax-p2 hmax-p3 hmax-p4 hmax-p5 hmax-p6 hmax-p7 hmax-p8 hmax-p9 hmax-p10 hmax-p11 hmax-p12

`$max-height-atoms--breakpoints`

hmax-0--sm hmax-0--md hmax-0--lg hmax-0--xl hmax-vh0--sm hmax-vh0--md hmax-vh0--lg hmax-vh0--xl hmax-vh1--sm hmax-vh1--md hmax-vh1--lg hmax-vh1--xl hmax-vh2--sm hmax-vh2--md hmax-vh2--lg hmax-vh2--xl hmax-vh3--sm hmax-vh3--md hmax-vh3--lg hmax-vh3--xl hmax-vh4--sm hmax-vh4--md hmax-vh4--lg hmax-vh4--xl hmax-vh5--sm hmax-vh5--md hmax-vh5--lg hmax-vh5--xl hmax-vh6--sm hmax-vh6--md hmax-vh6--lg hmax-vh6--xl hmax-vh7--sm hmax-vh7--md hmax-vh7--lg hmax-vh7--xl hmax-vh8--sm hmax-vh8--md hmax-vh8--lg hmax-vh8--xl hmax-vh9--sm hmax-vh9--md hmax-vh9--lg hmax-vh9--xl hmax-vh10--sm hmax-vh10--md hmax-vh10--lg hmax-vh10--xl hmax-vh11--sm hmax-vh11--md hmax-vh11--lg hmax-vh11--xl hmax-vh12--sm hmax-vh12--md hmax-vh12--lg hmax-vh12--xl hmax-p0--sm hmax-p0--md hmax-p0--lg hmax-p0--xl hmax-p1--sm hmax-p1--md hmax-p1--lg hmax-p1--xl hmax-p2--sm hmax-p2--md hmax-p2--lg hmax-p2--xl hmax-p3--sm hmax-p3--md hmax-p3--lg hmax-p3--xl hmax-p4--sm hmax-p4--md hmax-p4--lg hmax-p4--xl hmax-p5--sm hmax-p5--md hmax-p5--lg hmax-p5--xl hmax-p6--sm hmax-p6--md hmax-p6--lg hmax-p6--xl hmax-p7--sm hmax-p7--md hmax-p7--lg hmax-p7--xl hmax-p8--sm hmax-p8--md hmax-p8--lg hmax-p8--xl hmax-p9--sm hmax-p9--md hmax-p9--lg hmax-p9--xl hmax-p10--sm hmax-p10--md hmax-p10--lg hmax-p10--xl hmax-p11--sm hmax-p11--md hmax-p11--lg hmax-p11--xl hmax-p12--sm hmax-p12--md hmax-p12--lg hmax-p12--xl

`$max-height-atoms--states`

hmax-0--active hmax-0--hover hmax-0--focus hmax-0--disabled hmax-0--enabled hmax-vh0--active hmax-vh0--hover hmax-vh0--focus hmax-vh0--disabled hmax-vh0--enabled hmax-vh1--active hmax-vh1--hover hmax-vh1--focus hmax-vh1--disabled hmax-vh1--enabled hmax-vh2--active hmax-vh2--hover hmax-vh2--focus hmax-vh2--disabled hmax-vh2--enabled hmax-vh3--active hmax-vh3--hover hmax-vh3--focus hmax-vh3--disabled hmax-vh3--enabled hmax-vh4--active hmax-vh4--hover hmax-vh4--focus hmax-vh4--disabled hmax-vh4--enabled hmax-vh5--active hmax-vh5--hover hmax-vh5--focus hmax-vh5--disabled hmax-vh5--enabled hmax-vh6--active hmax-vh6--hover hmax-vh6--focus hmax-vh6--disabled hmax-vh6--enabled hmax-vh7--active hmax-vh7--hover hmax-vh7--focus hmax-vh7--disabled hmax-vh7--enabled hmax-vh8--active hmax-vh8--hover hmax-vh8--focus hmax-vh8--disabled hmax-vh8--enabled hmax-vh9--active hmax-vh9--hover hmax-vh9--focus hmax-vh9--disabled hmax-vh9--enabled hmax-vh10--active hmax-vh10--hover hmax-vh10--focus hmax-vh10--disabled hmax-vh10--enabled hmax-vh11--active hmax-vh11--hover hmax-vh11--focus hmax-vh11--disabled hmax-vh11--enabled hmax-vh12--active hmax-vh12--hover hmax-vh12--focus hmax-vh12--disabled hmax-vh12--enabled hmax-p0--active hmax-p0--hover hmax-p0--focus hmax-p0--disabled hmax-p0--enabled hmax-p1--active hmax-p1--hover hmax-p1--focus hmax-p1--disabled hmax-p1--enabled hmax-p2--active hmax-p2--hover hmax-p2--focus hmax-p2--disabled hmax-p2--enabled hmax-p3--active hmax-p3--hover hmax-p3--focus hmax-p3--disabled hmax-p3--enabled hmax-p4--active hmax-p4--hover hmax-p4--focus hmax-p4--disabled hmax-p4--enabled hmax-p5--active hmax-p5--hover hmax-p5--focus hmax-p5--disabled hmax-p5--enabled hmax-p6--active hmax-p6--hover hmax-p6--focus hmax-p6--disabled hmax-p6--enabled hmax-p7--active hmax-p7--hover hmax-p7--focus hmax-p7--disabled hmax-p7--enabled hmax-p8--active hmax-p8--hover hmax-p8--focus hmax-p8--disabled hmax-p8--enabled hmax-p9--active hmax-p9--hover hmax-p9--focus hmax-p9--disabled hmax-p9--enabled hmax-p10--active hmax-p10--hover hmax-p10--focus hmax-p10--disabled hmax-p10--enabled hmax-p11--active hmax-p11--hover hmax-p11--focus hmax-p11--disabled hmax-p11--enabled hmax-p12--active hmax-p12--hover hmax-p12--focus hmax-p12--disabled hmax-p12--enabled

`$justify-content-atoms`

justify-start justify-end justify-center justify-between justify-around justify-evenly

`$justify-content-atoms--breakpoints`

justify-start--sm justify-start--md justify-start--lg justify-start--xl justify-end--sm justify-end--md justify-end--lg justify-end--xl justify-center--sm justify-center--md justify-center--lg justify-center--xl justify-between--sm justify-between--md justify-between--lg justify-between--xl justify-around--sm justify-around--md justify-around--lg justify-around--xl justify-evenly--sm justify-evenly--md justify-evenly--lg justify-evenly--xl

`$justify-content-atoms--states`

justify-start--active justify-start--hover justify-start--focus justify-start--disabled justify-start--enabled justify-end--active justify-end--hover justify-end--focus justify-end--disabled justify-end--enabled justify-center--active justify-center--hover justify-center--focus justify-center--disabled justify-center--enabled justify-between--active justify-between--hover justify-between--focus justify-between--disabled justify-between--enabled justify-around--active justify-around--hover justify-around--focus justify-around--disabled justify-around--enabled justify-evenly--active justify-evenly--hover justify-evenly--focus justify-evenly--disabled justify-evenly--enabled

`$justify-items-atoms`

justify-items-auto justify-items-start justify-items-end justify-items-center justify-items-stretch

`$justify-items-atoms--breakpoints`

justify-items-auto--sm justify-items-auto--md justify-items-auto--lg justify-items-auto--xl justify-items-start--sm justify-items-start--md justify-items-start--lg justify-items-start--xl justify-items-end--sm justify-items-end--md justify-items-end--lg justify-items-end--xl justify-items-center--sm justify-items-center--md justify-items-center--lg justify-items-center--xl justify-items-stretch--sm justify-items-stretch--md justify-items-stretch--lg justify-items-stretch--xl

`$justify-items-atoms`

justify-items-auto justify-items-start justify-items-end justify-items-center justify-items-stretch

`$justify-self-atoms`

justify-self-auto justify-self-start justify-self-end justify-self-center justify-self-stretch

`$justify-self-atoms--breakpoints`

justify-self-auto--sm justify-self-auto--md justify-self-auto--lg justify-self-auto--xl justify-self-start--sm justify-self-start--md justify-self-start--lg justify-self-start--xl justify-self-end--sm justify-self-end--md justify-self-end--lg justify-self-end--xl justify-self-center--sm justify-self-center--md justify-self-center--lg justify-self-center--xl justify-self-stretch--sm justify-self-stretch--md justify-self-stretch--lg justify-self-stretch--xl

`$justify-self-atoms--states`

justify-self-auto--active justify-self-auto--hover justify-self-auto--focus justify-self-auto--disabled justify-self-auto--enabled justify-self-start--active justify-self-start--hover justify-self-start--focus justify-self-start--disabled justify-self-start--enabled justify-self-end--active justify-self-end--hover justify-self-end--focus justify-self-end--disabled justify-self-end--enabled justify-self-center--active justify-self-center--hover justify-self-center--focus justify-self-center--disabled justify-self-center--enabled justify-self-stretch--active justify-self-stretch--hover justify-self-stretch--focus justify-self-stretch--disabled justify-self-stretch--enabled

`$margin-atoms`

m-0 m-1 m-2 m-3 m-4 m-5 m-6

`$margin-atoms--breakpoints`

m-0--sm m-0--md m-0--lg m-0--xl m-1--sm m-1--md m-1--lg m-1--xl m-2--sm m-2--md m-2--lg m-2--xl m-3--sm m-3--md m-3--lg m-3--xl m-4--sm m-4--md m-4--lg m-4--xl m-5--sm m-5--md m-5--lg m-5--xl m-6--sm m-6--md m-6--lg m-6--xl

`$margin-atoms--states`

m-0--active m-0--hover m-0--focus m-0--disabled m-0--enabled m-1--active m-1--hover m-1--focus m-1--disabled m-1--enabled m-2--active m-2--hover m-2--focus m-2--disabled m-2--enabled m-3--active m-3--hover m-3--focus m-3--disabled m-3--enabled m-4--active m-4--hover m-4--focus m-4--disabled m-4--enabled m-5--active m-5--hover m-5--focus m-5--disabled m-5--enabled m-6--active m-6--hover m-6--focus m-6--disabled m-6--enabled

`$margin-x-atoms`

mx-0 mx-1 mx-2 mx-3 mx-4 mx-5 mx-6

`$margin-x-atoms--breakpoints`

mx-0--sm mx-0--md mx-0--lg mx-0--xl mx-1--sm mx-1--md mx-1--lg mx-1--xl mx-2--sm mx-2--md mx-2--lg mx-2--xl mx-3--sm mx-3--md mx-3--lg mx-3--xl mx-4--sm mx-4--md mx-4--lg mx-4--xl mx-5--sm mx-5--md mx-5--lg mx-5--xl mx-6--sm mx-6--md mx-6--lg mx-6--xl

`$margin-x-atoms--states`

mx-0--active mx-0--hover mx-0--focus mx-0--disabled mx-0--enabled mx-1--active mx-1--hover mx-1--focus mx-1--disabled mx-1--enabled mx-2--active mx-2--hover mx-2--focus mx-2--disabled mx-2--enabled mx-3--active mx-3--hover mx-3--focus mx-3--disabled mx-3--enabled mx-4--active mx-4--hover mx-4--focus mx-4--disabled mx-4--enabled mx-5--active mx-5--hover mx-5--focus mx-5--disabled mx-5--enabled mx-6--active mx-6--hover mx-6--focus mx-6--disabled mx-6--enabled

`$margin-y-atoms`

my-0 my-1 my-2 my-3 my-4 my-5 my-6

`$margin-y-atoms--breakpoints`

my-0--sm my-0--md my-0--lg my-0--xl my-1--sm my-1--md my-1--lg my-1--xl my-2--sm my-2--md my-2--lg my-2--xl my-3--sm my-3--md my-3--lg my-3--xl my-4--sm my-4--md my-4--lg my-4--xl my-5--sm my-5--md my-5--lg my-5--xl my-6--sm my-6--md my-6--lg my-6--xl

`$margin-y-atoms--states`

my-0--active my-0--hover my-0--focus my-0--disabled my-0--enabled my-1--active my-1--hover my-1--focus my-1--disabled my-1--enabled my-2--active my-2--hover my-2--focus my-2--disabled my-2--enabled my-3--active my-3--hover my-3--focus my-3--disabled my-3--enabled my-4--active my-4--hover my-4--focus my-4--disabled my-4--enabled my-5--active my-5--hover my-5--focus my-5--disabled my-5--enabled my-6--active my-6--hover my-6--focus my-6--disabled my-6--enabled

`$margin-t-atoms`

mt-0 mt-1 mt-2 mt-3 mt-4 mt-5 mt-6

`$margin-t-atoms--breakpoints`

mt-0--sm mt-0--md mt-0--lg mt-0--xl mt-1--sm mt-1--md mt-1--lg mt-1--xl mt-2--sm mt-2--md mt-2--lg mt-2--xl mt-3--sm mt-3--md mt-3--lg mt-3--xl mt-4--sm mt-4--md mt-4--lg mt-4--xl mt-5--sm mt-5--md mt-5--lg mt-5--xl mt-6--sm mt-6--md mt-6--lg mt-6--xl

`$margin-t-atoms--states`

mt-0--active mt-0--hover mt-0--focus mt-0--disabled mt-0--enabled mt-1--active mt-1--hover mt-1--focus mt-1--disabled mt-1--enabled mt-2--active mt-2--hover mt-2--focus mt-2--disabled mt-2--enable 10000 d mt-3--active mt-3--hover mt-3--focus mt-3--disabled mt-3--enabled mt-4--active mt-4--hover mt-4--focus mt-4--disabled mt-4--enabled mt-5--active mt-5--hover mt-5--focus mt-5--disabled mt-5--enabled mt-6--active mt-6--hover mt-6--focus mt-6--disabled mt-6--enabled

`$margin-r-atoms`

mr-0 mr-1 mr-2 mr-3 mr-4 mr-5 mr-6

`$margin-r-atoms--breakpoints`

mr-0--sm mr-0--md mr-0--lg mr-0--xl mr-1--sm mr-1--md mr-1--lg mr-1--xl mr-2--sm mr-2--md mr-2--lg mr-2--xl mr-3--sm mr-3--md mr-3--lg mr-3--xl mr-4--sm mr-4--md mr-4--lg mr-4--xl mr-5--sm mr-5--md mr-5--lg mr-5--xl mr-6--sm mr-6--md mr-6--lg mr-6--xl

`$margin-r-atoms--states`

mr-0--active mr-0--hover mr-0--focus mr-0--disabled mr-0--enabled mr-1--active mr-1--hover mr-1--focus mr-1--disabled mr-1--enabled mr-2--active mr-2--hover mr-2--focus mr-2--disabled mr-2--enabled mr-3--active mr-3--hover mr-3--focus mr-3--disabled mr-3--enabled mr-4--active mr-4--hover mr-4--focus mr-4--disabled mr-4--enabled mr-5--active mr-5--hover mr-5--focus mr-5--disabled mr-5--enabled mr-6--active mr-6--hover mr-6--focus mr-6--disabled mr-6--enabled

`$margin-b-atoms`

mb-0 mb-1 mb-2 mb-3 mb-4 mb-5 mb-6

`$margin-b-atoms--breakpoints`

mb-0--sm mb-0--md mb-0--lg mb-0--xl mb-1--sm mb-1--md mb-1--lg mb-1--xl mb-2--sm mb-2--md mb-2--lg mb-2--xl mb-3--sm mb-3--md mb-3--lg mb-3--xl mb-4--sm mb-4--md mb-4--lg mb-4--xl mb-5--sm mb-5--md mb-5--lg mb-5--xl mb-6--sm mb-6--md mb-6--lg mb-6--xl

`$margin-b-atoms--states`

mb-0--active mb-0--hover mb-0--focus mb-0--disabled mb-0--enabled mb-1--active mb-1--hover mb-1--focus mb-1--disabled mb-1--enabled mb-2--active mb-2--hover mb-2--focus mb-2--disabled mb-2--enabled mb-3--active mb-3--hover mb-3--focus mb-3--disabled mb-3--enabled mb-4--active mb-4--hover mb-4--focus mb-4--disabled mb-4--enabled mb-5--active mb-5--hover mb-5--focus mb-5--disabled mb-5--enabled mb-6--active mb-6--hover mb-6--focus mb-6--disabled mb-6--enabled

`$margin-l-atoms`

ml-0 ml-1 ml-2 ml-3 ml-4 ml-5 ml-6

`$margin-l-atoms--breakpoints`

ml-0--sm ml-0--md ml-0--lg ml-0--xl ml-1--sm ml-1--md ml-1--lg ml-1--xl ml-2--sm ml-2--md ml-2--lg ml-2--xl ml-3--sm ml-3--md ml-3--lg ml-3--xl ml-4--sm ml-4--md ml-4--lg ml-4--xl ml-5--sm ml-5--md ml-5--lg ml-5--xl ml-6--sm ml-6--md ml-6--lg ml-6--xl

`$margin-l-atoms--states`

ml-0--active ml-0--hover ml-0--focus ml-0--disabled ml-0--enabled ml-1--active ml-1--hover ml-1--focus ml-1--disabled ml-1--enabled ml-2--active ml-2--hover ml-2--focus ml-2--disabled ml-2--enabled ml-3--active ml-3--hover ml-3--focus ml-3--disabled ml-3--enabled ml-4--active ml-4--hover ml-4--focus ml-4--disabled ml-4--enabled ml-5--active ml-5--hover ml-5--focus ml-5--disabled ml-5--enabled ml-6--active ml-6--hover ml-6--focus ml-6--disabled ml-6--enabled

`$object-fit-atoms`

obj-contain obj-cover obj-fill obj-none obj-scale-down

`$object-fit-atoms--breakpoints`

obj-contain--sm obj-contain--md obj-contain--lg obj-contain--xl obj-cover--sm obj-cover--md obj-cover--lg obj-cover--xl obj-fill--sm obj-fill--md obj-fill--lg obj-fill--xl obj-none--sm obj-none--md obj-none--lg obj-none--xl obj-scale-down--sm obj-scale-down--md obj-scale-down--lg obj-scale-down--xl

`$object-fit-atoms--states`

obj-contain--active obj-contain--hover obj-contain--focus obj-contain--disabled obj-contain--enabled obj-cover--active obj-cover--hover obj-cover--focus obj-cover--disabled obj-cover--enabled obj-fill--active obj-fill--hover obj-fill--focus obj-fill--disabled obj-fill--enabled obj-none--active obj-none--hover obj-none--focus obj-none--disabled obj-none--enabled obj-scale-down--active obj-scale-down--hover obj-scale-down--focus obj-scale-down--disabled obj-scale-down--enabled

`$object-position-atoms`

obj-top-left obj-top obj-top-right obj-left obj-center obj-right obj-bottom-left obj-bottom obj-bottom-right

`$object-position-atoms--breakpoints`

obj-top-left--sm obj-top-left--md obj-top-left--lg obj-top-left--xl obj-top--sm obj-top--md obj-top--lg obj-top--xl obj-top-right--sm obj-top-right--md obj-top-right--lg obj-top-right--xl obj-left--sm obj-left--md obj-left--lg obj-left--xl obj-center--sm obj-center--md obj-center--lg obj-center--xl obj-right--sm obj-right--md obj-right--lg obj-right--xl obj-bottom-left--sm obj-bottom-left--md obj-bottom-left--lg obj-bottom-left--xl obj-bottom--sm obj-bottom--md obj-bottom--lg obj-bottom--xl obj-bottom-right--sm obj-bottom-right--md obj-bottom-right--lg obj-bottom-right--xl

`$object-position-atoms--states`

obj-top-left--active obj-top-left--hover obj-top-left--focus obj-top-left--disabled obj-top-left--enabled obj-top--active obj-top--hover obj-top--focus obj-top--disabled obj-top--enabled obj-top-right--active obj-top-right--hover obj-top-right--focus obj-top-right--disabled obj-top-right--enabled obj-left--active obj-left--hover obj-left--focus obj-left--disabled obj-left--enabled obj-center--active obj-center--hover obj-center--focus obj-center--disabled obj-center--enabled obj-right--active obj-right--hover obj-right--focus obj-right--disabled obj-right--enabled obj-bottom-left--active obj-bottom-left--hover obj-bottom-left--focus obj-bottom-left--disabled obj-bottom-left--enabled obj-bottom--active obj-bottom--hover obj-bottom--focus obj-bottom--disabled obj-bottom--enabled obj-bottom-right--active obj-bottom-right--hover obj-bottom-right--focus obj-bottom-right--disabled obj-bottom-right--enabled

`$overflow-atoms`

overflow-auto overflow-hidden overflow-visible overflow-scroll

`$overflow-atoms--breakpoints`

overflow-auto--sm overflow-auto--md overflow-auto--lg overflow-auto--xl overflow-hidden--sm overflow-hidden--md overflow-hidden--lg overflow-hidden--xl overflow-visible--sm overflow-visible--md overflow-visible--lg overflow-visible--xl overflow-scroll--sm overflow-scroll--md overflow-scroll--lg overflow-scroll--xl

`$overflow-atoms--states`

overflow-auto--active overflow-auto--hover overflow-auto--focus overflow-auto--disabled overflow-auto--enabled overflow-hidden--active overflow-hidden--hover overflow-hidden--focus overflow-hidden--disabled overflow-hidden--enabled overflow-visible--active overflow-visible--hover overflow-visible--focus overflow-visible--disabled overflow-visible--enabled overflow-scroll--active overflow-scroll--hover overflow-scroll--focus overflow-scroll--disabled overflow-scroll--enabled

`$overflow-x-atoms`

overflow-x-auto overflow-x-hidden overflow-x-visible overflow-x-scroll

`$overflow-x-atoms--breakpoints`

overflow-x-auto--sm overflow-x-auto--md overflow-x-auto--lg overflow-x-auto--xl overflow-x-hidden--sm overflow-x-hidden--md overflow-x-hidden--lg overflow-x-hidden--xl overflow-x-visible--sm overflow-x-visible--md overflow-x-visible--lg overflow-x-visible--xl overflow-x-scroll--sm overflow-x-scroll--md overflow-x-scroll--lg overflow-x-scroll--xl

`$overflow-x-atoms--states`

overflow-x-auto--active overflow-x-auto--hover overflow-x-auto--focus overflow-x-auto--disabled overflow-x-auto--enabled overflow-x-hidden--active overflow-x-hidden--hover overflow-x-hidden--focus overflow-x-hidden--disabled overflow-x-hidden--enabled overflow-x-visible--active overflow-x-visible--hover overflow-x-visible--focus overflow-x-visible--disabled overflow-x-visible--enabled overflow-x-scroll--active overflow-x-scroll--hover overflow-x-scroll--focus overflow-x-scroll--disabled overflow-x-scroll--enabled

`$overflow-y-atoms`

overflow-y-auto overflow-y-hidden overflow-y-visible overflow-y-scroll

`$overflow-y-atoms--breakpoints`

overflow-y-auto--sm overflow-y-auto--md overflow-y-auto--lg overflow-y-auto--xl overflow-y-hidden--sm overflow-y-hidden--md overflow-y-hidden--lg overflow-y-hidden--xl overflow-y-visible--sm overflow-y-visible--md overflow-y-visible--lg overflow-y-visible--xl overflow-y-scroll--sm overflow-y-scroll--md overflow-y-scroll--lg overflow-y-scroll--xl

`$overflow-y-atoms--states`

overflow-y-auto--active overflow-y-auto--hover overflow-y-auto--focus overflow-y-auto--disabled overflow-y-auto--enabled overflow-y-hidden--active overflow-y-hidden--hover overflow-y-hidden--focus overflow-y-hidden--disabled overflow-y-hidden--enabled overflow-y-visible--active overflow-y-visible--hover overflow-y-visible--focus overflow-y-visible--disabled overflow-y-visible--enabled overflow-y-scroll--active overflow-y-scroll--hover overflow-y-scroll--focus overflow-y-scroll--disabled overflow-y-scroll--enabled

`$padding-atoms`

p-0 p-1 p-2 p-3 p-4 p-5 p-6

`$padding-atoms--breakpoints`

p-0--sm p-0--md p-0--lg p-0--xl p-1--sm p-1--md p-1--lg p-1--xl p-2--sm p-2--md p-2--lg p-2--xl p-3--sm p-3--md p-3--lg p-3--xl p-4--sm p-4--md p-4--lg p-4--xl p-5--sm p-5--md p-5--lg p-5--xl p-6--sm p-6--md p-6--lg p-6--xl

`$padding-atoms--states`

p-0--active p-0--hover p-0--focus p-0--disabled p-0--enabled p-1--active p-1--hover p-1--focus p-1--disabled p-1--enabled p-2--active p-2--hover p-2--focus p-2--disabled p-2--enabled p-3--active p-3--hover p-3--focus p-3--disabled p-3--enabled p-4--active p-4--hover p-4--focus p-4--disabled p-4--enabled p-5--active p-5--hover p-5--focus p-5--disabled p-5--enabled p-6--active p-6--hover p-6--focus p-6--disabled p-6--enabled

`$padding-x-atoms`

px-0 px-1 px-2 px-3 px-4 px-5 px-6

`$padding-x-atoms--breakpoints`

px-0--sm px-0--md px-0--lg px-0--xl px-1--sm px-1--md px-1--lg px-1--xl px-2--sm px-2--md px-2--lg px-2--xl px-3--sm px-3--md px-3--lg px-3--xl px-4--sm px-4--md px-4--lg px-4--xl px-5--sm px-5--md px-5--lg px-5--xl px-6--sm px-6--md px-6--lg px-6--xl

`$padding-x-atoms--states`

px-0--active px-0--hover px-0--focus px-0--disabled px-0--enabled px-1--active px-1--hover px-1--focus px-1--disabled px-1--enabled px-2--active px-2--hover px-2--focus px-2--disabled px-2--enabled px-3--active px-3--hover px-3--focus px-3--disabled px-3--enabled px-4--active px-4--hover px-4--focus px-4--disabled px-4--enabled px-5--active px-5--hover px-5--focus px-5--disabled px-5--enabled px-6--active px-6--hover px-6--focus px-6--disabled px-6--enabled

`$padding-y-atoms`

py-0 py-1 py-2 py-3 py-4 py-5 py-6

`$padding-y-atoms--breakpoints`

py-0--sm py-0--md py-0--lg py-0--xl py-1--sm py-1--md py-1--lg py-1--xl py-2--sm py-2--md py-2--lg py-2--xl py-3--sm py-3--md py-3--lg py-3--xl py-4--sm py-4--md py-4--lg py-4--xl py-5--sm py-5--md py-5--lg py-5--xl py-6--sm py-6--md py-6--lg py-6--xl

`$padding-y-atoms--states`

py-0--active py-0--hover py-0--focus py-0--disabled py-0--enabled py-1--active py-1--hover py-1--focus py-1--disabled py-1--enabled py-2--active py-2--hover py-2--focus py-2--disabled py-2--enabled py-3--active py-3--hover py-3--focus py-3--disabled py-3--enabled py-4--active py-4--hover py-4--focus py-4--disabled py-4--enabled py-5--active py-5--hover py-5--focus py-5--disabled py-5--enabled py-6--active py-6--hover py-6--focus py-6--disabled py-6--enabled

`$padding-t-atoms`

pt-0 pt-1 pt-2 pt-3 pt-4 pt-5 pt-6

`$padding-t-atoms--breakpoints`

pt-0--sm pt-0--md pt-0--lg pt-0--xl pt-1--sm pt-1--md pt-1--lg pt-1--xl pt-2--sm pt-2--md pt-2--lg pt-2--xl pt-3--sm pt-3--md pt-3--lg pt-3--xl pt-4--sm pt-4--md pt-4--lg pt-4--xl pt-5--sm pt-5--md pt-5--lg pt-5--xl pt-6--sm pt-6--md pt-6--lg pt-6--xl

`$padding-t-atoms--states`

pt-0--active pt-0--hover pt-0--focus pt-0--disabled pt-0--enabled pt-1--active pt-1--hover pt-1--focus pt-1--disabled pt-1--enabled pt-2--active pt-2--hover pt-2--focus pt-2--disabled pt-2--enabled pt-3--active pt-3--hover pt-3--focus pt-3--disabled pt-3--enabled pt-4--active pt-4--hover pt-4--focus pt-4--disabled pt-4--enabled pt-5--active pt-5--hover pt-5--focus pt-5--disabled pt-5--enabled pt-6--active pt-6--hover pt-6--focus pt-6--disabled pt-6--enabled

`$padding-r-atoms`

pr-0 pr-1 pr-2 pr-3 pr-4 pr-5 pr-6

`$padding-r-atoms--breakpoints`

pr-0--sm pr-0--md pr-0--lg pr-0--xl pr-1--sm pr-1--md pr-1--lg pr-1--xl pr-2--sm pr-2--md pr-2--lg pr-2--xl pr-3--sm pr-3--md pr-3--lg pr-3--xl pr-4--sm pr-4--md pr-4--lg pr-4--xl pr-5--sm pr-5--md pr-5--lg pr-5--xl pr-6--sm pr-6--md pr-6--lg pr-6--xl

`$padding-r-atoms--states`

pr-0--active pr-0--hover pr-0--focus pr-0--disabled pr-0--enabled pr-1--active pr-1--hover pr-1--focus pr-1--disabled pr-1--enabled pr-2--active pr-2--hover pr-2--focus pr-2--disabled pr-2--enabled pr-3--active pr-3--hover pr-3--focus pr-3--disabled pr-3--enabled pr-4--active pr-4--hover pr-4--focus pr-4--disabled pr-4--enabled pr-5--active pr-5--hover pr-5--focus pr-5--disabled pr-5--enabled pr-6--active pr-6--hover pr-6--focus pr-6--disabled pr-6--enabled

`$padding-b-atoms`

pb-0 pb-1 pb-2 pb-3 pb-4 pb-5 pb-6

`$padding-b-atoms--breakpoints`

pb-0--sm pb-0--md pb-0--lg pb-0--xl pb-1--sm pb-1--md pb-1--lg pb-1--xl pb-2--sm pb-2--md pb-2--lg pb-2--xl pb-3--sm pb-3--md pb-3--lg pb-3--xl pb-4--sm pb-4--md pb-4--lg pb-4--xl pb-5--sm pb-5--md pb-5--lg pb-5--xl pb-6--sm pb-6--md pb-6--lg pb-6--xl

`$padding-b-atoms--states`

pb-0--active pb-0--hover pb-0--focus pb-0--disabled pb-0--enabled pb-1--active pb-1--hover pb-1--focus pb-1--disabled pb-1--enabled pb-2--active pb-2--hover pb-2--focus pb-2--disabled pb-2--enabled pb-3--active pb-3--hover pb-3--focus pb-3--disabled pb-3--enabled pb-4--active pb-4--hover pb-4--focus pb-4--disabled pb-4--enabled pb-5--active pb-5--hover pb-5--focus pb-5--disabled pb-5--enabled pb-6--active pb-6--hover pb-6--focus pb-6--disabled pb-6--enabled

`$padding-l-atoms`

pl-0 pl-1 pl-2 pl-3 pl-4 pl-5 pl-6

`$padding-l-atoms--breakpoints`

pl-0--sm pl-0--md pl-0--lg pl-0--xl pl-1--sm pl-1--md pl-1--lg pl-1--xl pl-2--sm pl-2--md pl-2--lg pl-2--xl pl-3--sm pl-3--md pl-3--lg pl-3--xl pl-4--sm pl-4--md pl-4--lg pl-4--xl pl-5--sm pl-5--md pl-5--lg pl-5--xl pl-6--sm pl-6--md pl-6--lg pl-6--xl

`$padding-l-atoms--states`

pl-0--active pl-0--hover pl-0--focus pl-0--disabled pl-0--enabled pl-1--active pl-1--hover pl-1--focus pl-1--disabled pl-1--enabled pl-2--active pl-2--hover pl-2--focus pl-2--disabled pl-2--enabled pl-3--active pl-3--hover pl-3--focus pl-3--disabled pl-3--enabled pl-4--active pl-4--hover pl-4--focus pl-4--disabled pl-4--enabled pl-5--active pl-5--hover pl-5--focus pl-5--disabled pl-5--enabled pl-6--active pl-6--hover pl-6--focus pl-6--disabled pl-6--enabled

`$position-atoms`

pos-static pos-fixed pos-absolute pos-relative pos-sticky

`$position-atoms--breakpoints`

pos-static--sm pos-static--md pos-static--lg pos-static--xl pos-fixed--sm pos-fixed--md pos-fixed--lg pos-fixed--xl pos-absolute--sm pos-absolute--md pos-absolute--lg pos-absolute--xl pos-relative--sm pos-relative--md pos-relative--lg pos-relative--xl pos-sticky--sm pos-sticky--md pos-sticky--lg pos-sticky--xl

`$position-atoms--states`

pos-static--active pos-static--hover pos-static--focus pos-static--disabled pos-static--enabled pos-fixed--active pos-fixed--hover pos-fixed--focus pos-fixed--disabled pos-fixed--enabled pos-absolute--active pos-absolute--hover pos-absolute--focus pos-absolute--disabled pos-absolute--enabled pos-relative--active pos-relative--hover pos-relative--focus pos-relative--disabled pos-relative--enabled pos-sticky--active pos-sticky--hover pos-sticky--focus pos-sticky--disabled pos-sticky--enabled

`$text-align-atoms`

text-left text-center text-right text-justify

`$text-align-atoms--breakpoints`

text-left--sm text-left--md text-left--lg text-left--xl text-center--sm text-center--md text-center--lg text-center--xl text-right--sm text-right--md text-right--lg text-right--xl text-justify--sm text-justify--md text-justify--lg text-justify--xl

`$text-align-atoms--states`

text-left--active text-left--hover text-left--focus text-left--disabled text-left--enabled text-center--active text-center--hover text-center--focus text-center--disabled text-center--enabled text-right--active text-right--hover text-right--focus text-right--disabled text-right--enabled text-justify--active text-justify--hover text-justify--focus text-justify--disabled text-justify--enabled

`$text-color-atoms`

text-primary-50 text-primary-100 text-primary-200 text-primary-300 text-primary-400 text-primary-500 text-primary-600 text-primary-700 text-primary-800 text-primary-900 text-secondary-50 text-secondary-100 text-secondary-200 text-secondary-300 text-secondary-400 text-secondary-500 text-secondary-600 text-secondary-700 text-secondary-800 text-secondary-900 text-link-50 text-link-100 text-link-200 text-link-300 text-link-400 text-link-500 text-link-600 text-link-700 text-link-800 text-link-900 text-muted-50 text-muted-100 text-muted-200 text-muted-300 text-muted-400 text-muted-500 text-muted-600 text-muted-700 text-muted-800 text-muted-900 text-success-50 text-succes 10826 s-100 text-success-200 text-success-300 text-success-400 text-success-500 text-success-600 text-success-700 text-success-800 text-success-900 text-warning-50 text-warning-100 text-warning-200 text-warning-300 text-warning-400 text-warning-500 text-warning-600 text-warning-700 text-warning-800 text-warning-900 text-error-50 text-error-100 text-error-200 text-error-300 text-error-400 text-error-500 text-error-600 text-error-700 text-error-800 text-error-900 text-gray-50 text-gray-100 text-gray-200 text-gray-300 text-gray-400 text-gray-500 text-gray-600 text-gray-700 text-gray-800 text-gray-900

`$text-color-atoms--breakpoints`

text-primary-50--sm text-primary-50--md text-primary-50--lg text-primary-50--xl text-primary-100--sm text-primary-100--md text-primary-100--lg text-primary-100--xl text-primary-200--sm text-primary-200--md text-primary-200--lg text-primary-200--xl text-primary-300--sm text-primary-300--md text-primary-300--lg text-primary-300--xl text-primary-400--sm text-primary-400--md text-primary-400--lg text-primary-400--xl text-primary-500--sm text-primary-500--md text-primary-500--lg text-primary-500--xl text-primary-600--sm text-primary-600--md text-primary-600--lg text-primary-600--xl text-primary-700--sm text-primary-700--md text-primary-700--lg text-primary-700--xl text-primary-800--sm text-primary-800--md text-primary-800--lg text-primary-800--xl text-primary-900--sm text-primary-900--md text-primary-900--lg text-primary-900--xl text-secondary-50--sm text-secondary-50--md text-secondary-50--lg text-secondary-50--xl text-secondary-100--sm text-secondary-100--md text-secondary-100--lg text-secondary-100--xl text-secondary-200--sm text-secondary-200--md text-secondary-200--lg text-secondary-200--xl text-secondary-300--sm text-secondary-300--md text-secondary-300--lg text-secondary-300--xl text-secondary-400--sm text-secondary-400--md text-secondary-400--lg text-secondary-400--xl text-secondary-500--sm text-secondary-500--md text-secondary-500--lg text-secondary-500--xl text-secondary-600--sm text-secondary-600--md text-secondary-600--lg text-secondary-600--xl text-secondary-700--sm text-secondary-700--md text-secondary-700--lg text-secondary-700--xl text-secondary-800--sm text-secondary-800--md text-secondary-800--lg text-secondary-800--xl text-secondary-900--sm text-secondary-900--md text-secondary-900--lg text-secondary-900--xl text-link-50--sm text-link-50--md text-link-50--lg text-link-50--xl text-link-100--sm text-link-100--md text-link-100--lg text-link-100--xl text-link-200--sm text-link-200--md text-link-200--lg text-link-200--xl text-link-300--sm text-link-300--md text-link-300--lg text-link-300--xl text-link-400--sm text-link-400--md text-link-400--lg text-link-400--xl text-link-500--sm text-link-500--md text-link-500--lg text-link-500--xl text-link-600--sm text-link-600--md text-link-600--lg text-link-600--xl text-link-700--sm text-link-700--md text-link-700--lg text-link-700--xl text-link-800--sm text-link-800--md text-link-800--lg text-link-800--xl text-link-900--sm text-link-900--md text-link-900--lg text-link-900--xl text-muted-50--sm text-muted-50--md text-muted-50--lg text-muted-50--xl text-muted-100--sm text-muted-100--md text-muted-100--lg text-muted-100--xl text-muted-200--sm text-muted-200--md text-muted-200--lg text-muted-200--xl text-muted-300--sm text-muted-300--md text-muted-300--lg text-muted-300--xl text-muted-400--sm text-muted-400--md text-muted-400--lg text-muted-400--xl text-muted-500--sm text-muted-500--md text-muted-500--lg text-muted-500--xl text-muted-600--sm text-muted-600--md text-muted-600--lg text-muted-600--xl text-muted-700--sm text-muted-700--md text-muted-700--lg text-muted-700--xl text-muted-800--sm text-muted-800--md text-muted-800--lg text-muted-800--xl text-muted-900--sm text-muted-900--md text-muted-900--lg text-muted-900--xl text-success-50--sm text-success-50--md text-success-50--lg text-success-50--xl text-success-100--sm text-success-100--md text-success-100--lg text-success-100--xl text-success-200--sm text-success-200--md text-success-200--lg text-success-200--xl text-success-300--sm text-success-300--md text-success-300--lg text-success-300--xl text-success-400--sm text-success-400--md text-success-400--lg text-success-400--xl text-success-500--sm text-success-500--md text-success-500--lg text-success-500--xl text-success-600--sm text-success-600--md text-success-600--lg text-success-600--xl text-success-700--sm text-success-700--md text-success-700--lg text-success-700--xl text-success-800--sm text-success-800--md text-success-800--lg text-success-800--xl text-success-900--sm text-success-900--md text-success-900--lg text-success-900--xl text-warning-50--sm text-warning-50--md text-warning-50--lg text-warning-50--xl text-warning-100--sm text-warning-100--md text-warning-100--lg text-warning-100--xl text-warning-200--sm text-warning-200--md text-warning-200--lg text-warning-200--xl text-warning-300--sm text-warning-300--md text-warning-300--lg text-warning-300--xl text-warning-400--sm text-warning-400--md text-warning-400--lg text-warning-400--xl text-warning-500--sm text-warning-500--md text-warning-500--lg text-warning-500--xl text-warning-600--sm text-warning-600--md text-warning-600--lg text-warning-600--xl text-warning-700--sm text-warning-700--md text-warning-700--lg text-warning-700--xl text-warning-800--sm text-warning-800--md text-warning-800--lg text-warning-800--xl text-warning-900--sm text-warning-900--md text-warning-900--lg text-warning-900--xl text-error-50--sm text-error-50--md text-error-50--lg text-error-50--xl text-error-100--sm text-error-100--md text-error-100--lg text-error-100--xl text-error-200--sm text-error-200--md text-error-200--lg text-error-200--xl text-error-300--sm text-error-300--md text-error-300--lg text-error-300--xl text-error-400--sm text-error-400--md text-error-400--lg text-error-400--xl text-error-500--sm text-error-500--md text-error-500--lg text-error-500--xl text-error-600--sm text-error-600--md text-error-600--lg text-error-600--xl text-error-700--sm text-error-700--md text-error-700--lg text-error-700--xl text-error-800--sm text-error-800--md text-error-800--lg text-error-800--xl text-error-900--sm text-error-900--md text-error-900--lg text-error-900--xl text-gray-50--sm text-gray-50--md text-gray-50--lg text-gray-50--xl text-gray-100--sm text-gray-100--md text-gray-100--lg text-gray-100--xl text-gray-200--sm text-gray-200--md text-gray-200--lg text-gray-200--xl text-gray-300--sm text-gray-300--md text-gray-300--lg text-gray-300--xl text-gray-400--sm text-gray-400--md text-gray-400--lg text-gray-400--xl text-gray-500--sm text-gray-500--md text-gray-500--lg text-gray-500--xl text-gray-600--sm text-gray-600--md text-gray-600--lg text-gray-600--xl text-gray-700--sm text-gray-700--md text-gray-700--lg text-gray-700--xl text-gray-800--sm text-gray-800--md text-gray-800--lg text-gray-800--xl text-gray-900--sm text-gray-900--md text-gray-900--lg text-gray-900--xl

`$text-color-atoms--states`

text-primary-50--active text-primary-50--hover text-primary-50--focus text-primary-50--disabled text-primary-50--enabled text-primary-100--active text-primary-100--hover text-primary-100--focus text-primary-100--disabled text-primary-100--enabled text-primary-200--active text-primary-200--hover text-primary-200--focus text-primary-200--disabled text-primary-200--enabled text-primary-300--active text-primary-300--hover text-primary-300--focus text-primary-300--disabled text-primary-300--enabled text-primary-400--active text-primary-400--hover text-primary-400--focus text-primary-400--disabled text-primary-400--enabled text-primary-500--active text-primary-500--hover text-primary-500--focus text-primary-500--disabled text-primary-500--enabled text-primary-600--active text-primary-600--hover text-primary-600--focus text-primary-600--disabled text-primary-600--enabled text-primary-700--active text-primary-700--hover text-primary-700--focus text-primary-700--disabled text-primary-700--enabled text-primary-800--active text-primary-800--hover text-primary-800--focus text-primary-800--disabled text-primary-800--enabled text-primary-900--active text-primary-900--hover text-primary-900--focus text-primary-900--disabled text-primary-900--enabled text-secondary-50--active text-secondary-50--hover text-secondary-50--focus text-secondary-50--disabled text-secondary-50--enabled text-secondary-100--active text-secondary-100--hover text-secondary-100--focus text-secondary-100--disabled text-secondary-100--enabled text-secondary-200--active text-secondary-200--hover text-secondary-200--focus text-secondary-200--disabled text-secondary-200--enabled text-secondary-300--active text-secondary-300--hover text-secondary-300--focus text-secondary-300--disabled text-secondary-300--enabled text-secondary-400--active text-secondary-400--hover text-secondary-400--focus text-secondary-400--disabled text-secondary-400--enabled text-secondary-500--active text-secondary-500--hover text-secondary-500--focus text-secondary-500--disabled text-secondary-500--enabled text-secondary-600--active text-secondary-600--hover text-secondary-600--focus text-secondary-600--disabled text-secondary-600--enabled text-secondary-700--active text-secondary-700--hover text-secondary-700--focus text-secondary-700--disabled text-secondary-700--enabled text-secondary-800--active text-secondary-800--hover text-secondary-800--focus text-secondary-800--disabled text-secondary-800--enabled text-secondary-900--active text-secondary-900--hover text-secondary-900--focus text-secondary-900--disabled text-secondary-900--enabled text-link-50--active text-link-50--hover text-link-50--focus text-link-50--disabled text-link-50--enabled text-link-100--active text-link-100--hover text-link-100--focus text-link-100--disabled text-link-100--enabled text-link-200--active text-link-200--hover text-link-200--focus text-link-200--disabled text-link-200--enabled text-link-300--active text-link-300--hover text-link-300--focus text-link-300--disabled text-link-300--enabled text-link-400--active text-link-400--hover text-link-400--focus text-link-400--disabled text-link-400--enabled text-link-500--active text-link-500--hover text-link-500--focus text-link-500--disabled text-link-500--enabled text-link-600--active text-link-600--hover text-link-600--focus text-link-600--disabled text-link-600--enabled text-link-700--active text-link-700--hover text-link-700--focus text-link-700--disabled text-link-700--enabled text-link-800--active text-link-800--hover text-link-800--focus text-link-800--disabled text-link-800--enabled text-link-900--active text-link-900--hover text-link-900--focus text-link-900--disabled text-link-900--enabled text-muted-50--active text-muted-50--hover text-muted-50--focus text-muted-50--disabled text-muted-50--enabled text-muted-100--active text-muted-100--hover text-muted-100--focus text-muted-100--disabled text-muted-100--enabled text-muted-200--active text-muted-200--hover text-muted-200--focus text-muted-200--disabled text-muted-200--enabled text-muted-300--active text-muted-300--hover text-muted-300--focus text-muted-300--disabled text-muted-300--enabled text-muted-400--active text-muted-400--hover text-muted-400--focus text-muted-400--disabled text-muted-400--enabled text-muted-500--active text-muted-500--hover text-muted-500--focus text-muted-500--disabled text-muted-500--enabled text-muted-600--active text-muted-600--hover text-muted-600--focus text-muted-600--disabled text-muted-600--enabled text-muted-700--active text-muted-700--hover text-muted-700--focus text-muted-700--disabled text-muted-700--enabled text-muted-800--active text-muted-800--hover text-muted-800--focus text-muted-800--disabled text-muted-800--enabled text-muted-900--active text-muted-900--hover text-muted-900--focus text-muted-900--disabled text-muted-900--enabled text-success-50--active text-success-50--hover text-success-50--focus text-success-50--disabled text-success-50--enabled text-success-100--active text-success-100--hover text-success-100--focus text-success-100--disabled text-success-100--enabled text-success-200--active text-success-200--hover text-success-200--focus text-success-200--disabled text-success-200--enabled text-success-300--active text-success-300--hover text-success-300--focus text-success-300--disabled text-success-300--enabled text-success-400--active text-success-400--hover text-success-400--focus text-success-400--disabled text-success-400--enabled text-success-500--active text-success-500--hover text-success-500--focus text-success-500--disabled text-success-500--enabled text-success-600--active text-success-600--hover text-success-600--focus text-success-600--disabled text-success-600--enabled text-success-700--active text-success-700--hover text-success-700--focus text-success-700--disabled text-success-700--enabled text-success-800--active text-success-800--hover text-success-800--focus text-success-800--disabled text-success-800--enabled text-success-900--active text-success-900--hover text-success-900--focus text-success-900--disabled text-success-900--enabled text-warning-50--active text-warning-50--hover text-warning-50--focus text-warning-50--disabled text-warning-50--enabled text-warning-100--active text-warning-100--hover text-warning-100--focus text-warning-100--disabled text-warning-100--enabled text-warning-200--active text-warning-200--hover text-warning-200--focus text-warning-200--disabled text-warning-200--enabled text-warning-300--active text-warning-300--hover text-warning-300--focus text-warning-300--disabled text-warning-300--enabled text-warning-400--active text-warning-400--hover text-warning-400--focus text-warning-400--disabled text-warning-400--enabled text-warning-500--active text-warning-500--hover text-warning-500--focus text-warning-500--disabled text-warning-500--enabled text-warning-600--active text-warning-600--hover text-warning-600--focus text-warning-600--disabled text-warning-600--enabled text-warning-700--active text-warning-700--hover text-warning-700--focus text-warning-700--disabled text-warning-700--enabled text-warning-800--active text-warning-800--hover text-warning-800--focus text-warning-800--disabled text-warning-800--enabled text-warning-900--active text-warning-900--hover text-warning-900--focus text-warning-900--disabled text-warning-900--enabled text-error-50--active text-error-50--hover text-error-50--focus text-error-50--disabled text-error-50--enabled text-error-100--active text-error-100--hover text-error-100--focus text-error-100--disabled text-error-100--enabled text-error-200--active text-error-200--hover text-error-200--focus text-error-200--disabled text-error-200--enabled text-error-300--active text-error-300--hover text-error-300--focus text-error-300--disabled text-error-300--enabled text-error-400--active text-error-400--hover text-error-400--focus text-error-400--disabled text-error-400--enabled text-error-500--active text-error-500--hover text-error-500--focus text-error-500--disabled text-error-500--enabled text-error-600--active text-error-600--hover text-error-600--focus text-error-600--disabled text-error-600--enabled text-error-700--active text-error-700--hover text-error-700--focus text-error-700--disabled text-error-700--enabled text-error-800--active text-error-800--hover text-error-800--focus text-error-800--disabled text-error-800--enabled text-error-900--active text-error-900--hover text-error-900--focus text-error-900--disabled text-error-900--enabled text-gray-50--active text-gray-50--hover text-gray-50--focus text-gray-50--disabled text-gray-50--enabled text-gray-100--active text-gray-100--hover text-gray-100--focus text-gray-100--disabled text-gray-100--enabled text-gray-200--active text-gray-200--hover text-gray-200--focus text-gray-200--disabled text-gray-200--enabled text-gray-300--active text-gray-300--hover text-gray-300--focus text-gray-300--disabled text-gray-300--enabled text-gray-400--active text-gray-400--hover text-gray-400--focus text-gray-400--disabled text-gray-400--enabled text-gray-500--active text-gray-500--hover text-gray-500--focus text-gray-500--disabled text-gray-500--enabled text-gray-600--active text-gray-600--hover text-gray-600--focus text-gray-600--disabled text-gray-600--enabled text-gray-700--active text-gray-700--hover text-gray-700--focus text-gray-700--disabled text-gray-700--enabled text-gray-800--active text-gray-800--hover text-gray-800--focus text-gray-800--disabled text-gray-800--enabled text-gray-900--active text-gray-900--hover text-gray-900--focus text-gray-900--disabled text-gray-900--enabled

`$text-size-atoms`

text-xs text-sm text-md text-lg text-xl text-2xl text-3xl text-4xl text-5xl text-6xl

`$text-size-atoms--breakpoints`

text-xs--sm text-xs--md text-xs--lg text-xs--xl text-sm--sm text-sm--md text-sm--lg text-sm--xl text-md--sm text-md--md text-md--lg text-md--xl text-lg--sm text-lg--md text-lg--lg text-lg--xl text-xl--sm text-xl--md text-xl--lg text-xl--xl text-2xl--sm text-2xl--md text-2xl--lg text-2xl--xl text-3xl--sm text-3xl--md text-3xl--lg text-3xl--xl text-4xl--sm text-4xl--md text-4xl--lg text-4xl--xl text-5xl--sm text-5xl--md text-5xl--lg text-5xl--xl text-6xl--sm text-6xl--md text-6xl--lg text-6xl--xl

`$text-size-atoms--states`

text-xs--active text-xs--hover text-xs--focus text-xs--disabled text-xs--enabled text-sm--active text-sm--hover text-sm--focus text-sm--disabled text-sm--enabled text-md--active text-md--hover text-md--focus text-md--disabled text-md--enabled text-lg--active text-lg--hover text-lg--focus text-lg--disabled text-lg--enabled text-xl--active text-xl--hover text-xl--focus text-xl--disabled text-xl--enabled text-2xl--active text-2xl--hover text-2xl--focus text-2xl--disabled text-2xl--enabled text-3xl--active text-3xl--hover text-3xl--focus text-3xl--disabled text-3xl--enabled text-4xl--active text-4xl--hover text-4xl--focus text-4xl--disabled text-4xl--enabled text-5xl--active text-5xl--hover text-5xl--focus text-5xl--disabled text-5xl--enabled text-6xl--active text-6xl--hover text-6xl--focus text-6xl--disabled text-6xl--enabled

`$visibility-atoms`

v-visible v-hidden

`$visibility-atoms--breakpoints`

v-visible--sm v-visible--md v-visible--lg v-visible--xl v-hidden--sm v-hidden--md v-hidden--lg v-hidden--xl

`$visibility-atoms--states`

v-visible--active v-visible--hover v-visible--focus v-visible--disabled v-visible--enabled v-hidden--active v-hidden--hover v-hidden--focus v-hidden--disabled v-hidden--enabled

`$width-atoms`

w-0 w-vw0 w-vw1 w-vw2 w-vw3 w-vw4 w-vw5 w-vw6 w-vw7 w-vw8 w-vw9 w-vw10 w-vw11 w-vw12 w-p0 w-p1 w-p2 w-p3 w-p4 w-p5 w-p6 w-p7 w-p8 w-p9 w-p10 w-p11 w-p12

`$width-atoms--breakpoints`

w-0--sm w-0--md w-0--lg w-0--xl w-vw0--sm w-vw0--md w-vw0--lg w-vw0--xl w-vw1--sm w-vw1--md w-vw1--lg w-vw1--xl w-vw2--sm w-vw2--md w-vw2--lg w-vw2--xl w-vw3--sm w-vw3--md w-vw3--lg w-vw3--xl w-vw4--sm w-vw4--md w-vw4--lg w-vw4--xl w-vw5--sm w-vw5--md w-vw5--lg w-vw5--xl w-vw6--sm w-vw6--md w-vw6--lg w-vw6--xl w-vw7--sm w-vw7--md w-vw7--lg w-vw7--xl w-vw8--sm w-vw8--md w-vw8--lg w-vw8--xl w-vw9--sm w-vw9--md w-vw9--lg w-vw9--xl w-vw10--sm w-vw10--md w-vw10--lg w-vw10--xl w-vw11--sm w-vw11--md w-vw11--lg w-vw11--xl w-vw12--sm w-vw12--md w-vw12--lg w-vw12--xl w-p0--sm w-p0--md w-p0--lg w-p0--xl w-p1--sm w-p1--md w-p1--lg w-p1--xl w-p2--sm w-p2--md w-p2--lg w-p2--xl w-p3--sm w-p3--md w-p3--lg w-p3--xl w-p4--sm w-p4--md w-p4--lg w-p4--xl w-p5--sm w-p5--md w-p5--lg w-p5--xl w-p6--sm w-p6--md w-p6--lg w-p6--xl w-p7--sm w-p7--md w-p7--lg w-p7--xl w-p8--sm w-p8--md w-p8--lg w-p8--xl w-p9--sm w-p9--md w-p9--lg w-p9--xl w-p10--sm w-p10--md w-p10--lg w-p10--xl w-p11--sm w-p11--md w-p11--lg w-p11--xl w-p12--sm w-p12--md w-p12--lg w-p12--xl

`$width-atoms--states`

w-0--active w-0--hover w-0--focus w-0--disabled w-0--enabled w-vw0--active w-vw0--hover w-vw0--focus w-vw0--disabled w-vw0--enabled w-vw1--active w-vw1--hover w-vw1--focus w-vw1--disabled w-vw1--enabled w-vw2--active w-vw2--hover w-vw2--focus w-vw2--disabled w-vw2--enabled w-vw3--active w-vw3--hover w-vw3--focus w-vw3--disabled w-vw3--enabled w-vw4--active w-vw4--hover w-vw4--focus w-vw4--disabled w-vw4--enabled w-vw5--active w-vw5--hover w-vw5--focus w-vw5--disabled w-vw5--enabled w-vw6--active w-vw6--hover w-vw6--focus w-vw6--disabled w-vw6--enabled w-vw7--active w-vw7--hover w-vw7--focus w-vw7--disabled w-vw7--enabled w-vw8--active w-vw8--hover w-vw8--focus w-vw8--disabled w-vw8--enabled w-vw9--active w-vw9--hover w-vw9--focus w-vw9--disabled w-vw9--enabled w-vw10--active w-vw10--hover w-vw10--focus w-vw10--disabled w-vw10--enabled w-vw11--active w-vw11--hover w-vw11--focus w-vw11--disabled w-vw11--enabled w-vw12--active w-vw12--hover w-vw12--focus w-vw12--disabled w-vw12--enabled w-p0--active w-p0--hover w-p0--focus w-p0--disabled w-p0--enabled w-p1--active w-p1--hover w-p1--focus w-p1--disabled w-p1--enabled w-p2--active w-p2--hover w-p2--focus w-p2--disabled w-p2--enabled w-p3--active w-p3--hover w-p3--focus w-p3--disabled w-p3--enabled w-p4--active w-p4--hover w-p4--focus w-p4--disabled w-p4--enabled w-p5--active w-p5--hover w-p5--focus w-p5--disabled w-p5--enabled w-p6--active w-p6--hover w-p6--focus w-p6--disabled w-p6--enabled w-p7--active w-p7--hover w-p7--focus w-p7--disabled w-p7--enabled w-p8--active w-p8--hover w-p8--focus w-p8--disabled w-p8--enabled w-p9--active w-p9--hover w-p9--focus w-p9--disabled w-p9--enabled w-p10--active w-p10--hover w-p10--focus w-p10--disabled w-p10--enabled w-p11--active w-p11--hover w-p11--focus w-p11--disabled w-p11--enabled w-p12--active w-p12--hover w-p12--focus w-p12--disabled w-p12--enabled

`$min-width-atoms`

wmin-0 wmin-vw0 wmin-vw1 wmin-vw2 wmin-vw3 wmin-vw4 wmin-vw5 wmin-vw6 wmin-vw7 wmin-vw8 wmin-vw9 wmin-vw10 wmin-vw11 wmin-vw12 wmin-p0 wmin-p1 wmin-p2 wmin-p3 wmin-p4 wmin-p5 wmin-p6 wmin-p7 wmin-p8 wmin-p9 wmin-p10 wmin-p11 wmin-p12

`$min-width-atoms--breakpoints`

wmin-0--sm wmin-0--md wmin-0--lg wmin-0--xl wmin-vw0--sm wmin-vw0--md wmin-vw0--lg wmin-vw0--xl wmin-vw1--sm wmin-vw1--md wmin-vw1--lg wmin-vw1--xl wmin-vw2--sm wmin-vw2--md wmin-vw2--lg wmin-vw2--xl wmin-vw3--sm wmin-vw3--md wmin-vw3--lg wmin-vw3--xl wmin-vw4--sm wmin-vw4--md wmin-vw4--lg wmin-vw4--xl wmin-vw5--sm wmin-vw5--md wmin-vw5--lg wmin-vw5--xl wmin-vw6--sm wmin-vw6--md wmin-vw6--lg wmin-vw6--xl wmin-vw7--sm wmin-vw7--md wmin-vw7--lg wmin-vw7--xl wmin-vw8--sm wmin-vw8--md wmin-vw8--lg wmin-vw8--xl wmin-vw9--sm wmin-vw9--md wmin-vw9--lg wmin-vw9--xl wmin-vw10--sm wmin-vw10--md wmin-vw10--lg wmin-vw10--xl wmin-vw11--sm wmin-vw11--md wmin-vw11--lg wmin-vw11--xl wmin-vw12--sm wmin-vw12--md wmin-vw12--lg wmin-vw12--xl wmin-p0--sm wmin-p0--md wmin-p0--lg wmin-p0--xl wmin-p1--sm wmin-p1--md wmin-p1--lg wmin-p1--xl wmin-p2--sm wmin-p2--md wmin-p2--lg wmin-p2--xl wmin-p3--sm wmin-p3--md wmin-p3--lg wmin-p3--xl wmin-p4--sm wmin-p4--md wmin-p4--lg wmin-p4--xl wmin-p5--sm wmin-p5--md wmin-p5--lg wmin-p5--xl wmin-p6--sm wmin-p6--md wmin-p6--lg wmin-p6--xl wmin-p7--sm wmin-p7--md wmin-p7--lg wmin-p7--xl wmin-p8--sm wmin-p8--md wmin-p8--lg wmin-p8--xl wmin-p9--sm wmin-p9--md wmin-p9--lg wmin-p9--xl wmin-p10--sm wmin-p10--md wmin-p10--lg wmin-p10--xl wmin-p11--sm wmin-p11--md wmin-p11--lg wmin-p11--xl wmin-p12--sm wmin-p12--md wmin-p12--lg wmin-p12--xl

`$min-width-atoms--states`

wmin-0--active wmin-0--hover wmin-0--focus wmin-0--disabled wmin-0--enabled wmin-vw0--active wmin-vw0--hover wmin-vw0--focus wmin-vw0--disabled wmin-vw0--enabled wmin-vw1--active wmin-vw1--hover wmin-vw1--focus wmin-vw1--disabled wmin-vw1--enabled wmin-vw2--active wmin-vw2--hover wmin-vw2--focus wmin-vw2--disabled wmin-vw2--enabled wmin-vw3--active wmin-vw3--hover wmin-vw3--focus wmin-vw3--disabled wmin-vw3--enabled wmin-vw4--active wmin-vw4--hover wmin-vw4--focus wmin-vw4--disabled wmin-vw4--enabled wmin-vw5--active wmin-vw5--hover wmin-vw5--focus wmin-vw5--disabled wmin-vw5--enabled wmin-vw6--active wmin-vw6--hover wmin-vw6--focus wmin-vw6--disabled wmin-vw6--enabled wmin-vw7--active wmin-vw7--hover wmin-vw7--focus wmin-vw7--disabled wmin-vw7--enabled wmin-vw8--active wmin-vw8--hover wmin-vw8--focus wmin-vw8--disabled wmin-vw8--enabled wmin-vw9--active wmin-vw9--hover wmin-vw9--focus wmin-vw9--disabled wmin-vw9--enabled wmin-vw10--active wmin-vw10--hover wmin-vw10--focus wmin-vw10--disabled wmin-vw10--enabled wmin-vw11--active wmin-vw11--hover wmin-vw11--focus wmin-vw11--disabled wmin-vw11--enabled wmin-vw12--active wmin-vw12--hover wmin-vw12--focus wmin-vw12--disabled wmin-vw12--enabled wmin-p0--active wmin-p0--hover wmin-p0--focus wmin-p0--disabled wmin-p0--enabled wmin-p1--active wmin-p1--hover wmin-p1--focus wmin-p1--disabled wmin-p1--enabled wmin-p2--active wmin-p2--hover wmin-p2--focus wmin-p2--disabled wmin-p2--enabled wmin-p3--active wmin-p3--hover wmin-p3--focus wmin-p3--disabled wmin-p3--enabled wmin-p4--active wmin-p4--hover wmin-p4--focus wmin-p4--disabled wmin-p4--enabled wmin-p5--active wmin-p5--hover wmin-p5--focus wmin-p5--disabled wmin-p5--enabled wmin-p6--active wmin-p6--hover wmin-p6--focus wmin-p6--disabled wmin-p6--enabled wmin-p7--active wmin-p7--hover wmin-p7--focus wmin-p7--disabled wmin-p7--enabled wmin-p8--active wmin-p8--hover wmin-p8--focus wmin-p8--disabled wmin-p8--enabled wmin-p9--active wmin-p9--hover wmin-p9--focus wmin-p9--disabled wmin-p9--enabled wmin-p10--active wmin-p10--hover wmin-p10--focus wmin-p10--disabled wmin-p10--enabled wmin-p11--active wmin-p11--hover wmin-p11--focus wmin-p11--disabled wmin-p11--enabled wmin-p12--active wmin-p12--hover wmin-p12--focus wmin-p12--disabled wmin-p12--enabled

`$max-width-atoms`

wmax-0 wmax-vw0 wmax-vw1 wmax-vw2 wmax-vw3 wmax-vw4 wmax-vw5 wmax-vw6 wmax-vw7 wmax-vw8 wmax-vw9 wmax-vw10 wmax-vw11 wmax-vw12 wmax-p0 wmax-p1 wmax-p2 wmax-p3 wmax-p4 wmax-p5 wmax-p6 wmax-p7 wmax-p8 wmax-p9 wmax-p10 wmax-p11 wmax-p12

`$max-width-atoms--breakpoints`

wmax-0--sm wmax-0--md wmax-0--lg wmax-0--xl wmax-vw0--sm wmax-vw0--md wmax-vw0--lg wmax-vw0--xl wmax-vw1--sm wmax-vw1--md wmax-vw1--lg wmax-vw1--xl wmax-vw2--sm wmax-vw2--md wmax-vw2--lg wmax-vw2--xl wmax-vw3--sm wmax-vw3--md wmax-vw3--lg wmax-vw3--xl wmax-vw4--sm wmax-vw4--md wmax-vw4--lg wmax-vw4--xl wmax-vw5--sm wmax-vw5--md wmax-vw5--lg wmax-vw5--xl wmax-vw6--sm wmax-vw6--md wmax-vw6--lg wmax-vw6--xl wmax-vw7--sm wmax-vw7--md wmax-vw7--lg wmax-vw7--xl wmax-vw8--sm wmax-vw8--md wmax-vw8--lg wmax-vw8--xl wmax-vw9--sm wmax-vw9--md wmax-vw9--lg wmax-vw9--xl wmax-vw10--sm wmax-vw10--md wmax-vw10--lg wmax-vw10--xl wmax-vw11--sm wmax-vw11--md wmax-vw11--lg wmax-vw11--xl wmax-vw12--sm wmax-vw12--md wmax-vw12--lg wmax-vw12--xl wmax-p0--sm wmax-p0--md wmax-p0--lg wmax-p0--xl wmax-p1--sm wmax-p1--md wmax-p1--lg wmax-p1--xl wmax-p2--sm wmax-p2--md wmax-p2--lg wmax-p2--xl wmax-p3--sm wmax-p3--md wmax-p3--lg wmax-p3--xl wmax-p4--sm wmax-p4--md wmax-p4--lg wmax-p4--xl wmax-p5--sm wmax-p5--md wmax-p5--lg wmax-p5--xl wmax-p6--sm wmax-p6--md wmax-p6--lg wmax-p6--xl wmax-p7--sm wmax-p7--md wmax-p7--lg wmax-p7--xl wmax-p8--sm wmax-p8--md wmax-p8--lg wmax-p8--xl wmax-p9--sm wmax-p9--md wmax-p9--lg wmax-p9--xl wmax-p10--sm wmax-p10--md wmax-p10--lg wmax-p10--xl wmax-p11--sm wmax-p11--md wmax-p11--lg wmax-p11--xl wmax-p12--sm wmax-p12--md wmax-p12--lg wmax-p12--xl

`$max-width-atoms--states`

wmax-0--active wmax-0--hover wmax-0--focus wmax-0--disabled wmax-0--enabled wmax-vw0--active wmax-vw0--hover wmax-vw0--focus wmax-vw0--disabled wmax-vw0--enabled wmax-vw1--active wmax-vw1--hover wmax-vw1--focus wmax-vw1--disabled wmax-vw1--enabled wmax-vw2--active wmax-vw2--hover wmax-vw2--focus wmax-vw2--disabled wmax-vw2--enabled wmax-vw3--active wmax-vw3--hover wmax-vw3--focus wmax-vw3--disabled wmax-vw3--enabled wmax-vw4--active wmax-vw4--hover wmax-vw4--focus wmax-vw4--disabled wmax-vw4--enabled wmax-vw5--active wmax-vw5--hover wmax-vw5--focus wmax-vw5--disabled wmax-vw5--enabled wmax-vw6--active wmax-vw6--hover wmax-vw6--focus wmax-vw6--disabled wmax-vw6--enabled wmax-vw7--active wmax-vw7--hover wmax-vw7--focus wmax-vw7--disabled wmax-vw7--enabled wmax-vw8--active wmax-vw8--hover wmax-vw8--focus wmax-vw8--disabled wmax-vw8--enabled wmax-vw9--active wmax-vw9--hover wmax-vw9--focus wmax-vw9--disabled wmax-vw9--enabled wmax-vw10--active wmax-vw10--hover wmax-vw10--focus wmax-vw10--disabled wmax-vw10--enabled wmax-vw11--active wmax-vw11--hover wmax-vw11--focus wmax-vw11--disabled wmax-vw11--enabled wmax-vw12--active wmax-vw12--hover wmax-vw12--focus wmax-vw12--disabled wmax-vw12--enabled wmax-p0--active wmax-p0--hover wmax-p0--focus wmax-p0--disabled wmax-p0--enabled wmax-p1--active wmax-p1--hover wmax-p1--focus wmax-p1--disabled wmax-p1--enabled wmax-p2--active wmax-p2--hover wmax-p2--focus wmax-p2--disabled wmax-p2--enabled wmax-p3--active wmax-p3--hover wmax-p3--focus wmax-p3--disabled wmax-p3--enabled wmax-p4--active wmax-p4--hover wmax-p4--focus wmax-p4--disabled wmax-p4--enabled wmax-p5--active wmax-p5--hover wmax-p5--focus wmax-p5--disabled wmax-p5--enabled wmax-p6--active wmax-p6--hover wmax-p6--focus wmax-p6--disabled wmax-p6--enabled wmax-p7--active wmax-p7--hover wmax-p7--focus wmax-p7--disabled wmax-p7--enabled wmax-p8--active wmax-p8--hover wmax-p8--focus wmax-p8--disabled wmax-p8--enabled wmax-p9--active wmax-p9--hover wmax-p9--focus wmax-p9--disabled wmax-p9--enabled wmax-p10--active wmax-p10--hover wmax-p10--focus wmax-p10--disabled wmax-p10--enabled wmax-p11--active wmax-p11--hover wmax-p11--focus wmax-p11--disabled wmax-p11--enabled wmax-p12--active wmax-p12--hover wmax-p12--focus wmax-p12--disabled wmax-p12--enabled

Name		Name	Last commit message	Last commit date
Latest commit History 17 Commits
scripts		scripts
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml

License

somesocks/sass-atoms

Folders and files

Latest commit

History

Repository files navigation

sass-atoms

why?

how to use it

development mode

atoms reference

$align-content-atoms

$align-content-atoms--breakpoints

$align-content-atoms--states

$align-items-atoms

$align-items-atoms--breakpoints

$align-items-atoms--states

$align-self-atoms

$align-self-atoms--breakpoints

$align-self-atoms--states

$background-clip-atoms

$background-clip-atoms--breakpoints

$background-clip-atoms--states

$background-color-atoms

$background-color-atoms--breakpoints

$background-color-atoms--states

$background-position-atoms

$background-position-atoms--breakpoints

$background-position-atoms--states

$background-repeat-atoms

$background-repeat-atoms--breakpoints

$background-repeat-atoms--states

$background-size-atoms

$background-size-atoms--breakpoints

$background-size-atoms--states

$border-color-atoms

$border-color-atoms--breakpoints

$border-color-atoms--states

$border-radius-atoms

$border-radius-atoms--breakpoints

$border-radius-atoms--states

$border-style-atoms

$border-style-atoms--breakpoints

$border-style-atoms--states

$border-width-atoms

$border-width-atoms--breakpoints

$border-width-atoms--states

$box-sizing-atoms

$box-sizing-atoms--breakpoints

$box-sizing-atoms--states

$clear-atoms

$clear-atoms--breakpoints

$clear-atoms--states

$display-atoms

$display-atoms--breakpoints

$display-atoms--states

$flex-direction-atoms

$flex-direction-atoms--breakpoints

$flex-direction-atoms--states

$flex-grow-atoms

$flex-grow-atoms--breakpoints

$flex-grow-atoms--states

$flex-shrink-atoms

$flex-shrink-atoms--breakpoints

$flex-shrink-atoms--states

$flex-wrap-atoms

$flex-wrap-atoms--breakpoints

$flex-wrap-atoms--states

$float-atoms

$float-atoms--breakpoints

$float-atoms--states

$font-family-atoms

$font-family-atoms--breakpoints

$font-family-atoms--states

$font-weight-atoms

$font-weight-atoms--breakpoints

$font-weight-atoms--states

$grid-columns-atoms

$grid-columns-atoms--breakpoints

$grid-columns-atoms--states