.ui {
  &--primary {
    --border-width: var(--elem-border-width);
    background-color: var(--primary-color);
    color: var(--on-primary-color);
    border: var(--border-width) solid var(--primary-color-variation-2);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-primary-color);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--primary-color-variation-3);
      background-color: var(--primary-color-variation-1);
      color: var(--on-primary-color-variation-1);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-primary-color-variation-1);
      }
    }
  }

  &--secondary {
    --border-width: var(--elem-border-width);
    background-color: var(--secondary-color);
    color: var(--on-secondary-color);
    border: var(--border-width) solid var(--secondary-color-variation-2);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-secondary-color);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--secondary-color-variation-3);
      background-color: var(--secondary-color-variation-1);
      color: var(--on-secondary-color-variation-1);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-secondary-color-variation-1);
      }
    }
  }

  &--info {
    --border-width: var(--elem-border-width);
    background-color: var(--info-color-variation-1);
    color: var(--on-info-color-variation-1);
    border: var(--border-width) solid var(--info-color);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-info-color-variation-1);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--info-color-variation-2);
      background-color: var(--info-color);
      color: var(--on-info-color);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-info-color);
      }
    }
  }

  &--success {
    --border-width: var(--elem-border-width);
    background-color: var(--success-color-variation-1);
    color: var(--on-success-color-variation-1);
    border: var(--border-width) solid var(--success-color);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-succes-color-variation-1);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--success-color-variation-2);
      background-color: var(--success-color);
      color: var(--on-success-color);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-success-color);
      }
    }
  }

  &--warning {
    --border-width: var(--elem-border-width);
    background-color: var(--warning-color-variation-1);
    color: var(--on-warning-color-variation-1);
    border: var(--border-width) solid var(--warning-color);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-warning-color-variation-1);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--warning-color-variation-2);
      background-color: var(--warning-color);
      color: var(--on-warning-color);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-warning-color);
      }
    }
  }

  &--danger {
    --border-width: var(--elem-border-width);
    background-color: var(--danger-color-variation-1);
    color: var(--on-danger-color-variation-1);
    border: var(--border-width) solid var(--danger-color);

    > *,
    > * *:is(h1, h2, h3, h4, h5) {
      color: var(--on-danger-color-variation-1);
    }

    &-alt {
      --border-width: var(--elem-border-width);
      border: var(--border-width) solid var(--danger-color-variation-2);
      background-color: var(--danger-color);
      color: var(--on-danger-color);

      > *,
      > * *:is(h1, h2, h3, h4, h5) {
        color: var(--on-danger-color);
      }
    }
  }

  &--noborder {
    border: none;
  }

  &--noshadow {
    box-shadow: none;
  }
}

[style*='--bdr:'] {
  border: var(--bdr) !important;
}
[style*='--bdrt:'] {
  border-top: var(--bdrt) !important;
}
[style*='--bdrb:'] {
  border-bottom: var(--bdrb) !important;
}
[style*='--bdrl:'] {
  border-left: var(--bdrl) !important;
}
[style*='--bdrr:'] {
  border-right: var(--bdrr) !important;
}
[style*='--bdrw:'] {
  border-width: var(--bdrw) !important;
}
[style*='--bdrs:'] {
  border-style: var(--bdrs) !important;
}
[style*='--bdrc:'] {
  border-color: var(--bdrc) !important;
}

[style*='--br:'] {
  border-radius: var(--br) !important;
}

[style*='--btlr:'] {
  border-top-left-radius: var(--btlr) !important;
}

[style*='--btrr:'] {
  border-top-right-radius: var(--btlr) !important;
}

[style*='--bblr:'] {
  border-bottom-left-radius: var(--btlr) !important;
}

[style*='--bbrr:'] {
  border-bottom-right-radius: var(--btlr) !important;
}

[style*='--bgc:'] {
  background-color: var(--bgc) !important;
}

[style*='--bgi:'] {
  background-image: var(--bgi) !important;
}

[style*='--clr:'] {
  color: var(--clr) !important;
}

[style*='--fs:'] {
  font-size: var(--fs) !important;
}

[style*='--lh:'] {
  line-height: var(--lh) !important;
}

[style*='--fw:'] {
  font-weight: var(--fw) !important;
}

[style*='--op:'] {
  opacity: var(--op) !important;
}

[style*='--crs:'] {
  cursor: var(--crs) !important;
}

.shadow {
  box-shadow: var(--ho, 0) var(--vo, 0) var(--blur, 1rem) var(--spread, 0) var(--clr, rgb(0 0 0 / var(--op, 0.25)));
}