@medyll/cssfabric 0.1.0 → 0.2.0

package/styles/box/box.css

@@ -0,0 +1,1379 @@
+.marg .marg-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg .marg-small {
+  margin: var(--box-density-preset-small);
+}
+.marg .marg-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg .marg-large {
+  margin: var(--box-density-preset-large);
+}
+.marg, .marg-1 {
+  margin: var(--box-density-1);
+}
+.marg-2 {
+  margin: var(--box-density-2);
+}
+.marg-3 {
+  margin: var(--box-density-3);
+}
+.marg-4 {
+  margin: var(--box-density-4);
+}
+.marg-5 {
+  margin: var(--box-density-5);
+}
+.marg-6 {
+  margin: var(--box-density-6);
+}
+.marg-7 {
+  margin: var(--box-density-7);
+}
+.marg-8 {
+  margin: var(--box-density-8);
+}
+.marg-9 {
+  margin: var(--box-density-9);
+}
+.marg-10 {
+  margin: var(--box-density-10);
+}
+.marg-11 {
+  margin: var(--box-density-11);
+}
+.marg-12 {
+  margin: var(--box-density-12);
+}
+
+.marg-t .marg-t-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-t .marg-t-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-t .marg-t-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-t .marg-t-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-t, .marg-t-1 {
+  margin-top: var(--box-density-1);
+}
+.marg-t-2 {
+  margin-top: var(--box-density-2);
+}
+.marg-t-3 {
+  margin-top: var(--box-density-3);
+}
+.marg-t-4 {
+  margin-top: var(--box-density-4);
+}
+.marg-t-5 {
+  margin-top: var(--box-density-5);
+}
+.marg-t-6 {
+  margin-top: var(--box-density-6);
+}
+.marg-t-7 {
+  margin-top: var(--box-density-7);
+}
+.marg-t-8 {
+  margin-top: var(--box-density-8);
+}
+.marg-t-9 {
+  margin-top: var(--box-density-9);
+}
+.marg-t-10 {
+  margin-top: var(--box-density-10);
+}
+.marg-t-11 {
+  margin-top: var(--box-density-11);
+}
+.marg-t-12 {
+  margin-top: var(--box-density-12);
+}
+
+.marg-b .marg-b-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-b .marg-b-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-b .marg-b-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-b .marg-b-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-b, .marg-b-1 {
+  margin-bottom: var(--box-density-1);
+}
+.marg-b-2 {
+  margin-bottom: var(--box-density-2);
+}
+.marg-b-3 {
+  margin-bottom: var(--box-density-3);
+}
+.marg-b-4 {
+  margin-bottom: var(--box-density-4);
+}
+.marg-b-5 {
+  margin-bottom: var(--box-density-5);
+}
+.marg-b-6 {
+  margin-bottom: var(--box-density-6);
+}
+.marg-b-7 {
+  margin-bottom: var(--box-density-7);
+}
+.marg-b-8 {
+  margin-bottom: var(--box-density-8);
+}
+.marg-b-9 {
+  margin-bottom: var(--box-density-9);
+}
+.marg-b-10 {
+  margin-bottom: var(--box-density-10);
+}
+.marg-b-11 {
+  margin-bottom: var(--box-density-11);
+}
+.marg-b-12 {
+  margin-bottom: var(--box-density-12);
+}
+
+.marg-l .marg-l-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-l .marg-l-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-l .marg-l-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-l .marg-l-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-l, .marg-l-1 {
+  margin-left: var(--box-density-1);
+}
+.marg-l-2 {
+  margin-left: var(--box-density-2);
+}
+.marg-l-3 {
+  margin-left: var(--box-density-3);
+}
+.marg-l-4 {
+  margin-left: var(--box-density-4);
+}
+.marg-l-5 {
+  margin-left: var(--box-density-5);
+}
+.marg-l-6 {
+  margin-left: var(--box-density-6);
+}
+.marg-l-7 {
+  margin-left: var(--box-density-7);
+}
+.marg-l-8 {
+  margin-left: var(--box-density-8);
+}
+.marg-l-9 {
+  margin-left: var(--box-density-9);
+}
+.marg-l-10 {
+  margin-left: var(--box-density-10);
+}
+.marg-l-11 {
+  margin-left: var(--box-density-11);
+}
+.marg-l-12 {
+  margin-left: var(--box-density-12);
+}
+
+.marg-r .marg-r-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-r .marg-r-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-r .marg-r-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-r .marg-r-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-r, .marg-r-1 {
+  margin-right: var(--box-density-1);
+}
+.marg-r-2 {
+  margin-right: var(--box-density-2);
+}
+.marg-r-3 {
+  margin-right: var(--box-density-3);
+}
+.marg-r-4 {
+  margin-right: var(--box-density-4);
+}
+.marg-r-5 {
+  margin-right: var(--box-density-5);
+}
+.marg-r-6 {
+  margin-right: var(--box-density-6);
+}
+.marg-r-7 {
+  margin-right: var(--box-density-7);
+}
+.marg-r-8 {
+  margin-right: var(--box-density-8);
+}
+.marg-r-9 {
+  margin-right: var(--box-density-9);
+}
+.marg-r-10 {
+  margin-right: var(--box-density-10);
+}
+.marg-r-11 {
+  margin-right: var(--box-density-11);
+}
+.marg-r-12 {
+  margin-right: var(--box-density-12);
+}
+
+.marg-all .marg-all-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-all .marg-all-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-all .marg-all-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-all .marg-all-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-all, .marg-all-1 {
+  margin: var(--box-density-1);
+}
+.marg-all-2 {
+  margin: var(--box-density-2);
+}
+.marg-all-3 {
+  margin: var(--box-density-3);
+}
+.marg-all-4 {
+  margin: var(--box-density-4);
+}
+.marg-all-5 {
+  margin: var(--box-density-5);
+}
+.marg-all-6 {
+  margin: var(--box-density-6);
+}
+.marg-all-7 {
+  margin: var(--box-density-7);
+}
+.marg-all-8 {
+  margin: var(--box-density-8);
+}
+.marg-all-9 {
+  margin: var(--box-density-9);
+}
+.marg-all-10 {
+  margin: var(--box-density-10);
+}
+.marg-all-11 {
+  margin: var(--box-density-11);
+}
+.marg-all-12 {
+  margin: var(--box-density-12);
+}
+
+.marg-u .marg-u-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-u .marg-u-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-u .marg-u-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-u .marg-u-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-u, .marg-u-1 {
+  margin-bottom: var(--box-density-1);
+  margin-left: var(--box-density-1);
+  margin-right: var(--box-density-1);
+}
+.marg-u-2 {
+  margin-bottom: var(--box-density-2);
+  margin-left: var(--box-density-2);
+  margin-right: var(--box-density-2);
+}
+.marg-u-3 {
+  margin-bottom: var(--box-density-3);
+  margin-left: var(--box-density-3);
+  margin-right: var(--box-density-3);
+}
+.marg-u-4 {
+  margin-bottom: var(--box-density-4);
+  margin-left: var(--box-density-4);
+  margin-right: var(--box-density-4);
+}
+.marg-u-5 {
+  margin-bottom: var(--box-density-5);
+  margin-left: var(--box-density-5);
+  margin-right: var(--box-density-5);
+}
+.marg-u-6 {
+  margin-bottom: var(--box-density-6);
+  margin-left: var(--box-density-6);
+  margin-right: var(--box-density-6);
+}
+.marg-u-7 {
+  margin-bottom: var(--box-density-7);
+  margin-left: var(--box-density-7);
+  margin-right: var(--box-density-7);
+}
+.marg-u-8 {
+  margin-bottom: var(--box-density-8);
+  margin-left: var(--box-density-8);
+  margin-right: var(--box-density-8);
+}
+.marg-u-9 {
+  margin-bottom: var(--box-density-9);
+  margin-left: var(--box-density-9);
+  margin-right: var(--box-density-9);
+}
+.marg-u-10 {
+  margin-bottom: var(--box-density-10);
+  margin-left: var(--box-density-10);
+  margin-right: var(--box-density-10);
+}
+.marg-u-11 {
+  margin-bottom: var(--box-density-11);
+  margin-left: var(--box-density-11);
+  margin-right: var(--box-density-11);
+}
+.marg-u-12 {
+  margin-bottom: var(--box-density-12);
+  margin-left: var(--box-density-12);
+  margin-right: var(--box-density-12);
+}
+
+.marg-ii .marg-ii-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-ii .marg-ii-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-ii .marg-ii-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-ii .marg-ii-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-ii, .marg-ii-1 {
+  margin-left: var(--box-density-1);
+  margin-right: var(--box-density-1);
+}
+.marg-ii-2 {
+  margin-left: var(--box-density-2);
+  margin-right: var(--box-density-2);
+}
+.marg-ii-3 {
+  margin-left: var(--box-density-3);
+  margin-right: var(--box-density-3);
+}
+.marg-ii-4 {
+  margin-left: var(--box-density-4);
+  margin-right: var(--box-density-4);
+}
+.marg-ii-5 {
+  margin-left: var(--box-density-5);
+  margin-right: var(--box-density-5);
+}
+.marg-ii-6 {
+  margin-left: var(--box-density-6);
+  margin-right: var(--box-density-6);
+}
+.marg-ii-7 {
+  margin-left: var(--box-density-7);
+  margin-right: var(--box-density-7);
+}
+.marg-ii-8 {
+  margin-left: var(--box-density-8);
+  margin-right: var(--box-density-8);
+}
+.marg-ii-9 {
+  margin-left: var(--box-density-9);
+  margin-right: var(--box-density-9);
+}
+.marg-ii-10 {
+  margin-left: var(--box-density-10);
+  margin-right: var(--box-density-10);
+}
+.marg-ii-11 {
+  margin-left: var(--box-density-11);
+  margin-right: var(--box-density-11);
+}
+.marg-ii-12 {
+  margin-left: var(--box-density-12);
+  margin-right: var(--box-density-12);
+}
+
+.marg-tb .marg-tb-tiny {
+  margin: var(--box-density-preset-tiny);
+}
+.marg-tb .marg-tb-small {
+  margin: var(--box-density-preset-small);
+}
+.marg-tb .marg-tb-medium {
+  margin: var(--box-density-preset-medium);
+}
+.marg-tb .marg-tb-large {
+  margin: var(--box-density-preset-large);
+}
+.marg-tb, .marg-tb-1 {
+  margin-top: var(--box-density-1);
+  margin-bottom: var(--box-density-1);
+}
+.marg-tb-2 {
+  margin-top: var(--box-density-2);
+  margin-bottom: var(--box-density-2);
+}
+.marg-tb-3 {
+  margin-top: var(--box-density-3);
+  margin-bottom: var(--box-density-3);
+}
+.marg-tb-4 {
+  margin-top: var(--box-density-4);
+  margin-bottom: var(--box-density-4);
+}
+.marg-tb-5 {
+  margin-top: var(--box-density-5);
+  margin-bottom: var(--box-density-5);
+}
+.marg-tb-6 {
+  margin-top: var(--box-density-6);
+  margin-bottom: var(--box-density-6);
+}
+.marg-tb-7 {
+  margin-top: var(--box-density-7);
+  margin-bottom: var(--box-density-7);
+}
+.marg-tb-8 {
+  margin-top: var(--box-density-8);
+  margin-bottom: var(--box-density-8);
+}
+.marg-tb-9 {
+  margin-top: var(--box-density-9);
+  margin-bottom: var(--box-density-9);
+}
+.marg-tb-10 {
+  margin-top: var(--box-density-10);
+  margin-bottom: var(--box-density-10);
+}
+.marg-tb-11 {
+  margin-top: var(--box-density-11);
+  margin-bottom: var(--box-density-11);
+}
+.marg-tb-12 {
+  margin-top: var(--box-density-12);
+  margin-bottom: var(--box-density-12);
+}
+
+.pad .pad-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad .pad-small {
+  padding: var(--box-density-preset-small);
+}
+.pad .pad-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad .pad-large {
+  padding: var(--box-density-preset-large);
+}
+.pad, .pad-1 {
+  padding: var(--box-density-1);
+}
+.pad-2 {
+  padding: var(--box-density-2);
+}
+.pad-3 {
+  padding: var(--box-density-3);
+}
+.pad-4 {
+  padding: var(--box-density-4);
+}
+.pad-5 {
+  padding: var(--box-density-5);
+}
+.pad-6 {
+  padding: var(--box-density-6);
+}
+.pad-7 {
+  padding: var(--box-density-7);
+}
+.pad-8 {
+  padding: var(--box-density-8);
+}
+.pad-9 {
+  padding: var(--box-density-9);
+}
+.pad-10 {
+  padding: var(--box-density-10);
+}
+.pad-11 {
+  padding: var(--box-density-11);
+}
+.pad-12 {
+  padding: var(--box-density-12);
+}
+
+.pad-t .pad-t-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-t .pad-t-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-t .pad-t-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-t .pad-t-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-t, .pad-t-1 {
+  padding-top: var(--box-density-1);
+}
+.pad-t-2 {
+  padding-top: var(--box-density-2);
+}
+.pad-t-3 {
+  padding-top: var(--box-density-3);
+}
+.pad-t-4 {
+  padding-top: var(--box-density-4);
+}
+.pad-t-5 {
+  padding-top: var(--box-density-5);
+}
+.pad-t-6 {
+  padding-top: var(--box-density-6);
+}
+.pad-t-7 {
+  padding-top: var(--box-density-7);
+}
+.pad-t-8 {
+  padding-top: var(--box-density-8);
+}
+.pad-t-9 {
+  padding-top: var(--box-density-9);
+}
+.pad-t-10 {
+  padding-top: var(--box-density-10);
+}
+.pad-t-11 {
+  padding-top: var(--box-density-11);
+}
+.pad-t-12 {
+  padding-top: var(--box-density-12);
+}
+
+.pad-b .pad-b-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-b .pad-b-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-b .pad-b-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-b .pad-b-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-b, .pad-b-1 {
+  padding-bottom: var(--box-density-1);
+}
+.pad-b-2 {
+  padding-bottom: var(--box-density-2);
+}
+.pad-b-3 {
+  padding-bottom: var(--box-density-3);
+}
+.pad-b-4 {
+  padding-bottom: var(--box-density-4);
+}
+.pad-b-5 {
+  padding-bottom: var(--box-density-5);
+}
+.pad-b-6 {
+  padding-bottom: var(--box-density-6);
+}
+.pad-b-7 {
+  padding-bottom: var(--box-density-7);
+}
+.pad-b-8 {
+  padding-bottom: var(--box-density-8);
+}
+.pad-b-9 {
+  padding-bottom: var(--box-density-9);
+}
+.pad-b-10 {
+  padding-bottom: var(--box-density-10);
+}
+.pad-b-11 {
+  padding-bottom: var(--box-density-11);
+}
+.pad-b-12 {
+  padding-bottom: var(--box-density-12);
+}
+
+.pad-l .pad-l-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-l .pad-l-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-l .pad-l-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-l .pad-l-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-l, .pad-l-1 {
+  padding-left: var(--box-density-1);
+}
+.pad-l-2 {
+  padding-left: var(--box-density-2);
+}
+.pad-l-3 {
+  padding-left: var(--box-density-3);
+}
+.pad-l-4 {
+  padding-left: var(--box-density-4);
+}
+.pad-l-5 {
+  padding-left: var(--box-density-5);
+}
+.pad-l-6 {
+  padding-left: var(--box-density-6);
+}
+.pad-l-7 {
+  padding-left: var(--box-density-7);
+}
+.pad-l-8 {
+  padding-left: var(--box-density-8);
+}
+.pad-l-9 {
+  padding-left: var(--box-density-9);
+}
+.pad-l-10 {
+  padding-left: var(--box-density-10);
+}
+.pad-l-11 {
+  padding-left: var(--box-density-11);
+}
+.pad-l-12 {
+  padding-left: var(--box-density-12);
+}
+
+.pad-r .pad-r-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-r .pad-r-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-r .pad-r-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-r .pad-r-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-r, .pad-r-1 {
+  padding-right: var(--box-density-1);
+}
+.pad-r-2 {
+  padding-right: var(--box-density-2);
+}
+.pad-r-3 {
+  padding-right: var(--box-density-3);
+}
+.pad-r-4 {
+  padding-right: var(--box-density-4);
+}
+.pad-r-5 {
+  padding-right: var(--box-density-5);
+}
+.pad-r-6 {
+  padding-right: var(--box-density-6);
+}
+.pad-r-7 {
+  padding-right: var(--box-density-7);
+}
+.pad-r-8 {
+  padding-right: var(--box-density-8);
+}
+.pad-r-9 {
+  padding-right: var(--box-density-9);
+}
+.pad-r-10 {
+  padding-right: var(--box-density-10);
+}
+.pad-r-11 {
+  padding-right: var(--box-density-11);
+}
+.pad-r-12 {
+  padding-right: var(--box-density-12);
+}
+
+.pad-all .pad-all-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-all .pad-all-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-all .pad-all-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-all .pad-all-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-all, .pad-all-1 {
+  padding: var(--box-density-1);
+}
+.pad-all-2 {
+  padding: var(--box-density-2);
+}
+.pad-all-3 {
+  padding: var(--box-density-3);
+}
+.pad-all-4 {
+  padding: var(--box-density-4);
+}
+.pad-all-5 {
+  padding: var(--box-density-5);
+}
+.pad-all-6 {
+  padding: var(--box-density-6);
+}
+.pad-all-7 {
+  padding: var(--box-density-7);
+}
+.pad-all-8 {
+  padding: var(--box-density-8);
+}
+.pad-all-9 {
+  padding: var(--box-density-9);
+}
+.pad-all-10 {
+  padding: var(--box-density-10);
+}
+.pad-all-11 {
+  padding: var(--box-density-11);
+}
+.pad-all-12 {
+  padding: var(--box-density-12);
+}
+
+.pad-u .pad-u-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-u .pad-u-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-u .pad-u-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-u .pad-u-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-u, .pad-u-1 {
+  padding-bottom: var(--box-density-1);
+  padding-left: var(--box-density-1);
+  padding-right: var(--box-density-1);
+}
+.pad-u-2 {
+  padding-bottom: var(--box-density-2);
+  padding-left: var(--box-density-2);
+  padding-right: var(--box-density-2);
+}
+.pad-u-3 {
+  padding-bottom: var(--box-density-3);
+  padding-left: var(--box-density-3);
+  padding-right: var(--box-density-3);
+}
+.pad-u-4 {
+  padding-bottom: var(--box-density-4);
+  padding-left: var(--box-density-4);
+  padding-right: var(--box-density-4);
+}
+.pad-u-5 {
+  padding-bottom: var(--box-density-5);
+  padding-left: var(--box-density-5);
+  padding-right: var(--box-density-5);
+}
+.pad-u-6 {
+  padding-bottom: var(--box-density-6);
+  padding-left: var(--box-density-6);
+  padding-right: var(--box-density-6);
+}
+.pad-u-7 {
+  padding-bottom: var(--box-density-7);
+  padding-left: var(--box-density-7);
+  padding-right: var(--box-density-7);
+}
+.pad-u-8 {
+  padding-bottom: var(--box-density-8);
+  padding-left: var(--box-density-8);
+  padding-right: var(--box-density-8);
+}
+.pad-u-9 {
+  padding-bottom: var(--box-density-9);
+  padding-left: var(--box-density-9);
+  padding-right: var(--box-density-9);
+}
+.pad-u-10 {
+  padding-bottom: var(--box-density-10);
+  padding-left: var(--box-density-10);
+  padding-right: var(--box-density-10);
+}
+.pad-u-11 {
+  padding-bottom: var(--box-density-11);
+  padding-left: var(--box-density-11);
+  padding-right: var(--box-density-11);
+}
+.pad-u-12 {
+  padding-bottom: var(--box-density-12);
+  padding-left: var(--box-density-12);
+  padding-right: var(--box-density-12);
+}
+
+.pad-ii .pad-ii-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-ii .pad-ii-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-ii .pad-ii-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-ii .pad-ii-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-ii, .pad-ii-1 {
+  padding-left: var(--box-density-1);
+  padding-right: var(--box-density-1);
+}
+.pad-ii-2 {
+  padding-left: var(--box-density-2);
+  padding-right: var(--box-density-2);
+}
+.pad-ii-3 {
+  padding-left: var(--box-density-3);
+  padding-right: var(--box-density-3);
+}
+.pad-ii-4 {
+  padding-left: var(--box-density-4);
+  padding-right: var(--box-density-4);
+}
+.pad-ii-5 {
+  padding-left: var(--box-density-5);
+  padding-right: var(--box-density-5);
+}
+.pad-ii-6 {
+  padding-left: var(--box-density-6);
+  padding-right: var(--box-density-6);
+}
+.pad-ii-7 {
+  padding-left: var(--box-density-7);
+  padding-right: var(--box-density-7);
+}
+.pad-ii-8 {
+  padding-left: var(--box-density-8);
+  padding-right: var(--box-density-8);
+}
+.pad-ii-9 {
+  padding-left: var(--box-density-9);
+  padding-right: var(--box-density-9);
+}
+.pad-ii-10 {
+  padding-left: var(--box-density-10);
+  padding-right: var(--box-density-10);
+}
+.pad-ii-11 {
+  padding-left: var(--box-density-11);
+  padding-right: var(--box-density-11);
+}
+.pad-ii-12 {
+  padding-left: var(--box-density-12);
+  padding-right: var(--box-density-12);
+}
+
+.pad-tb .pad-tb-tiny {
+  padding: var(--box-density-preset-tiny);
+}
+.pad-tb .pad-tb-small {
+  padding: var(--box-density-preset-small);
+}
+.pad-tb .pad-tb-medium {
+  padding: var(--box-density-preset-medium);
+}
+.pad-tb .pad-tb-large {
+  padding: var(--box-density-preset-large);
+}
+.pad-tb, .pad-tb-1 {
+  padding-top: var(--box-density-1);
+  padding-bottom: var(--box-density-1);
+}
+.pad-tb-2 {
+  padding-top: var(--box-density-2);
+  padding-bottom: var(--box-density-2);
+}
+.pad-tb-3 {
+  padding-top: var(--box-density-3);
+  padding-bottom: var(--box-density-3);
+}
+.pad-tb-4 {
+  padding-top: var(--box-density-4);
+  padding-bottom: var(--box-density-4);
+}
+.pad-tb-5 {
+  padding-top: var(--box-density-5);
+  padding-bottom: var(--box-density-5);
+}
+.pad-tb-6 {
+  padding-top: var(--box-density-6);
+  padding-bottom: var(--box-density-6);
+}
+.pad-tb-7 {
+  padding-top: var(--box-density-7);
+  padding-bottom: var(--box-density-7);
+}
+.pad-tb-8 {
+  padding-top: var(--box-density-8);
+  padding-bottom: var(--box-density-8);
+}
+.pad-tb-9 {
+  padding-top: var(--box-density-9);
+  padding-bottom: var(--box-density-9);
+}
+.pad-tb-10 {
+  padding-top: var(--box-density-10);
+  padding-bottom: var(--box-density-10);
+}
+.pad-tb-11 {
+  padding-top: var(--box-density-11);
+  padding-bottom: var(--box-density-11);
+}
+.pad-tb-12 {
+  padding-top: var(--box-density-12);
+  padding-bottom: var(--box-density-12);
+}
+
+.border, .border-1 {
+  border: 1px solid var(--theme-color-border);
+}
+.border-2 {
+  border: 2px solid var(--theme-color-border);
+}
+.border-3 {
+  border: 3px solid var(--theme-color-border);
+}
+
+.border-t, .border-t-1 {
+  border-top: 1px solid var(--theme-color-border);
+}
+.border-t-2 {
+  border-top: 2px solid var(--theme-color-border);
+}
+.border-t-3 {
+  border-top: 3px solid var(--theme-color-border);
+}
+
+.border-b, .border-b-1 {
+  border-bottom: 1px solid var(--theme-color-border);
+}
+.border-b-2 {
+  border-bottom: 2px solid var(--theme-color-border);
+}
+.border-b-3 {
+  border-bottom: 3px solid var(--theme-color-border);
+}
+
+.border-l, .border-l-1 {
+  border-left: 1px solid var(--theme-color-border);
+}
+.border-l-2 {
+  border-left: 2px solid var(--theme-color-border);
+}
+.border-l-3 {
+  border-left: 3px solid var(--theme-color-border);
+}
+
+.border-r, .border-r-1 {
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-r-2 {
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-r-3 {
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-all, .border-all-1 {
+  border: 1px solid var(--theme-color-border);
+}
+.border-all-2 {
+  border: 2px solid var(--theme-color-border);
+}
+.border-all-3 {
+  border: 3px solid var(--theme-color-border);
+}
+
+.border-u, .border-u-1 {
+  border-bottom: 1px solid var(--theme-color-border);
+  border-left: 1px solid var(--theme-color-border);
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-u-2 {
+  border-bottom: 2px solid var(--theme-color-border);
+  border-left: 2px solid var(--theme-color-border);
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-u-3 {
+  border-bottom: 3px solid var(--theme-color-border);
+  border-left: 3px solid var(--theme-color-border);
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-ii, .border-ii-1 {
+  border-left: 1px solid var(--theme-color-border);
+  border-right: 1px solid var(--theme-color-border);
+}
+.border-ii-2 {
+  border-left: 2px solid var(--theme-color-border);
+  border-right: 2px solid var(--theme-color-border);
+}
+.border-ii-3 {
+  border-left: 3px solid var(--theme-color-border);
+  border-right: 3px solid var(--theme-color-border);
+}
+
+.border-tb, .border-tb-1 {
+  border-top: 1px solid var(--theme-color-border);
+  border-bottom: 1px solid var(--theme-color-border);
+}
+.border-tb-2 {
+  border-top: 2px solid var(--theme-color-border);
+  border-bottom: 2px solid var(--theme-color-border);
+}
+.border-tb-3 {
+  border-top: 3px solid var(--theme-color-border);
+  border-bottom: 3px solid var(--theme-color-border);
+}
+
+.dsp-block {
+  display: block;
+}
+
+.dsp-none {
+  display: none;
+}
+
+.dsp-inline {
+  display: inline;
+}
+
+.dsp-block-inline {
+  display: inline-block;
+}
+
+.dsp-flex-inline {
+  display: inline-flex;
+}
+
+.dsp-tbl {
+  display: table;
+}
+
+.dsp-tbl-row {
+  display: table-row;
+}
+
+.dsp-tbl-cell {
+  display: table-cell;
+}
+
+.dsp-tbl-column {
+  display: table-column;
+}
+
+.pos-abs {
+  position: absolute;
+}
+
+.pos-rel {
+  position: relative;
+}
+
+.pos-stat {
+  position: static;
+}
+
+.pos-fix {
+  position: fixed;
+}
+
+.pos-sticky {
+  position: sticky;
+  top: 0;
+  margin-top: 0;
+}
+
+/*placement*/
+.top-0 {
+  top: var(--box-density-0);
+}
+
+.top-1 {
+  top: var(--box-density-1);
+}
+
+.top-2 {
+  top: var(--box-density-2);
+}
+
+.top-3 {
+  top: var(--box-density-3);
+}
+
+.top-4 {
+  top: var(--box-density-4);
+}
+
+.top-5 {
+  top: var(--box-density-5);
+}
+
+.top-6 {
+  top: var(--box-density-6);
+}
+
+.top-7 {
+  top: var(--box-density-7);
+}
+
+.top-8 {
+  top: var(--box-density-8);
+}
+
+.right-0 {
+  right: var(--box-density-0);
+}
+
+.right-1 {
+  right: var(--box-density-1);
+}
+
+.right-2 {
+  right: var(--box-density-2);
+}
+
+.right-3 {
+  right: var(--box-density-3);
+}
+
+.right-4 {
+  right: var(--box-density-4);
+}
+
+.right-5 {
+  right: var(--box-density-5);
+}
+
+.right-6 {
+  right: var(--box-density-6);
+}
+
+.right-7 {
+  right: var(--box-density-7);
+}
+
+.right-8 {
+  right: var(--box-density-8);
+}
+
+.bottom-0 {
+  bottom: var(--box-density-0);
+}
+
+.bottom-1 {
+  bottom: var(--box-density-1);
+}
+
+.bottom-2 {
+  bottom: var(--box-density-2);
+}
+
+.bottom-3 {
+  bottom: var(--box-density-3);
+}
+
+.bottom-4 {
+  bottom: var(--box-density-4);
+}
+
+.bottom-5 {
+  bottom: var(--box-density-5);
+}
+
+.bottom-6 {
+  bottom: var(--box-density-6);
+}
+
+.bottom-7 {
+  bottom: var(--box-density-7);
+}
+
+.bottom-8 {
+  bottom: var(--box-density-8);
+}
+
+.left-0 {
+  left: var(--box-density-0);
+}
+
+.left-1 {
+  left: var(--box-density-1);
+}
+
+.left-2 {
+  left: var(--box-density-2);
+}
+
+.left-3 {
+  left: var(--box-density-3);
+}
+
+.left-4 {
+  left: var(--box-density-4);
+}
+
+.left-5 {
+  left: var(--box-density-5);
+}
+
+.left-6 {
+  left: var(--box-density-6);
+}
+
+.left-7 {
+  left: var(--box-density-7);
+}
+
+.left-8 {
+  left: var(--box-density-8);
+}
+
+/*radius*/
+.radius-tiny {
+  border-radius: 4px;
+}
+.radius-tiny-t {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.radius-tiny-b {
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+.radius-tiny-l {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+.radius-tiny-r {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.radius-small {
+  border-radius: 8px;
+}
+.radius-small-t {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+.radius-small-b {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+.radius-small-l {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.radius-small-r {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.radius-medium {
+  border-radius: 16px;
+}
+.radius-medium-t {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.radius-medium-b {
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+.radius-medium-l {
+  border-top-left-radius: 16px;
+  border-bottom-left-radius: 16px;
+}
+.radius-medium-r {
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
+}
+
+.shad-1 {
+  box-shadow: var(--box-shad-1);
+}
+
+.shad-2 {
+  box-shadow: var(--box-shad-2);
+}
+
+.shad-3 {
+  box-shadow: var(--box-shad-3);
+}
+
+.shad-4 {
+  box-shadow: var(--box-shad-4);
+}
+
+.shad-5 {
+  box-shadow: var(--box-shad-5);
+}
+
+.gap-tiny {
+  gap: var(--box-density-preset-tiny);
+}
+
+.gap-small {
+  gap: var(--box-density-preset-small);
+}
+
+.gap-medium {
+  gap: var(--box-density-preset-medium);
+}
+
+.gap-large {
+  gap: var(--box-density-preset-large);
+}