CSS generated by SX (https://github.com/adeira/sx) on a more complex page (Abacus BO - products grid)

sx.generated.css

.hECNM {
  --sx-error-lighter: 247, 212, 214;
}
._4wLsl0 {
  --sx-error-light: 255, 26, 26;
}
._4Coem6 {
  --sx-error: 238, 0, 0;
}
.zPcsP {
  --sx-error-dark: 197, 0, 0;
}
.s14ZM {
  --sx-success-lighter: 211, 229, 255;
}
._3PRPuG {
  --sx-success-light: 50, 145, 255;
}
._2NdzlA {
  --sx-success: 0, 112, 243;
}
._3TRvHf {
  --sx-success-dark: 7, 97, 209;
}
._3PRq3T {
  --sx-warning-lighter: 255, 239, 207;
}
.l86k6 {
  --sx-warning-light: 247, 185, 85;
}
._3TxD4h {
  --sx-warning: 245, 166, 35;
}
._2vXMS4 {
  --sx-warning-dark: 171, 87, 10;
}
._4ry2sC {
  --sx-radius: 5px;
}
.p2ywF {
  --sx-shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
}
._3zfgQH {
  --sx-shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
}
._1dYy7s {
  --sx-shadow-large: 0 30px 60px rgba(0, 0, 0, 0.12);
}
.oSJSk {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
    Apple Color Emoji, Segoe UI Emoji;
}
._3fsZAI {
  direction: ltr;
}
._5Z1ik {
  direction: rtl;
}
._2TrjJj {
  letter-spacing: 0px;
}
.j8fk3 {
  --sx-background: 255, 255, 255;
}
._1yTOny {
  --sx-accent-1: 227, 227, 227;
}
._2FPZOd {
  --sx-accent-2: 198, 199, 200;
}
._3wgEy1 {
  --sx-accent-3: 170, 171, 172;
}
.qrCF2 {
  --sx-accent-4: 142, 143, 144;
}
._1lBUfD {
  --sx-accent-5: 113, 114, 116;
}
._3dQusN {
  --sx-accent-6: 85, 86, 89;
}
.LScLB {
  --sx-accent-7: 56, 58, 61;
}
.fCoD1 {
  --sx-foreground: 28, 30, 33;
}
._1GlHzn {
  --sx-link-text-color: 3, 102, 214;
}
._1fVITV {
  --sx-background: 51, 51, 51;
}
._1Jcjbf {
  --sx-accent-1: 77, 77, 77;
}
._2v5jEg {
  --sx-accent-2: 102, 102, 102;
}
._1vKWZs {
  --sx-accent-3: 128, 128, 128;
}
._2tYBAn {
  --sx-accent-4: 153, 153, 153;
}
._1MBudP {
  --sx-accent-5: 179, 179, 179;
}
._27zNob {
  --sx-accent-6: 204, 204, 204;
}
._2jEj3G {
  --sx-accent-7: 230, 230, 230;
}
._2sSq9y {
  --sx-foreground: 255, 255, 255;
}
._4e55FO {
  --sx-link-text-color: 88, 166, 255;
}
@media (prefers-color-scheme: light) {
  ._1vGeT1._1vGeT1 {
    --sx-background: 255, 255, 255;
  }
  ._2Q3JFb._2Q3JFb {
    --sx-accent-1: 227, 227, 227;
  }
  ._46cRO1._46cRO1 {
    --sx-accent-2: 198, 199, 200;
  }
  ._3fOtFY._3fOtFY {
    --sx-accent-3: 170, 171, 172;
  }
  ._1T2qZO._1T2qZO {
    --sx-accent-4: 142, 143, 144;
  }
  ._2MSkWt._2MSkWt {
    --sx-accent-5: 113, 114, 116;
  }
  ._2jTD85._2jTD85 {
    --sx-accent-6: 85, 86, 89;
  }
  .kPXVz.kPXVz {
    --sx-accent-7: 56, 58, 61;
  }
  ._2Hu6Zq._2Hu6Zq {
    --sx-foreground: 28, 30, 33;
  }
  ._377rTF._377rTF {
    --sx-link-text-color: 3, 102, 214;
  }
}
@media (prefers-color-scheme: dark) {
  .Yfbsu.Yfbsu {
    --sx-background: 51, 51, 51;
  }
  ._1r12YZ._1r12YZ {
    --sx-accent-1: 77, 77, 77;
  }
  ._1zTkbd._1zTkbd {
    --sx-accent-2: 102, 102, 102;
  }
  ._2MRYJZ._2MRYJZ {
    --sx-accent-3: 128, 128, 128;
  }
  ._2VS0J3._2VS0J3 {
    --sx-accent-4: 153, 153, 153;
  }
  .aPfL4.aPfL4 {
    --sx-accent-5: 179, 179, 179;
  }
  ._2UEcqi._2UEcqi {
    --sx-accent-6: 204, 204, 204;
  }
  ._2fF0s7._2fF0s7 {
    --sx-accent-7: 230, 230, 230;
  }
  ._4gmWnG._4gmWnG {
    --sx-foreground: 255, 255, 255;
  }
  ._4bm61Y._4bm61Y {
    --sx-link-text-color: 88, 166, 255;
  }
}
._4k2hM2 {
  padding-top: 2px;
}
._3zb3J8 {
  padding-right: 7px;
}
._3uQJ4i {
  padding-bottom: 2px;
}
._2ycLqK {
  padding-left: 7px;
}
._1XsEwL {
  border-radius: var(--sx-radius);
}
._2bR8Vw {
  line-height: 1;
}
._1TPA4v {
  font-size: smaller;
}
.UT9Db {
  background-color: rgba(var(--sx-foreground), 0.1);
}
._1cJrQ0 {
  color: rgba(var(--sx-foreground));
}
.OWWIb {
  border: 1px solid rgba(var(--sx-foreground));
}
.MJg9M {
  background-color: rgba(var(--sx-error-dark), 0.1);
}
._1Z1g7e {
  color: rgba(var(--sx-error-dark));
}
.ofhEZ {
  border: 1px solid rgba(var(--sx-error-dark));
}
._2wYzkN {
  background-color: rgba(var(--sx-success-dark), 0.1);
}
._1isL2x {
  color: rgba(var(--sx-success-dark));
}
._3BdvOb {
  border: 1px solid rgba(var(--sx-success-dark));
}
._1DykMY {
  background-color: rgba(var(--sx-warning-dark), 0.1);
}
._47BNb3 {
  color: rgba(var(--sx-warning-dark));
}
._2ROifK {
  border: 1px solid rgba(var(--sx-warning-dark));
}
._2Cn7Es {
  display: inline-block;
}
._2h8fCA {
  padding-top: 10px;
}
._3KDHS7 {
  padding-right: 15px;
}
._1Dvao8 {
  padding-bottom: 10px;
}
._2g8DWw {
  padding-left: 15px;
}
.T4SJ0 {
  cursor: pointer;
}
._3yradJ {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
._110aIu {
  transition-property: all;
}
._26seFD {
  transition-duration: 150ms;
}
._3ivvxV {
  transition-timing-function: ease-in-out;
}
._2kUDLJ {
  font: inherit;
}
._2fHuVq {
  border: 1px solid rgba(var(--sx-accent-2));
}
.lftru {
  color: rgba(var(--sx-foreground), 0.5);
}
._1pTFaY:hover {
  background-color: rgba(var(--sx-foreground), 0.1);
}
._2DqFrl:hover {
  border: 1px solid rgba(var(--sx-accent-2));
}
._1Kmfck:hover {
  color: rgba(var(--sx-foreground), 0.5);
}
._3ZdXBm:hover {
  cursor: not-allowed;
}
.C6uII:hover {
  border: 1px solid rgba(var(--sx-foreground));
}
._2qY4cN:hover {
  background-color: rgba(var(--sx-background));
}
._2Npsvd:hover {
  color: rgba(var(--sx-error));
}
._4jgKcz:hover {
  color: rgba(var(--sx-success));
}
._47tun9:hover {
  color: rgba(var(--sx-warning));
}
.crve5:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}
.gy8aG:hover {
  opacity: 1;
}
._30RBbb:hover {
  -webkit-text-decoration: none;
  text-decoration: none;
}
.xPjuS:hover {
  border-color: rgba(var(--sx-accent-2));
}
._1c94WN:hover {
  border-top-left-radius: 4px;
}
.Balac:hover {
  border-bottom-left-radius: 4px;
}
.mtg8d {
  background-color: rgba(var(--sx-background));
}
.qTbAy {
  background-color: rgba(var(--sx-error));
}
._4COHQr {
  color: rgba(var(--sx-background));
}
._1ADhRJ {
  border: 1px solid rgba(var(--sx-error));
}
._1mEZ4 {
  background-color: rgba(var(--sx-success));
}
._12fCO2 {
  border: 1px solid rgba(var(--sx-success));
}
._1nMkvH {
  background-color: rgba(var(--sx-warning));
}
._2PJoGL {
  border: 1px solid rgba(var(--sx-warning));
}
._3IoPo2 {
  background-color: inherit;
}
._3gsDP9 {
  border: none;
}
.f6wvk {
  color: rgba(var(--sx-link-text-color));
}
._4pgUgJ {
  margin-top: 0px;
}
._37wPvZ {
  margin-right: 0px;
}
._32zari {
  margin-bottom: 0px;
}
._3DMcik {
  margin-left: 0px;
}
._2YU8Lt {
  padding-top: 0px;
}
._1b3SDU {
  padding-right: 0px;
}
._4vQ4Ez {
  padding-bottom: 0px;
}
._1lfgYw {
  padding-left: 0px;
}
._3zbYuf {
  opacity: 0.85;
}
._1jxTLC {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
._3hpYBt {
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
._2UBzk {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.aVeUZ {
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
._3wuRdF {
  border: 1px solid rgba(var(--sx-accent-1));
}
._2lswF9 {
  padding-top: 16px;
}
._4iefj2 {
  padding-right: 16px;
}
.dzo4X {
  padding-bottom: 16px;
}
._1kXjun {
  padding-left: 16px;
}
.E0qTF {
  margin-block-end: 5px;
}
._2cyVVa {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.IZmjE {
  font-weight: bold;
}
._3VlxBl {
  color: rgb(var(--sx-foreground));
}
._2QKgxN {
  background: rgb(var(--sx-background));
}
._2qKLUE {
  font-family: -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', 'Fira Sans', Avenir,
    'Helvetica Neue', 'Lucida Grande', sans-serif;
}
._32EOgm {
  height: 100vh;
}
._4w4yCp {
  text-align: center;
}
._3iXlFA {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
._1sNBfm {
  text-align: left;
}
.EOSYJ {
  line-height: 49px;
}
._4ch5Or {
  height: 49px;
}
.Dk2Yc {
  vertical-align: middle;
}
._3Xvt6z {
  border-inline-end: 1px solid rgba(var(--sx-foreground), 0.3);
}
._4ySuLD {
  -webkit-margin-end: 20px;
  margin-inline-end: 20px;
}
._2d9qOe {
  padding-block: 10px;
}
.F4If3 {
  -webkit-padding-end: 23px;
  padding-inline-end: 23px;
}
._4pSWz9 {
  -webkit-padding-start: 0px;
  padding-inline-start: 0px;
}
._7W60K {
  font-size: 24px;
}
._1qmghm {
  font-weight: 500;
}
.vAyPn {
  vertical-align: top;
}
._97JUl {
  font-size: 14px;
}
._3NtT9c {
  font-weight: normal;
}
._29oahj {
  line-height: inherit;
}
._3S8AMZ {
  width: 500px;
}
._4Dvy7h {
  padding-top: 0.5rem;
}
._4qaS8Q {
  padding-right: 2rem;
}
.HMO0s {
  padding-bottom: 0.5rem;
}
._2DcAgG {
  padding-left: 2rem;
}
._4u67BB {
  margin-block: 2rem;
}
.FrdBJ {
  background-color: rgba(var(--sx-warning-lighter));
}
._2eOj9i {
  white-space: pre-wrap;
}
.DVacY {
  background-color: rgba(var(--sx-accent-2));
}
._4yoXEL {
  display: none;
}
.KFb06 {
  object-fit: cover;
}
._2WMoMO {
  object-position: center center;
}
._1K0wpq {
  border: var(--sx-kbd-border, 1px solid #b4b4b4);
}
._22AmOz {
  font-size: 0.85em;
}
._3FhgeU {
  font-weight: 700;
}
._29fS09 {
  padding-right: 4px;
}
.KdK4y {
  padding-left: 4px;
}
._1MU0tw {
  white-space: nowrap;
}
.v2kHO {
  -webkit-text-decoration: none;
  text-decoration: none;
}
._4otlid {
  fill: rgba(var(--sx-accent-5));
}
._1Eh1nN {
  height: 30px;
}
._3dExaG {
  -webkit-animation-name: _2vdAuj;
  animation-name: _2vdAuj;
}
._1gEEHB {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
._4n1cIx {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
._2uhPzS {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
._1fZII6 {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}
._4xvReW {
  -webkit-transform: translateY(1.4em);
  -moz-transform: translateY(1.4em);
  -ms-transform: translateY(1.4em);
  transform: translateY(1.4em);
}
._2pOtAU:nth-child(1) {
  -webkit-animation-delay: 140ms;
  animation-delay: 140ms;
}
._27Gat8:nth-child(2) {
  -webkit-animation-delay: 70ms;
  animation-delay: 70ms;
}
.byG4T {
  position: absolute;
}
.UrbL5 {
  max-width: 250px;
}
._3j8arA {
  background-color: rgba(var(--sx-foreground));
}
._25fmqo {
  padding-top: 5px;
}
._18S2bQ {
  padding-right: 10px;
}
._1YTkk9 {
  padding-bottom: 5px;
}
._3RfpBN {
  padding-left: 10px;
}
._1W0HkV {
  cursor: help;
}
.AA0TY {
  border-block-end: 2px dotted;
}
._35e2c3 {
  color: rgba(var(--sx-accent-4));
}
._2kXkiW {
  position: fixed;
}
._3V3JYi {
  top: 0px;
}
._2LJcKg {
  left: 0px;
}
.oxTNi {
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}
._2stD4v {
  width: 100vw;
}
._1xG4K7 {
  overflow-x: auto;
}
._2wYlSU {
  overflow-y: auto;
}
.eQZGL {
  z-index: 2000;
}
._2dyUDq {
  bottom: 0px;
}
._15AEPA {
  width: 100%;
}
._3vG95X {
  height: 100%;
}
._4r93Xa {
  opacity: 0.25;
}
._3wnVwO {
  pointer-events: all;
}
._4oDGyl {
  z-index: -1;
}
._1XQZe1 {
  width: 600px;
}
._20grUl {
  max-width: 100%;
}
._3Zv8E3 {
  height: 400px;
}
._1JnHsM {
  max-height: 100%;
}
._3Ircq3 {
  box-shadow: var(--sx-shadow-large);
}
.tuXSb {
  color: rgba(var(--sx-money-text-color, var(--sx-foreground)));
}
._2qx9aM {
  -webkit-transition: inherit;
  transition: inherit;
}
.FlpQn {
  padding-top: 7px;
}
._4i5yN3 {
  padding-right: 12px;
}
._2KSu4m {
  padding-bottom: 7px;
}
._1OQvHJ {
  padding-left: 12px;
}
._1vFvNt {
  color: rgba(var(--sx-success));
}
._247Icx {
  color: rgba(var(--sx-error));
}
._2FC9hv {
  color: rgba(var(--sx-warning));
}
._3h6xZl {
  position: relative;
}
._1SpfBi {
  z-index: 2;
}
._3qrYDw {
  transition-duration: 250ms;
}
._2apis5 {
  margin-block-end: 1px;
}
._1qx0ub {
  padding-top: 1rem;
}
.Jluex {
  padding-right: 1rem;
}
._1jqIT7 {
  padding-bottom: 1rem;
}
._4mpiwZ {
  padding-left: 1rem;
}
._1yRDDJ {
  border-start-start-radius: var(--sx-radius);
}
._3g3F14 {
  --sx-money-text-color: var(--sx-foreground);
}
._2Y5EtF {
  --sx-money-text-color: var(--sx-background);
}
._412mUk {
  height: 250px;
}
.G8PYp {
  -webkit-background-size: 400% 100%;
  background-size: 400% 100%;
}
._4byK7k {
  background-image: linear-gradient(
    270deg,
    rgba(var(--sx-accent-1)),
    rgba(var(--sx-accent-2)),
    rgba(var(--sx-accent-2)),
    rgba(var(--sx-accent-1))
  );
}
._3z8ok8 {
  -webkit-animation-name: _28L9Xy;
  animation-name: _28L9Xy;
}
._26fOid {
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}
._3LULb3 {
  top: -40px;
}
.Mxnyb {
  background: rgba(var(--sx-foreground));
}
.doFHq {
  padding-top: 8px;
}
._3Fbs7g {
  padding-right: 8px;
}
._2CgPp {
  padding-bottom: 8px;
}
._4lGIdS {
  padding-left: 8px;
}
.jUIJT {
  z-index: 100;
}
._4r9D1F:focus {
  top: 0px;
}
._3oUfxs {
  display: grid;
}
._3BXemt {
  place-items: center;
}
._4Be3Ju {
  opacity: 0.5;
}
._4AZP9x {
  padding-right: 0;
}
._4dAerG {
  border-inline-end: 1px solid rgba(var(--sx-accent-2));
}
._3L2COp {
  margin-block-end: 1rem;
}
._1Czpon {
  padding-block: 5px;
}
._4rhIVJ {
  -webkit-padding-start: 10px;
  padding-inline-start: 10px;
}
._4tVnrJ {
  border-width: 1px 0 1px 1px;
}
._4uzTUG {
  border-style: solid;
}
._46Hep5 {
  border-color: transparent;
}
._2QTVdh {
  border-color: rgba(var(--sx-accent-2));
}
._2pWPxy {
  border-top-left-radius: 4px;
}
._1CWGF0 {
  border-bottom-left-radius: 4px;
}
._1PiKJ8 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
._4pnE0k {
  min-height: 100vh;
}
._2sDZM9 {
  width: 200px;
}
.QXIgG {
  background-color: rgba(var(--sx-accent-1));
}
._1St8ut {
  -webkit-margin-start: 200px;
  margin-inline-start: 200px;
}
._1sDkZI {
  border-block-end: 1px solid rgba(var(--sx-accent-3));
}
._7jtq7 {
  font-style: italic;
}
.Xypuh {
  margin-block: 1rem;
}
._4tnJDZ {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
._4gKOef {
  gap: 1rem;
}
@-webkit-keyframes _2vdAuj {
  33% {
    -webkit-transform: translateY(-1.4em);
    -moz-transform: translateY(-1.4em);
    -ms-transform: translateY(-1.4em);
    transform: translateY(-1.4em);
  }
  66% {
    -webkit-transform: translateY(1.4em);
    -moz-transform: translateY(1.4em);
    -ms-transform: translateY(1.4em);
    transform: translateY(1.4em);
  }
}
@keyframes _2vdAuj {
  33% {
    -webkit-transform: translateY(-1.4em);
    -moz-transform: translateY(-1.4em);
    -ms-transform: translateY(-1.4em);
    transform: translateY(-1.4em);
  }
  66% {
    -webkit-transform: translateY(1.4em);
    -moz-transform: translateY(1.4em);
    -ms-transform: translateY(1.4em);
    transform: translateY(1.4em);
  }
}
@-webkit-keyframes _28L9Xy {
  from {
    -webkit-background-position: 200% 0;
    background-position: 200% 0;
  }
  to {
    -webkit-background-position: -200% 0;
    background-position: -200% 0;
  }
}
@keyframes _28L9Xy {
  from {
    -webkit-background-position: 200% 0;
    background-position: 200% 0;
  }
  to {
    -webkit-background-position: -200% 0;
    background-position: -200% 0;
  }
}