.boxstyle_ { // legacy
  .make-sm-boxstyle();
}

.boxstyle-xs {
  .make-xs-boxstyle();
}

.boxstyle-sm {
  .make-sm-boxstyle();
}

.boxstyle-md {
  .make-md-boxstyle();
}

.boxstyle-lg {
  .make-lg-boxstyle();
}

.box1 {
  .bg-primary-tint(100);
}

.box2 {
  --w-sys-colors-bg: var(--w-sys-colors-paleGrey);
  --w-sys-colors-link: var(--w-sys-colors-paleGrey-accent);
  color: var(--w-sys-colors-paleGrey-contrast);
  background-color: var(--w-sys-colors-bg);
}

.box5 {
  .bg-primary-tint(500);
}

.bg-primary-tint(@tint) {
  // Define these variables for use in containing elements.
  color: ~"var(--w-sys-colors-primary-@{tint}-contrast)";
  --w-sys-colors-bg: ~"var(--w-sys-colors-primary-@{tint})";
  --w-sys-colors-link: currentColor;
  background-color: var(--w-sys-colors-bg);
}

each(100 300 500 700 900, {
  // class name borrowed from https://getbootstrap.com/docs/5.0/utilities/background/
  // though we include the tint level, and we set colour
  .bg-primary-@{value} {
    .bg-primary-tint(@value);
  }
})

.bg-primary-strong {
  .bg-primary-tint(500);

  --w-sys-colors-alt-bg: var(--w-sys-colors-primary-300);
  --w-sys-colors-alt-fg: var(--w-sys-colors-primary-300-contrast);
}

.bg-primary-subtle {
  .bg-primary-tint(300);
  [data-color-scheme="dark"] & when (@dark-mode) {
    .bg-primary-tint(700);
  }

  --w-sys-colors-alt-bg: var(--w-sys-colors-primary-500);
  --w-sys-colors-alt-fg: var(--w-sys-colors-primary-500-contrast);
}

.bg-primary-alt {
  background-color: var(--w-sys-colors-alt-bg);
  color: var(--w-sys-colors-alt-fg);
}