lism-css 0.0.10 → 0.0.12

package/src/scss/layout/__switcher.scss

@@ -1,11 +0,0 @@
-.l--switcher {
-	display: flex;
-	flex-wrap: wrap;
-	// gap: 1rem;
-	--threshold: 480px;
-}
-
-.l--switcher > * {
-	flex-grow: 1;
-	flex-basis: calc((var(--threshold) - 100%) * 9999);
-}

package/src/scss/props/__/__aspect.bkup.scss

@@ -1,36 +0,0 @@
-[class*='-aspect\:'] {
-	aspect-ratio: var(--aspect);
-}
-
-// 2.35：1（cinema）, 16：10 (WXGA)
-.-aspect\:16\/9 {
-	--aspect: 16/9;
-}
-.-aspect\:4\/3 {
-	--aspect: 4/3;
-}
-.-aspect\:3\/2 {
-	--aspect: 3/2;
-}
-.-aspect\:2\/1 {
-	--aspect: 2/1;
-}
-.-aspect\:1\/1 {
-	--aspect: 1/1;
-}
-
-.-aspect\:golden {
-	--aspect: 16.18/10;
-}
-.-aspect\:silver {
-	--aspect: 14.14/10;
-}
-.-aspect\:bronze {
-	--aspect: 33.03/10;
-}
-.-aspect\:ogp {
-	--aspect: 1.91/1;
-}
-.-aspect\:cinema {
-	--aspect: 2.35/1;
-}

package/src/scss/props/__/__border.bkup.scss

@@ -1,197 +0,0 @@
-// has--border?
-// bdc だけとかの指定でも -bd:出力？
-/*
-	borderはかなり特殊。
-	--bds, --bdw, --bdc で管理できるようにしていて、そのために基本的に .-bd: クラスを使う。
-	各方向も、 -bd:left, -bd:right など。　( -bd: で全方向。)
-
-	.-bd:{preset}: 方向 or ボーダー用のセマンティックプリセット。
-
-	まず bd を指定してもらう。
-	bdc, bdw などを追加で指定。
-
-*/
-
-// hasBorder?
-// .has--border {
-// 	--bds: solid;
-// 	--bdw: 1px;
-// 	--bdc: currentColor; //var(--base-3);
-// 	--bd: var(--bdw) var(--bds) var(--bdc);
-// }
-
-// hasBorder
-
-// .-bd\:→all
-
-// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
-
-// :where( .-bd\:, .-bdl\:, .-bdr\:, .-bdt\:, .-bdb\:, .-bdx\:, .-bdy\:, .-bdis\:, .-bdbs\:, .-bdie\:, .-bdbe\: )
-:where([class*='-bd:']) {
-	--bds: solid;
-	--bdw: 1px;
-	--bdc: currentColor; //var(--base-3);
-	--bd: var(--bdw) var(--bds) var(--bdc);
-}
-
-// 使用される環境（resetCSS）によって挙動が変わりやすいので 各プロパティを変数で管理する。
-// ブラウザのデフォルト挙動では、bds指定でborder出現してくるが、nextraのresetCSSみたいな特殊な環境だとbdwの指定でborderでてきたりする。
-.-bd\: {
-	// --bd: var(--bdw) var(--bds) var(--bdc);
-	border: var(--bd);
-}
-
-// --------------------
-// bd:presets
-// --------------------
-.-bd\:emphasis {
-	--bds: double;
-	--bdw: 5px;
-	border: var(--bd);
-	// border: 5px double currentColor;
-}
-.-bd\:guide {
-	--bds: dashed;
-	--bdc: rgba(90, 165, 172, 0.4);
-	border: var(--bd);
-	// border: 1px dashed rgba(160, 160, 160, 0.4);
-}
-
-// style固定での初期プリセット的なやつ?
-// .-bd\:solid{--bd: 1px solid var(--c--border)}
-// .-bd\:dashed{--bd: 1px dashed var(--c--border)}
-
-// --------------------
-// 方向指定
-// --------------------
-
-// 方向を分けて使用する場合、 bdw, bdc, bds と併用してもらう？
-// bd='l', bd='l,r',bd='t,b',...コンマ区切り→成分指定
-
-// 一方向のみborderを出現させたい時
-.-bd\:l {
-	border-left: var(--bd);
-}
-.-bd\:r {
-	border-right: var(--bd);
-}
-.-bd\:t {
-	border-top: var(--bd);
-}
-.-bd\:b {
-	border-bottom: var(--bd);
-}
-.-bd\:is {
-	border-inline-start: var(--bd);
-}
-.-bd\:bs {
-	border-block-start: var(--bd);
-}
-// inline-startとかは？
-.-bd\:x {
-	border-inline: var(--bd);
-}
-.-bd\:y {
-	border-block: var(--bd);
-}
-
-// bd, bdl, bdr,...
-// .-bdl{}
-// .-bdl {
-// 	border-left: var(--bd);
-// }
-// .-bdl\: {
-// 	border-left: var(--bdl);
-// }
-// .-bdr\:{border-right: var(--bdr);}
-// .-bdt\:{border-top: var(--bdt);}
-// .-bdb\:{border-bottom: var(--bdb);}
-
-.-bdl\:n {
-	border-left: none;
-}
-.-bdr\:n {
-	border-right: none;
-}
-.-bdt\:n {
-	border-top: none;
-}
-.-bdb\:n {
-	border-bottom: none;
-}
-.-bdis\:n {
-	border-inline-start: none;
-}
-.-bdbs\:n {
-	border-block-start: none;
-}
-.-bdie\:n {
-	border-inline-end: none;
-}
-.-bdbe\:n {
-	border-block-end: none;
-}
-
-// bdw="1px 1px 0 0" とかでも指定できる
-// .-bdw\:{border-width: var(--bdw);}
-// .-bdw\:1{--bdw: 1px;}
-
-// thin, medium, thick?
-// .-bdw\:medium{--bdw: var(--bdw--medium)}
-
-// .-bdc\:{border-color: var(--bdc);}
-
-// .-bdc\: {}
-// .-bdc\:i {
-// 	--bdc: inherit;
-// }
-.-bdc\:main {
-	--bdc: var(--main);
-}
-// .-bdc\:accent {
-// 	--bdc: var(--accent);
-// }
-
-// 10,20?
-
-// .-bdc\:strong {
-//--bdc: var(--bdc--strong);
-// }
-
-// bdc:0
-.-bdc\:t {
-	--bdc: transparent;
-}
-// .-bdc\:divider {
-// 	--bdc: var(--bdc--divider);
-// }
-.-bdc\:table {
-	--bdc: var(--table-bdc);
-}
-// .-bdc\:white {
-// 	--bdc: var(--white);
-// }
-// .-bdc\:black {
-// 	--bdc: var(--black);
-// }
-
-// border-style使うと全方向にborder出てくることに注意。
-// bds→ --bdsのみ出力。 borderStyle→border-style出力
-// .-bds\:{border-style: var(--bds);}
-
-// .-bds\:n{border-style:none;}
-// .-bds\:h{border-style:hidden;}
-.-bds\:dt {
-	--bds: dotted;
-}
-.-bds\:ds {
-	--bds: dashed;
-}
-.-bds\:s {
-	--bds: solid;
-}
-.-bds\:db {
-	--bds: double;
-}
-
-// bds,borderSolidで挙動変える？

package/src/scss/props/__/__color.bkup.scss

@@ -1,67 +0,0 @@
-/* stylelint-disable */
-
-//カラー系
-[class*='-c:'] { color: var(--c) !important }
-.-c\:main { --c: var(--main) }
-// .-c\:accent { --c: var(--accent) }
-.-c\:content { --c: var(--content) }
-.-c\:content-2 { --c: var(--content-2) }
-.-c\:content-3 { --c: var(--content-3) }
-.-c\:base { --c: var(--base) }
-// .-c\:base-2 { --c: var(--base-2) }
-// .-c\:base-3 { --c: var(--base-3) }
-
-// .-c\:pale { --c: green; }
-// .-c\:opposite { --c: var(--c--opposite); }
-
-
-// .-c\:current{--c: currentColor;}
-
-[class*='-bgc:'] {background-color: var(--bgc) !important}
-.-bgc\:base { --bgc: var(--base) }
-.-bgc\:base-2 { --bgc: var(--base-2) }
-.-bgc\:base-3 { --bgc: var(--base-3) }
-.-bgc\:content { --bgc: var(--content) }
-.-bgc\:main {--bgc: var(--main);}
-// // .-bgc\:accent {--bgc: var(--accent);}
-.-bgc\:t {--bgc: transparent;}
-
-// .-bgc\:pale {--bgc: red;}
-// .-bgc\:opposite {--bgc: var(--bgc--opposite)}
-// .-bgc\:i {
-// 	--bgc: inherit;
-// }
-
-
-
-// .-keycolor\:main { --keycolor: var(--main) }
-// .-keycolor\:accent { --keycolor: var(--accent) }
-// .-keycolor\:gray { --keycolor: var(--gray) }
-// .-keycolor\:red { --keycolor: var(--red) }
-// .-keycolor\:orange { --keycolor: var(--orange) }
-// .-keycolor\:yellow { --keycolor: var(--yellow) }
-// .-keycolor\:green { --keycolor: var(--green) }
-// .-keycolor\:blue { --keycolor: var(--blue) }
-// .-keycolor\:purple { --keycolor: var(--purple) }
-// .-keycolor\:pink { --keycolor: var(--pink) }
-
-// ミックスkカラーutility
-// @supports (color: color-mix(in srgb, #000, #fff)) {
-.-c\:mix {
-	--c-mixbase: var(--content);
-	// --c-mixcolor: var(--keycolor);
-	--c-mixper: var(--cbox-mixper--txt);
-	--c: color-mix(in srgb, var(--c-mixbase), var(--c-mixcolor) var(--c-mixper));
-}
-.-bgc\:mix {
-	--bgc-mixbase: transparent;
-	// --bgc-mixcolor: var(--keycolor);
-	--bgc-mixper: var(--cbox-mixper--bg);
-	--bgc: color-mix(in srgb, var(--bgc-mixbase), var(--bgc-mixcolor) var(--bgc-mixper));
-}
-.-bdc\:mix {
-	--bdc-mixbase: transparent;
-	// --bdc-mixcolor: var(--keycolor);
-	--bdc-mixper: var(--cbox-mixper--bdc);
-	--bdc: color-mix(in srgb, var(--bdc-mixbase), var(--bdc-mixcolor) var(--bdc-mixper));
-}

package/src/scss/props/__/__display.bukup.scss

@@ -1,11 +0,0 @@
-/* stylelint-disable */
-
-.-d\:{display: var(--d) !important;}
-.-d\:n{display: none !important;}
-.-d\:b{display: block !important;}
-.-d\:f{display: flex !important;}
-.-d\:g{display: grid !important;}
-.-d\:i{ display: inline !important; }
-.-d\:if{ display: inline-flex !important; }
-.-d\:ig{ display: inline-grid !important; }
-.-d\:ib{ display: inline-block !important; }

package/src/scss/props/__/__flex-props.bkup.scss

@@ -1,66 +0,0 @@
-@use '../query' as query;
-
-/* stylelint-disable */
-// .-ord\:1 { order: 1 }
-// .-ord\:0 { order: 0 }
-// .-ord\:-1 { order: -1 }
-
-// fxf flex-flow: row wrap;
-// .-fxf\: {
-// 	// --fxw: nowrap;// --fxd: row;// --fxf: var(--fxd) var(--fxw);
-// 	flex-flow: var(--fxf);
-// }
-
-
-// l--flex or fxf の 専用プロパティ。
-
-// flex-wrap
-// .-fxw\: { flex-wrap: var(--fxw) }
-.-fxw\:w { flex-wrap: wrap }
-// .-fxw\:nw { flex-wrap: nowrap } // default
-
-// flex-direction
-// .-fxd\: { flex-direction: var(--fxd) }
-.-fxd\:c { flex-direction: column }
-.-fxd\:cr { flex-direction: column-reverse }
-.-fxd\:r { flex-direction: row }
-.-fxd\:rr { flex-direction: row-reverse }
-
-
-// is--flexItem?
-.-fx\:{ flex: var(--fx)}
-.-fx\:1{ flex: 1 }
-
-.-fxsh\: { flex-shrink: var(--fxsh) }
-.-fxsh\:0 { flex-shrink: 0 }
-// .-fxsh\:1 { flex-shrink: 1 }
-
-.-fxg\: { flex-grow: var(--fxg) }
-.-fxg\:1 { flex-grow: 1 }
-// .-fxg\:0 { flex-grow: 0 }
-
-.-fxb\: { flex-basis: var(--fxb) }
-// .-fxb\:100 {flex-basis:100%}
-// .-fxb\:a {flex-basis:auto}
-
-// fxw, fxb は調整したいことも多いのでデフォルトでBP対応。
-// 検討: 一括指定の fx, fxf だけ用意しておけばとりあえず全部対応できるのでは？（不要な上書きが発生しまうデメリットあり）
-@include query.bp-up('sm') {
-	// .-fxf\@sm { flex-flow: var(--fxf--sm); }
-	.-fxw\@sm { flex-wrap: var(--fxw--sm); }
-	// .-fxd\@sm { flex-direction: var(--fxd--sm); }
-	
-	// .-fx\@sm{ flex: var(--fx--sm)}
-	.-fxb\@sm { flex-basis: var(--fxb--sm); }
-	// .-fxg\@sm { flex-grow: var(--fxg--sm); }
-	// .-fxsh\@sm { flex-shrink: var(--fxsh--sm); }
-	
-}
-@include query.bp-up('md') {
-	.-fxw\@md { flex-wrap: var(--fxw--md); }
-	.-fxb\@md { flex-basis: var(--fxb--md); }
-}
-@include query.bp-up('lg') {
-	.-fxw\@lg { flex-wrap: var(--fxw--lg); }
-	.-fxb\@lg { flex-basis: var(--fxb--lg); }
-}

package/src/scss/props/__/__gap.bkup.scss

@@ -1,18 +0,0 @@
-@use '../setting' as setting;
-
-/* stylelint-disable */
-
-// [class*='-gap:'] {gap: var(--gap);}
-.-gap\: {gap: var(--colg);}
-.-colg\: {column-gap: var(--colg);}
-.-rowg\: {row-gap: var(--rowg);}
-
-.-gap\:0 {--gap: 0;}
-
-@each $s in setting.$util_spaces {
-	.-gap\:#{$s} {gap: var(--s--#{$s});}
-}
-
-@each $em in setting.$util_em_tokens {
-	.-gap\:em#{$em} {gap: var(--em--#{$em});}
-}

package/src/scss/props/__/__grid-props.bkup.scss

@@ -1,158 +0,0 @@
-@use '../query' as query;
-
-/* stylelint-disable */
-
-/*
-gtc, gtr, gta は、l--grid では変数で受け取る
-
-
-parent側のBP対応: → 今はgtc, gtr, gtaのみ。 gtもいるか...?
-item側: row/column だけ BP対応。（areaは親側でエリアを組み替えればOK、かつ、row/columnにもエリア名を指定できるので不要と判断。)
-*/
-
-// --------------------
-// grid
-// --------------------
-
-// --------------------
-// grid-template (l--grid で定義している)
-// --------------------
-// [dir='rtl'] での上書きを変数でできるので grid ではなく、gt でやっている。
-.-gt\: { grid-template: var(--gt); }
-.-gt\:side\:s, .-gt\:side\:l { grid-template: 'side .' / auto 1fr; }
-.-gt\:side\:e, .-gt\:side\:r { grid-template: '. side' / 1fr auto; }
-// l--grid--2col? → l--sidSwap でできるのでは
-
-// center が広がるタイプの 3列/3行レイアウト
-// .-gt\:3row { grid-template: 'start' 'center' 1fr 'end' / 100%}
-// .-gt\:3col { grid-template: 'start center end' / auto 1fr auto; }
-
-// --------------------
-// grid-template-props
-// --------------------
-.-gta\: { grid-template-areas: var(--gta); }
-.-gtc\: { grid-template-columns: var(--gtc); }
-.-gtr\: { grid-template-rows: var(--gtr); }
-
-
-// .-gta\:3col\:ltr,
-// .-gta\:3col {grid-template-areas: 'start center end';}
-// .-gta\:3row {grid-template-areas: 'start' 'center' 'end';}
-
-// .-gtc\:a1a { grid-template-columns: auto 1fr auto }
-// .-gtr\:a1a { grid-template-rows: auto 1fr auto }
-
-// --------------------
-// grid-auto-
-// -------------------- 
-// .-gaf\: { grid-auto-flow: var(--gaf); }
-// default: row
-// .-gaf\:rd { grid-auto-flow: row dense; }
-// .-gaf\:c { grid-auto-flow: column; }
-// .-gaf\:cd { grid-auto-flow: column dense; }
-
-// styleでいいか？
-// .-gac\: { grid-auto-columns: var(--gac); }
-// .-gar\: { grid-auto-rows: var(--gar); }
-
-
-// --------------------
-// grid-item系
-// --------------------
-// bpサポートあるので変数
-.-ga\:{ grid-area: var(--ga) }
-.-ga\:side {grid-area: side;}
-.-ga\:s{ grid-area: start; }
-.-ga\:e{ grid-area: end; }
-.-ga\:c{ grid-area: center; }
-// .-ga\:fix{ grid-area: fix; }
-// .-ga\:l{ grid-area: left; }
-// .-ga\:r{ grid-area: right; }
-// .-ga\:t{ grid-area: top; }
-// .-ga\:b{ grid-area: bottom; }
-
-// start
-// end
-// .-ga\:head{--ga: head; }
-// .-ga\:foot{--ga: foot; }
-// .-ga\:body{--ga: body; }
-
-// :where(.-gr\:){--grs: auto;--gre: auto;}
-// .-gr\:{ grid-row: var(--grs) / var(--gre) }
-
-// grid-row
-// :where(.-gr\:){
-// 	--grs: auto;
-// 	--gre: auto;
-// 	--gr: var(--grs) / var(--gre);
-// }
-// .-gr\:{
-// 	grid-row: var(--gr);
-// }
-// .-grs\:-1{ --grs: -1 }
-// .-grs\:1{ --grs: 1 }
-// .-grs\:2{ --grs: 2 }
-// .-grs\:3{ --grs: 3 }
-// .-gre\:-1{ --gre: -1 }
-
-
-// grid-row
-// memo: grsで開始位置、greで終了位置を指定する。gre側のspanが使えるような設計にする。
-// 最後から 2つ → grid-row: span 2 / -1
-
-.-gr\:{ grid-row: var(--gr) } // [class*="-gr:"]{ grid-row: var(--gr); }
-.-gr\:span2{ grid-row: span 2 / span 2 }
-.-gr\:full{ grid-row: 1 / -1 }
-.-gr\:1{ grid-row: 1 }
-.-gr\:2{ grid-row: 2 }
-.-gr\:3{ grid-row: 3 }
-
-// .-grs\:1{ grid-row-start: 1 }
-// .-grs\:2{ grid-row-start: 2 }
-// .-grs\:3{ grid-row-start: 3 }
-
-.-gre\:-1{ grid-row-end: -1 }
-// .-gre\:span2{ grid-row-end: span 2}
-
-
-// grid-column
-// [class*="-gc:"]{ grid-column: var(--gc); }
-.-gc\:{ grid-column: var(--gc) }
-.-gc\:span2{ grid-column: span 2 / span 2 }
-.-gr\:full{ grid-column: 1 / -1 }
-.-gc\:1{ grid-column: 1 }
-.-gc\:2{ grid-column: 2 }
-.-gc\:3{ grid-column: 3 }
-.-gce\:-1{ grid-column-end: -1 }
-
-
-// -gt:@sm:, -gt:@sm 
-
-
-// gt@sm すると　全部上書きしてしまう.--gtc, --gt をわけて使うならgtは使わないようにする必要がある。
-// gtc 変える なら gtr も変えることがほとんどだろうから、gt でやってもらう? → RatioGridはgtcのみでコントロールしているので必要。
-// ただし、gta は独立して管理できるようにする。
-@include query.bp-up('sm') {
-	.-gt\@sm { grid-template: var(--gt--sm) }
-	.-gta\@sm { grid-template-areas: var(--gta--sm) }
-	.-gtc\@sm { grid-template-columns: var(--gtc--sm) }
-	.-gtr\@sm { grid-template-rows: var(--gtr--sm) }
-	.-gc\@sm { grid-column: var(--gc--sm) }
-	.-gr\@sm { grid-row: var(--gr--sm) }
-}
-@include query.bp-up('md') {
-	.-gt\@md { grid-template: var(--gt--md) }
-	.-gta\@md { grid-template-areas: var(--gta--md) }
-	.-gtc\@md { grid-template-columns: var(--gtc--md) }
-	.-gtr\@md { grid-template-rows: var(--gtr--md) }
-	.-gc\@md { grid-column: var(--gc--md) }
-	.-gr\@md { grid-row: var(--gr--md) }
-}
-@include query.bp-up('lg') {
-	.-gt\@lg { grid-template: var(--gt--lg) }
-	.-gta\@lg { grid-template-areas: var(--gta--lg) }
-	.-gtc\@lg { grid-template-columns: var(--gtc--lg) }
-	.-gtr\@lg { grid-template-rows: var(--gtr--lg) }
-	.-gc\@lg { grid-column: var(--gc--lg) }
-	.-gr\@lg { grid-row: var(--gr--lg) }
-}

package/src/scss/props/__/__margin.bkup.scss

@@ -1,92 +0,0 @@
-// @use '../query' as query;
-@use '../setting' as setting;
-
-/* stylelint-disable */
-
-// --------------------
-
-// [class*="..."] にする...？
-// .-hoge--m:  → -m: にひっかかるので注意
-
-// all
-.-m\: { margin: var(--m) !important }
-.-m\:0{ margin: 0 !important }
-.-m\:a{ margin: auto !important }
-
-// x, y
-.-mx\: { margin-inline: var(--mx) !important }
-.-my\: { margin-block: var(--my) !important }
-.-mx\:0{margin-inline: 0 !important}
-.-my\:0{margin-block: 0 !important} 
-.-mx\:a{margin-inline: auto !important}
-.-my\:a{margin-block: auto !important}
-
-// sides
-.-mt\: { margin-top: var(--mt) !important }
-.-mb\: { margin-bottom: var(--mb) !important }
-.-ml\: { margin-left: var(--ml) !important }
-.-mr\: { margin-right: var(--mr) !important }
-
-
-.-mis\: { margin-inline-start: var(--mis) !important}
-[class*="-mbs:"] { margin-block-start: var(--mbs) !important}
-
-.-mt\:a{margin-top: auto !important}
-.-mb\:a{margin-bottom: auto !important}
-.-ml\:a{margin-left: auto !important}
-.-mr\:a{margin-right: auto !important}
-.-mis\:a{margin-inline-start: auto;}
-.-mbs\:a{--mbs: auto;}
-.-mt\:0{margin-top: 0 !important}
-.-mb\:0{margin-bottom: 0 !important}
-.-ml\:0{margin-left: 0 !important}
-.-mr\:0{margin-right: 0 !important}
-.-mis\:0{margin-inline-start: 0;}
-.-mbs\:0{--mbs: 0;}
-
-
-@each $s in setting.$util_spaces {
-	// .-m\:#{$s} {--m: var(--s--#{$s});}
-	// .-mis\:#{$s} { --mis: var(--s--#{$s});}
-
-	// flowレイアウトで使うので mbs はユーティリティ用意する
-	.-mbs\:#{$s} { --mbs: var(--s--#{$s});}
-}
-
-
-// @include query.bp-up('sm'){
-// 	.-m\@sm { margin: var(--m--sm) !important }
-// 	.-mx\@sm { margin-inline: var(--mx--sm) !important }
-// 	.-my\@sm { margin-block: var(--my--sm) !important }
-// 	// .-mt\@sm { margin-top: var(--mt--sm) !important }
-// 	// .-mr\@sm { margin-right: var(--mr--sm) !important }
-// 	// .-mb\@sm { margin-bottom: var(--mb--sm) !important }
-// 	// .-ml\@sm { margin-left: var(--ml--sm) !important }
-// 	.-mis\@sm { margin-inline-start: var(--mis--sm) !important }
-// 	.-mbs\@sm { margin-block-start: var(--mbs--sm) !important }
-// }
-
-// @include query.bp-up('md'){
-// 	.-m\@md { margin: var(--m--md) !important }
-// 	.-mx\@md { margin-inline: var(--mx--md) !important }
-// 	.-my\@md { margin-block: var(--my--md) !important }
-// 	// .-mt\@md { margin-top: var(--mt--md) !important }
-// 	// .-mr\@md { margin-right: var(--mr--md) !important }
-// 	// .-mb\@md { margin-bottom: var(--mb--md) !important }
-// 	// .-ml\@md { margin-left: var(--ml--md) !important }
-// 	.-mis\@md { margin-inline-start: var(--mis--md) !important }
-// 	.-mbs\@md { margin-block-start: var(--mbs--md) !important }
-// }
-
-// @include query.bp-up('lg'){
-// 	.-m\@lg { margin: var(--m--lg) !important }
-// 	.-mx\@lg { margin-inline: var(--mx--lg) !important }
-// 	.-my\@lg { margin-block: var(--my--lg) !important }
-// 	// .-mt\@lg { margin-top: var(--mt--lg) !important }
-// 	// .-mr\@lg { margin-right: var(--mr--lg) !important }
-// 	// .-mb\@lg { margin-bottom: var(--mb--lg) !important }
-// 	// .-ml\@lg { margin-left: var(--ml--lg) !important }
-// 	.-mis\@lg { margin-inline-start: var(--mis--lg) !important }
-// 	.-mbs\@lg { margin-block-start: var(--mbs--lg) !important }
-// }
-