@wwtdev/bsds-css 0.0.3

package/dist/wwt-bsds.css

@@ -0,0 +1,1775 @@
+/* VARIABLES GENERATED WITH TAILWIND CONFIG.
+    Tokens location: ./tailwind.config.js */
+
+:root {
+  --bs-transparent: transparent;
+  --bs-white: #ffffff;
+  --bs-black: #0a0b19;
+  --bs-blue-10: rgba(0, 134, 234, 0.1);
+  --bs-blue-100: #99cff7;
+  --bs-blue-200: #66b6f2;
+  --bs-blue-300: #339eee;
+  --bs-blue-400: #0086ea;
+  --bs-blue-500: #006dc7;
+  --bs-red-10: rgba(238, 40, 42, 0.1);
+  --bs-red-100: #f8a9aa;
+  --bs-red-200: #f57e7f;
+  --bs-red-300: #f15355;
+  --bs-red-400: #ee282a;
+  --bs-red-500: #d91214;
+  --bs-plum-10: rgba(28, 0, 135, 0.1);
+  --bs-plum-100: #a499cf;
+  --bs-plum-200: #7766b7;
+  --bs-plum-300: #49339f;
+  --bs-plum-400: #1c0087;
+  --bs-royal-100: #c5cceb;
+  --bs-royal-200: #7585d1;
+  --bs-royal-300: #5365c4;
+  --bs-royal-400: #162fb4;
+  --bs-violet-100: #cbc0da;
+  --bs-violet-200: #9983b6;
+  --bs-violet-300: #634291;
+  --bs-violet-400: #330072;
+  --bs-navy-100: #c6c6d1;
+  --bs-navy-200: #8d8ea1;
+  --bs-navy-300: #555775;
+  --bs-navy-400: #1d1e48;
+  --bs-navy-500: #131431;
+  --bs-orange-10: rgba(250, 70, 22, 0.1);
+  --bs-orange-100: #fed1c5;
+  --bs-orange-200: #fda58d;
+  --bs-orange-300: #fc7755;
+  --bs-orange-400: #fa4616;
+  --bs-orange-warning: #ea6712;
+  --bs-pink-100: #f6cbe0;
+  --bs-pink-200: #eb7eaf;
+  --bs-pink-300: #e45e9b;
+  --bs-pink-400: #e31c79;
+  --bs-pink-500: #d11a6f;
+  --bs-purple-10: rgba(130, 18, 196, 0.09);
+  --bs-purple-100: #e0c5ef;
+  --bs-purple-200: #bf8adf;
+  --bs-purple-300: #a154d0;
+  --bs-purple-400: #8212c4;
+  --bs-gray-100: #f0f0fa;
+  --bs-gray-200: #c9cad9;
+  --bs-gray-300: #a3a4b7;
+  --bs-gray-400: #4e4f5f;
+  --bs-gray-500: #292940;
+  --bs-gradient-dark: linear-gradient(
+    90deg,
+    #1c0087 0%,
+    #ee282a 35%,
+    #ffffff 50%,
+    #0086ea 65%,
+    #1c0087 100%
+  );
+  --bs-gradient-light: linear-gradient(
+    90deg,
+    #1c0087 0%,
+    #ee282a 35%,
+    #ffffff 50%,
+    #0086ea 65%,
+    #1c0087 100%
+  );
+  --bs-gradient-line: linear-gradient(
+    90deg,
+    #ee282a 0%,
+    #1c0087 50%,
+    #0086ea 100%
+  );
+  --bs-space-0: 0px;
+  --bs-space-1: 0.25rem;
+  --bs-space-2: 0.5rem;
+  --bs-space-3: 0.75rem;
+  --bs-space-4: 1rem;
+  --bs-space-5: 1.25rem;
+  --bs-space-6: 1.5rem;
+  --bs-space-7: 1.75rem;
+  --bs-space-8: 2rem;
+  --bs-space-9: 2.25rem;
+  --bs-space-10: 2.5rem;
+  --bs-space-11: 2.75rem;
+  --bs-space-12: 3rem;
+  --bs-space-14: 3.5rem;
+  --bs-space-16: 4rem;
+  --bs-space-20: 5rem;
+  --bs-space-24: 6rem;
+  --bs-space-28: 7rem;
+  --bs-space-32: 8rem;
+  --bs-space-36: 9rem;
+  --bs-space-40: 10rem;
+  --bs-space-44: 11rem;
+  --bs-space-48: 12rem;
+  --bs-space-52: 13rem;
+  --bs-space-56: 14rem;
+  --bs-space-60: 15rem;
+  --bs-space-64: 16rem;
+  --bs-space-72: 18rem;
+  --bs-space-80: 20rem;
+  --bs-space-96: 24rem;
+  --bs-space-px: 1px;
+  --bs-space-0-half: 0.125rem;
+  --bs-space-1-half: 0.375rem;
+  --bs-space-2-half: 0.625rem;
+  --bs-space-3-half: 0.875rem;
+  --bs-space-f-1: clamp(0.25rem, calc(0.13rem + 0.5vw), 0.5rem);
+  --bs-space-f-2: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
+  --bs-space-f-3: clamp(0.75rem, calc(0.63rem + 0.5vw), 1rem);
+  --bs-space-f-4: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);
+  --bs-space-f-6: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
+  --bs-space-f-8: clamp(2rem, calc(1.5rem + 2vw), 3rem);
+  --bs-space-f-12: clamp(4rem, calc(3rem + 4vw), 6rem);
+  --bs-space-f-16: clamp(4rem, calc(3rem + 4vw), 6rem);
+  --bs-space-f-24: clamp(6rem, calc(5rem + 4vw), 8rem);
+  --bs-space-f-4to8: clamp(1rem, calc(0.5rem + 2vw), 2rem);
+  --bs-space-f-6to12: clamp(1.5rem, calc(0.75rem + 3vw), 3rem);
+  --bs-space-f-12to24: clamp(3rem, calc(1.5rem + 6vw), 6rem);
+  --bs-text-xs: 0.75rem;
+  --bs-text-sm: 0.875rem;
+  --bs-text-base: 1rem;
+  --bs-text-md: 1.125rem;
+  --bs-text-lg: 1.25rem;
+  --bs-text-xl: 1.5rem;
+  --bs-text-2xl: 2rem;
+  --bs-text-3xl: 2.25rem;
+  --bs-text-4xl: 3rem;
+  --bs-text-f-xs: clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem);
+  --bs-text-f-sm: clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem);
+  --bs-text-f-base: clamp(1rem, calc(1rem + 0vw), 1rem);
+  --bs-text-f-md: clamp(1rem, calc(0.94rem + 0.25vw), 1.125rem);
+  --bs-text-f-lg: clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem);
+  --bs-text-f-xl: clamp(1.25rem, calc(1.13rem + 0.5vw), 1.5rem);
+  --bs-text-f-2xl: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
+  --bs-text-f-3xl: clamp(2rem, calc(1.88rem + 0.5vw), 2.25rem);
+  --bs-text-f-4xl: clamp(2.25rem, calc(1.88rem + 1.5vw), 3rem);
+  --bs-leading-sm: 115%;
+  --bs-leading-base: 150%;
+  --bs-shadow: -4px 4px 12px rgba(0, 0, 0, 0.06),
+    -8px 8px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentLow: -4px 4px 12px rgba(0, 0, 0, 0.06),
+    -8px 8px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentLowCenter: 0px 0px 12px rgba(0, 0, 0, 0.06),
+    0px 0px 16px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentMedium: -8px 8px 24px rgba(0, 0, 0, 0.06),
+    -16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-contentHigh: 0px 16px 48px rgba(0, 0, 0, 0.06),
+    0px 32px 64px rgba(28, 0, 135, 0.2);
+  --bs-shadow-drawerLeft: -12px 12px 24px rgba(0, 0, 0, 0.06),
+    -16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-drawerRight: -12px 12px 24px rgba(0, 0, 0, 0.06),
+    16px 16px 32px rgba(28, 0, 135, 0.2);
+  --bs-shadow-profilePhoto: inset 0px 0px 0.5em rgba(28, 0, 135, 0.25);
+}
+
+/* Box sizing rules */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+
+a:not([class]) {
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs */
+
+:where(input, textarea, select) {
+  font: inherit;
+}
+
+button {
+  font-family: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+:root,
+:host {
+  --bs-bg-base: var(--bs-white);
+  --bs-bg-subtle: var(--bs-gray-100);
+  --bs-bg-invert: var(--bs-navy-500);
+  --bs-bg-invert-subtle: var(--bs-navy-400);
+  --bs-ink-base: var(--bs-black);
+  --bs-ink-medium: var(--bs-gray-500);
+  --bs-ink-light: var(--bs-gray-400);
+  --bs-ink-accent: var(--bs-plum-400);
+  --bs-ink-invert: var(--bs-white);
+  --bs-border: var(--bs-gray-200);
+
+  /* Spacing */
+  --bs-content-top: 4rem;
+
+  /* Type */
+  --bs-font-normal: 400;
+  --bs-font-bold: 600;
+}
+
+.dark,
+.dark :host {
+  --bs-bg-base: var(--bs-navy-500);
+  --bs-bg-subtle: #2F2F51;
+  --bs-bg-invert: var(--bs-white);
+  --bs-bg-invert-subtle: var(--bs-gray-100);
+  --bs-ink-base: var(--bs-white);
+  --bs-ink-medium: var(--bs-gray-100);
+  --bs-ink-light: var(--bs-gray-200);
+  --bs-ink-accent: var(--bs-plum-100);
+  --bs-ink-invert: var(--bs-black);
+  --bs-border: var(--bs-gray-400);
+}
+
+body,
+:host {
+  background-color: var(--bs-bg-base);
+  color: var(--bs-ink-light);
+}
+
+:target {
+  scroll-margin-top: var(--bs-content-top);
+}
+
+::-moz-selection {
+  background-color: var(--bs-royal-400);
+  color: var(--bs-white);
+}
+
+::selection {
+  background-color: var(--bs-royal-400);
+  color: var(--bs-white);
+}
+
+[hidden] {
+  display: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--bs-border);
+}
+
+body {
+  font-weight: 400;
+  font-family: 'Roobert', sans-serif;
+  font-size: var(--bs-text-base);
+}
+
+/* Default Element/data-variant Styles */
+
+[data-variant^="heading-xl"] {
+  font-size: var(--bs-text-4xl);
+  font-weight: 400;
+  line-height: var(--bs-leading-sm);
+}
+
+h1, [data-variant^="heading-1"] {
+  font-size: var(--bs-text-3xl);
+  font-weight: 400;
+  line-height: var(--bs-leading-sm);
+}
+
+h2, [data-variant^="heading-2"] {
+  font-size: var(--bs-text-2xl);
+  font-weight: 600;
+  line-height: var(--bs-leading-sm);
+}
+
+h3, [data-variant^="heading-3"] {
+  font-size: var(--bs-text-xl);
+  font-weight: 600;
+  line-height: var(--bs-leading-sm);
+}
+
+h4, [data-variant^="heading-4"] {
+  font-size: var(--bs-text-lg);
+  font-weight: 600;
+}
+
+h5, [data-variant^="heading-5"] {
+  font-size: var(--bs-text-md);
+  font-weight: 600;
+}
+
+h6, [data-variant^="heading-6"] {
+  font-size: var(--bs-text-base);
+  font-weight: 600;
+}
+
+.prose {
+  font-size: var(--bs-text-md);
+  max-width: 70ch;
+}
+
+.prose :where(h1, h2, h3, h4, h5, h6):not([data-color]) {
+  color: var(--bs-ink-base);
+}
+
+[data-variant^="default"] {
+  font-size: var(--bs-text-base);
+}
+
+.bs-meta, [data-variant^="meta"] {
+  font-size: var(--bs-text-xs);
+  font-weight: 600;
+}
+
+:where(.prose blockquote) {
+  border-left: 4px solid var(--bs-plum-200);
+  color: var(--bs-plum-200);
+  font-style: italic;
+  font-weight: 400;
+  padding-left: var(--bs-space-4);
+}
+
+.prose:where([data-width="wide"]) {
+  max-width: 90%;
+}
+
+.prose:where([data-width="wide"]) > :is(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
+  max-width: 48rem;
+}
+
+/* data-font-size Styles */
+
+:where([data-font-size^='4xl']) {
+  font-size: var(--bs-text-4xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='3xl']) {
+  font-size: var(--bs-text-3xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='2xl']) {
+  font-size: var(--bs-text-2xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='xl']) {
+  font-size: var(--bs-text-xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where([data-font-size^='lg']) {
+  font-size: var(--bs-text-lg);
+}
+
+:where([data-font-size^='md']) {
+  font-size: var(--bs-text-md);
+}
+
+:where([data-font-size^='base']) {
+  font-size: var(--bs-text-base);
+}
+
+:where([data-font-size^='sm']) {
+  font-size: var(--bs-text-sm);
+}
+
+:where([data-font-size^='xs']) {
+  font-size: var(--bs-text-xs);
+}
+
+/* data-color Styles */
+
+:where([data-color^='base']) {
+  color: var(--bs-ink-base);
+}
+
+:where([data-color^='medium']) {
+  color: var(--bs-ink-medium);
+}
+
+:where([data-color^='light']) {
+  color: var(--bs-ink-light);
+}
+
+:where([data-color^='accent']) {
+  color: var(--bs-ink-accent);
+}
+
+/* data-weight Styles */
+
+:where([data-weight^='normal'], [data-weight^='400']) {
+  font-weight: 400;
+}
+
+:where([data-weight^='bold'], [data-weight^='600']) {
+  font-weight: 600;
+}
+
+body:where(.fluid) {
+  font-size: var(--bs-text-f-md);
+}
+
+/* Defaults & Variants */
+
+:where(.fluid) h1,
+:where(.fluid) [data-variant^='heading-1'] {
+  font-size: var(--bs-text-f-3xl);
+}
+
+:where(.fluid) h2,
+:where(.fluid) [data-variant^='heading-2'] {
+  font-size: var(--bs-text-f-2xl);
+}
+
+:where(.fluid) h3,
+:where(.fluid) [data-variant^='heading-3'] {
+  font-size: var(--bs-text-f-xl);
+}
+
+:where(.fluid) h4,
+:where(.fluid) [data-variant^='heading-4'] {
+  font-size: var(--bs-text-f-lg);
+}
+
+:where(.fluid) h5,
+:where(.fluid) [data-variant^='heading-5'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) h6,
+:where(.fluid) [data-variant^='heading-6'] {
+  font-size: var(--bs-text-f-sm);
+}
+
+:where(.fluid).prose,
+:where(.fluid) .prose,
+:where(.fluid) [data-variant^='default'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) .bs-meta,
+:where(.fluid) [data-variant^='meta'] {
+  font-size: var(--bs-text-f-xs);
+}
+
+/* Fluid data-font-size Styles */
+
+:where(.fluid) [data-font-size^='4xl'] {
+  font-size: var(--bs-text-f-4xl);
+}
+
+:where(.fluid) [data-font-size^='3xl'] {
+  font-size: var(--bs-text-f-3xl);
+}
+
+:where(.fluid) [data-font-size^='2xl'] {
+  font-size: var(--bs-text-f-2xl);
+}
+
+:where(.fluid) [data-font-size^='xl'] {
+  font-size: var(--bs-text-f-xl);
+  line-height: var(--bs-leading-sm);
+}
+
+:where(.fluid) [data-font-size^='lg'] {
+  font-size: var(--bs-text-f-lg);
+}
+
+:where(.fluid) [data-font-size^='md'] {
+  font-size: var(--bs-text-f-md);
+}
+
+:where(.fluid) [data-font-size^='base'] {
+  font-size: var(--bs-text-f-base);
+}
+
+:where(.fluid) [data-font-size^='sm'] {
+  font-size: var(--bs-text-f-sm);
+}
+
+:where(.fluid) [data-font-size^='xs'] {
+  font-size: var(--bs-text-f-xs);
+}
+
+/* Using :where() here for no additional specificity */
+
+:where(.prose) a {
+  border-radius: 0.25rem; /* gives outlines rounded corners in modern browsers */
+  -webkit-box-decoration-break: clone;
+          box-decoration-break: clone;
+  color: var(--bs-purple-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: all 0.15s ease-in-out;
+  outline-color: var(--bs-blue-400);
+}
+
+:where(.prose) a:where(:not(.button)):hover,
+:where(.prose) a:where(:not(.button)):focus,
+:where(.prose) a:where(:not(.button)):focus-visible {
+  color: var(--bs-plum-400);
+  text-decoration-color: var(--bs-purple-400);
+}
+
+:where(.prose) a:focus-visible {
+  outline-offset: var(--bs-space-1);
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+:where(.prose) a:focus:where(:not(:focus-visible)) {
+  outline: none;
+}
+
+/* dark links still need .dark because we don't want them overwritten by the light theme link styles in applications */
+
+.dark :where(.prose) a:not(.button, .pill) {
+  color: var(--bs-purple-200);
+  outline-color: var(--bs-blue-300);
+}
+
+.dark :where(.prose) a:where(:not(.button)):hover,
+.dark :where(.prose) a:where(:not(.button)):focus,
+.dark :where(.prose) a:where(:not(.button)):focus-visible {
+  color: var(--bs-pink-300);
+  text-decoration-color: var(--bs-purple-200);
+}
+
+.dark :where(.prose) a:focus-visible {
+  outline-offset: var(--bs-space-1);
+}
+
+.dark :where(.prose) a:focus:where(:not(:focus-visible)) {
+  outline: none;
+}
+
+.box-shadow {
+  box-shadow: var(--bs-shadow);
+}
+
+.box-shadow:where([data-variant="center"]) {
+  box-shadow: var(--bs-shadow-contentLowCenter);
+}
+
+.box-shadow:where([data-variant="medium"]) {
+  box-shadow: var(--bs-shadow-contentMedium);
+}
+
+.box-shadow:where([data-variant="high"]) {
+  box-shadow: var(--bs-shadow-contentHigh);
+}
+
+.box-shadow:where([data-variant="left-panel"]) {
+  box-shadow: var(--bs-shadow-drawerLeft);
+}
+
+.box-shadow:where([data-variant="right-panel"]) {
+  box-shadow: var(--bs-shadow-drawerRight);
+}
+
+.box-shadow:where([data-variant="profile"]) {
+  box-shadow: var(--bs-shadow-profilePhoto);
+}
+
+.badge[data-position^='left']::before,
+.badge:where(:not([data-position^='left']))::after {
+  align-items: center;
+  background: var(--bs-red-500);
+  border-radius: 0.5rem;
+  content: '';
+  display: inline-flex;
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  height: 6px;
+  justify-content: center;
+  line-height: 1;
+  position: relative;
+  vertical-align: top;
+  width: 6px;
+}
+
+.pill .badge::before,
+.pill .badge::after {
+  font-size: 0.8125em;
+}
+
+.badge[data-count]:where([data-position^='left'])::before,
+.badge[data-count]:where(:not([data-position^='left']))::after {
+  color: white;
+  content: attr(data-count);
+  min-height: 1rem;
+  min-width: 1rem;
+  padding: 0 4px;
+  top: -0.0625rem;
+  vertical-align: unset;
+  width: auto;
+}
+
+.badge[data-count]::before {
+  margin-right: 0.25rem;
+}
+
+.badge[data-count]::after {
+  margin-left: 0.25rem;
+}
+
+.badge[data-count='0']::before,
+.badge[data-count='0']::after {
+  display: none;
+}
+
+.badge[data-badge-color^='blue']::before,
+.badge[data-badge-color^='blue']::after {
+  background: var(--bs-blue-500);
+}
+
+.badge[data-badge-color^='white']::before,
+.badge[data-badge-color^='white']::after {
+  background: white;
+  color: var(--badge-text, var(--bs-black));
+}
+
+:where(button) {
+  background-color: inherit;
+  border-color: transparent;
+  color: inherit;
+  font-size: var(--bs-text-base);
+  position: relative;
+  padding: var(--bs-space-0);
+  text-decoration: none;
+}
+
+.button {
+  --btn-main: var(--bs-blue-400);
+  --btn-secondary: var(--bs-blue-300);
+  --btn-highlight: var(--bs-blue-100);
+  align-items: center;
+  background-color: var(--btn-main);
+  border: none;
+  border-radius: 0.25rem;
+  color: var(--bs-white);
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--bs-text-md);
+  font-weight: 600;
+  line-height: 1.5;
+  outline: 2px solid transparent;
+  padding: var(--bs-space-1) var(--bs-space-4) calc(var(--bs-space-1) * 1.5);
+  position: relative;
+  text-decoration: none;
+  transition: all 100ms ease-in-out;
+  vertical-align: middle;
+}
+
+.button:hover {
+  background-color: var(--btn-secondary);
+}
+
+.button:active {
+  background-color: var(--btn-secondary);
+  transform: scale(0.97);
+  transform-origin: center;
+  box-shadow: inset 0px 0px 4px 1px var(--btn-main);
+}
+
+/* Button Focus Styles */
+
+.button::before {
+  border-color: transparent;
+  border-radius: 0.5rem;
+  border-style: solid;
+  border-width: 0.125rem;
+  content: '';
+  height: calc(100% + 0.5rem);
+  inset: -0.25rem;
+  position: absolute;
+  transition: border-color 0.125s ease-in-out;
+  width: calc(100% + 0.5rem);
+}
+
+.button:focus::before {
+  border-color: var(--btn-main);
+}
+
+.button:focus-visible::before {
+  border-color: var(--btn-main);
+  box-shadow: none;
+}
+
+.button:focus:not(:focus-visible)::before {
+  border-color: transparent;
+  box-shadow: none;
+}
+
+/* Ghost Buttons */
+
+.button:where([data-ghost]) {
+  --btn-light: var(--bs-blue-10);
+  --btn-secondary: var(--bs-blue-10);
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--btn-main);
+  color: var(--btn-main);
+}
+
+.button:where([data-ghost])::before {
+  border-radius: 0.4375rem;
+}
+
+.button:where([data-ghost]):hover,
+.button:where([data-ghost]):focus {
+  background-color: var(--btn-light);
+}
+
+.button:where([data-ghost]):active {
+  box-shadow:
+    inset 0 0 0 1px var(--btn-main),
+    inset 0px 0px 4px 1px var(--btn-highlight);
+}
+
+/* Button type */
+
+.button:where([data-variant^='secondary']) {
+  --btn-main: var(--bs-plum-400);
+  --btn-secondary: var(--bs-plum-300);
+  --btn-light: var(--bs-plum-10);
+  --btn-highlight: var(--bs-plum-100);
+}
+
+.dark .button:where([data-variant^='secondary']) {
+  --btn-main: var(--bs-plum-200);
+  --btn-secondary: var(--bs-plum-300);
+  --btn-light: var(--bs-navy-400);
+  --btn-highlight: var(--bs-plum-400);
+}
+
+.button:where([data-variant^='positive']) {
+  --btn-main: var(--bs-purple-400);
+  --btn-secondary: var(--bs-purple-300);
+  --btn-light: var(--bs-purple-10);
+  --btn-highlight: var(--bs-purple-100);
+}
+
+.button:where([data-variant^='warning']) {
+  --btn-main: var(--bs-orange-warning);
+  --btn-secondary: var(--bs-orange-300);
+  --btn-light: var(--bs-orange-10);
+  --btn-highlight: var(--bs-orange-100);
+}
+
+.button:where([data-variant^='negative']) {
+  --btn-main: var(--bs-red-400);
+  --btn-secondary: var(--bs-red-300);
+  --btn-light: var(--bs-red-10);
+  --btn-highlight: var(--bs-red-100);
+}
+
+/* Text Button */
+
+.button:where([data-text]) {
+  background-color: transparent;
+  color: var(--bs-blue-500);
+  cursor: pointer;
+  font-size: var(--bs-text-md);
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.button:where([data-text]):hover {
+  background-color: transparent;
+  text-decoration: underline;
+}
+
+.button:where([data-text]):active {
+  box-shadow: none;
+}
+
+/* Button Size */
+
+.button:where([data-size^='sm']) {
+  font-size: var(--bs-text-sm);
+}
+
+.button:where([data-text][data-size^='sm']) {
+  font-size: var(--bs-text-base);
+}
+
+/* Disabled Styling */
+
+:where(button:disabled),
+.button:where([aria-disabled='true']) /* for links as buttons */ {
+  pointer-events: none;
+}
+
+.button:where(:disabled),
+.button:where([aria-disabled='true']) {
+  color: var(--bs-gray-400);
+  background-color: var(--bs-gray-200);
+}
+
+.button:where([data-ghost]):disabled,
+.button:where([data-ghost])[aria-disabled='true'] {
+  box-shadow: inset 0 0 0 1px var(--bs-gray-400);
+}
+
+.button:where([data-text]):disabled,
+.button:where([data-text][aria-disabled='true']) {
+  background-color: transparent;
+}
+
+/* Icon Height */
+
+.button :where(svg:not([height])) {
+  height: var(--bs-text-base);
+}
+
+.button:where([data-size^='sm']) :where(svg:not([height])) {
+  height: var(--bs-text-xs);
+}
+
+/* links as buttons */
+
+a.button {
+  align-items: center;
+  display: inline-flex;
+  outline: none;
+  vertical-align: middle;
+}
+
+:where(label, legend) {
+  color: var(--bs-ink-base);
+  display: inline-block;
+  font-size: var(--bs-text-sm);
+  font-weight: 600;
+  line-height: var(--bs-leading-base);
+  width: 100%;
+}
+
+:where(.required) {
+  color: var(--bs-red-400);
+}
+
+:where(.disabled, .disabled .required) {
+  color: var(--bs-gray-400);
+}
+
+:where(label + input, label > input):not([type^='checkbox'], [type^='radio']),
+:where(label + textarea, label > textarea),
+:where(label + select, label > select) {
+  margin-top: 0.25rem;
+}
+
+:where(input):not([type^='checkbox'], [type^='radio'], [type^='file'], [type^='range']),
+:where(textarea, select) {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--input-bg, var(--bs-bg-base));
+  border: 1px solid var(--input-border, var(--bs-violet-300));
+  border-radius: 0.25rem;
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  line-height: var(--bs-leading-base);
+  min-height: 40px;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+}
+
+:where(input, textarea, select)::-moz-placeholder {
+  color: var(--bs-violet-200);
+  opacity: 1;
+}
+
+:where(input, textarea, select)::placeholder {
+  color: var(--bs-violet-200);
+  opacity: 1;
+}
+
+:where(input, textarea, select):focus {
+  box-shadow:
+    0 0 0 2px var(--offset-color, var(--bs-bg-base)),
+    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+  outline: 2px solid transparent;
+}
+
+:where(.box) :where(input, textarea, select):focus {
+  --offset-color: var(--bs-bg-subtle);
+}
+
+:where(.box[data-invert]) :where(input, textarea, select):focus {
+  --offset-color: var(--bs-bg-invert);
+}
+
+:where(input, textarea, select)[required]:focus,
+:where(input, textarea, select).error {
+  --outline-color: var(--bs-red-200);
+}
+
+:where(input, textarea, select):disabled {
+  background-color: var(--bs-gray-200);
+  border-color: var(--bs-gray-400);
+  color: var(--bs-gray-400);
+}
+
+:where(input, textarea, select):disabled::-moz-placeholder, :where(input, textarea, select)[disabled]::-moz-placeholder {
+  color: var(--bs-gray-400);
+  opacity: 1;
+}
+
+:where(input, textarea, select):disabled::placeholder,
+:where(input, textarea, select)[disabled]::placeholder {
+  color: var(--bs-gray-400);
+  opacity: 1;
+}
+
+/* Character Counter for Textarea */
+
+:where(textarea + .character-count) {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-text-xs);
+  font-weight: 400;
+  text-align: right;
+}
+
+:where(textarea[disabled] + .character-count) {
+  color: var(--bs-gray-400);
+}
+
+/* Select */
+
+:where(select) {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%230A0B19' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+  background-position: right 0.75rem center;
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+}
+
+.dark :where(select) {
+  /* URL Encoded SVG dropdown caret so there is something there */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M8.048 13.375a.745.745 0 0 1-.526-.217L0 5.686l1.053-1.061 6.995 6.95 6.897-6.85 1.053 1.06-7.423 7.373a.745.745 0 0 1-.527.217Z'/%3E%3C/svg%3E");
+}
+
+/* Checkboxes & Radios */
+
+:where(.checkbox, .radio) {
+  display: flex;
+  align-items: center;
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  gap: 0.5em;
+  line-height: 115%;
+}
+
+:where(.checkbox, .radio) label {
+  font-size: var(--bs-text-base);
+  font-weight: 400;
+  line-height: 115%;
+  width: auto;
+}
+
+:where(input[type^='checkbox'], input[type^='radio']) {
+  --box-shadow: var(--bs-ink-base);
+
+  -webkit-appearance: none;
+
+     -moz-appearance: none;
+
+          appearance: none;
+  background-color: var(--bg-base);
+  box-shadow: inset 0 0 0 0.125rem var(--box-shadow);
+  display: grid;
+  height: 1rem;
+  margin: 0;
+  place-content: center;
+  position: relative;
+  width: 1rem;
+}
+
+:where(input[type^='checkbox'], input[type^='radio']):focus {
+  box-shadow:
+    inset 0 0 0 0.125rem var(--box-shadow),
+    0 0 0 2px var(--offset-color, var(--bs-bg-base)),
+    0 0 0 4px var(--outline-color, var(--bs-blue-400));
+}
+
+:where(input[type^='checkbox'], input[type^='radio']).error {
+  --box-shadow: var(--bs-red-400);
+}
+
+:where(input[type^='checkbox']) {
+  border-radius: 0.125rem;
+}
+
+:where(input[type^='radio']) {
+  border-radius: 50%;
+}
+
+:where(.checkbox, .radio)[data-size='sm'],
+:where(.checkbox, .radio)[data-size='sm'] label {
+  font-size: var(--bs-text-sm);
+  line-height: 100%;
+}
+
+:where(.checkbox, .radio)[data-size='sm'] input {
+  width: var(--bs-text-xs);
+  height: var(--bs-text-xs);
+}
+
+:where(input[type='checkbox'])::before {
+  --filled-size: 1rem;
+  --check-fill-color: var(--bs-blue-400);
+
+  content: '';
+  border-radius: 0.125rem;
+  box-shadow: inset var(--filled-size) var(--filled-size) var(--check-fill-color);
+  height: var(--filled-size);
+  visibility: hidden;
+  width: var(--filled-size);
+}
+
+:where(input[type^='checkbox'])::after {
+  border: solid var(--bs-white);
+  border-width: 0 0.125rem 0.125rem 0;
+  content: '';
+  height: 0.75em;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform-origin: center;
+  transform: translate(-50%, -60%) rotate(45deg);
+  visibility: hidden;
+  width: 0.375em;
+}
+
+:where(input[type='radio'])::before {
+  --filled-size: 1rem;
+  --radio-fill-color: var(--bs-blue-400);
+
+  background-color: var(--radio-fill-color);
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--filled-size);
+  visibility: hidden;
+  width: var(--filled-size);
+}
+
+:where(input[type='radio'])::after {
+  --inner-size: 0.375rem;
+  --inner-fill-color: var(--bs-white);
+
+  background-color: var(--inner-fill-color);
+  border-radius: 50%;
+  box-sizing: content-box;
+  content: '';
+  height: var(--inner-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: hidden;
+  width: var(--inner-size);
+}
+
+:where(input[type='checkbox']:checked, input[type='radio']:checked)::before,
+:where(input[type='checkbox']:checked, input[type='radio']:checked)::after {
+  visibility: visible;
+}
+
+:where(.checkbox, .radio)[data-size='sm'] input::before {
+  --filled-size: var(--bs-text-xs);
+}
+
+:where(.checkbox[data-size='sm'] input[type='checkbox'])::after {
+  height: 0.5625;
+  width: 0.3125;
+}
+
+:where(.radio[data-size='sm'] input[type='radio'])::after {
+  --inner-size: 0.25rem;
+}
+
+:where(input[type='checkbox'], input[type='radio']):disabled {
+  --box-shadow: var(--bs-gray-400);
+  background-color: transparent;
+}
+
+:where(input[type='checkbox']):checked:disabled:before {
+  --check-fill-color: var(--bs-gray-400);
+}
+
+:where(input[type='radio']):checked:disabled:before {
+  --radio-fill-color: var(--bs-gray-400);
+}
+
+/* Errors and Messages */
+
+:where(input).error {
+  border-color: var(--bs-red-400);
+}
+
+:where(.message) {
+  color: var(--bs-gray-400);
+  font-size: var(--bs-text-xs);
+  padding-top: 0.5rem;
+}
+
+:where(.message.error) {
+  color: var(--bs-red-400);
+}
+
+/* Fieldset */
+
+:where(fieldset) {
+  border: none;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0;
+}
+
+:where(fieldset legend) {
+  margin-bottom: 0.25rem;
+  padding: 0;
+}
+
+.pill {
+  --pill-background: var(--bs-bg-subtle);
+  --pill-border: transparent;
+  --pill-text: var(--bs-royal-400);
+
+  align-items: center;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--pill-background);
+  border: 1px solid var(--pill-border);
+  border-radius: 4px;
+  color: var(--pill-text);
+  display: inline-flex;
+  font-size: var(--bs-text-xs);
+  gap: 4px;
+  line-height: 1.33;
+  padding: 4px 6px;
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+:where(.dark) .pill {
+  --pill-text: var(--bs-royal-100);
+}
+
+.pill > svg {
+  height: 1rem;
+}
+
+/* ------------------------------ Button and Link Styles ------------------------------ */
+
+:is(a, button).pill {
+  color: var(--pill-text);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+
+:is(a, button).pill:is(:hover, :focus) {
+  --pill-border: var(--bs-royal-400);
+
+  color: var(--pill-text);
+  outline: transparent;
+}
+
+:where(.dark) :is(a, button).pill:is(:hover, :focus) {
+  --pill-border: var(--bs-royal-200);
+}
+
+/* ------------------------------ Background Colors ------------------------------ */
+
+:where(.box, [class*="bg-"]:not([class~="bg-white"])) .pill {
+  --pill-background: var(--bs-bg-base);
+}
+
+:where(.box[data-invert]) .pill {
+  --pill-background: var(--bs-bg-invert-subtle);
+  --pill-text: var(--bs-gray-100);
+}
+
+:where(.box[data-invert]) :is(a, button).pill:is(:hover, :focus) {
+  --pill-border: var(--bs-gray-100);
+}
+
+:where(.dark .box[data-invert]) .pill {
+  --pill-text: var(--bs-royal-400);
+}
+
+:where(.dark .box[data-invert]) :is(a, button).pill:is(:hover, :focus) {
+  --pill-border: var(--bs-royal-400);
+}
+
+/* ------------------------------ Status Styles ------------------------------ */
+
+.pill:where([data-status]) {
+  --status-color: var(--bs-blue-400);
+}
+
+.pill:where([data-status])::before {
+  background-color: var(--status-color);
+  border-radius: 100%;
+  content: '';
+  height: 12px;
+  width: 12px;
+}
+
+/* ----- Status Colors ----- */
+
+.pill:where([data-status^="active"]) {
+  --status-color: var(--bs-blue-400);
+}
+
+.pill:where([data-status^="complete"]) {
+  --status-color: var(--bs-purple-400);
+}
+
+.pill:where([data-status^="inactive"]) {
+  --status-color: var(--bs-gray-300);
+}
+
+.pill:where([data-status^="error"]) {
+  --status-color: var(--bs-red-400);
+}
+
+.pill:where([data-status^="positive"]) {
+  --status-color: #16986D;
+}
+
+.pill:where([data-status^="warning"]) {
+  --status-color: var(--bs-orange-warning);
+}
+
+/* ------------------------------ Filter Styles ------------------------------ */
+
+.pill:where([data-type^="filter"]) {
+  --pill-background: var(--bs-bg-base);
+  --pill-border: var(--bs-border);
+  --pill-text: var(--bs-ink-base);
+}
+
+.pill:where([data-type^="filter"]):is(:hover, :focus) {
+  --pill-border: var(--bs-border);
+}
+
+:is(a, button).pill:where([data-type^="filter"]):is(:hover, :focus) {
+  --pill-border: var(--bs-ink-base);
+}
+
+/* ----- Filter Add Styles ----- */
+
+/* Black + */
+
+.pill:where([data-type^="filter"][data-type*="add"])::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%230A0B19'/%3E%3C/svg%3E");
+}
+
+/* White + */
+
+:where(.dark) .pill:where([data-type^="filter"][data-type*="add"]):not(:disabled, [aria-disabled="true"])::after{
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.5 4.5V8h1V4.5H8v-1H4.5V0h-1v3.5H0v1h3.5Z' fill='%23ffffff'/%3E%3C/svg%3E");
+}
+
+/* ----- Filter Remove Styles ----- */
+
+/* Black X */
+
+.pill:where([data-type^="filter"][data-type*="remove"])::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
+}
+
+/* White X */
+
+:where(.dark) .pill:where([data-type^="filter"][data-type*="remove"]):not(:disabled, [aria-disabled="true"])::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23ffffff'/%3E%3C/svg%3E%0A");
+}
+
+/* Dark Red X */
+
+.pill:where([data-type^="filter"][data-type*="remove"]):hover::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23D91214'/%3E%3C/svg%3E%0A");
+}
+
+/* Light Red X */
+
+:where(.dark) .pill:where([data-type^="filter"][data-type*="remove"]):hover::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23F15355'/%3E%3C/svg%3E%0A");
+}
+
+/* ----- Filter Active Styles ----- */
+
+.pill:where([data-type^="filter"][data-type*="active"]) {
+  --pill-background: var(--bs-blue-400);
+  --pill-border: transparent;
+  --pill-text: var(--bs-white);
+}
+
+.pill:where([data-type^="filter"][data-type*="active"]):is(:hover, :focus)  {
+  --pill-border: transparent;
+}
+
+:is(a, button).pill:where([data-type^="filter"][data-type*="active"]):is(:hover, :focus)  {
+  --pill-background: var(--bs-blue-500);
+  --pill-border: transparent;
+}
+
+/* White X */
+
+.pill:where([data-type^="filter"][data-type*="active"])::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%23fff'/%3E%3C/svg%3E");
+}
+
+/* Black X */
+
+.pill:where([data-type^="filter"][data-type*="active"]):where(:disabled, [aria-disabled="true"])::after {
+  content: url("data:image/svg+xml,%3Csvg width='8' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 .703 7.297 0 4 3.297.703 0 0 .703 3.297 4 0 7.297.703 8 4 4.703 7.297 8 8 7.297 4.703 4 8 .703Z' fill='%230A0B19'/%3E%3C/svg%3E%0A");
+}
+
+/* ------------------------------ Restricted Styles ------------------------------ */
+
+.pill:where([data-type^="restricted"]) {
+  --pill-background: var(--bs-gray-400);
+  --pill-text: var(--bs-white);
+}
+
+.pill:where([data-type^="restricted"]):hover {
+  --pill-border: transparent;
+}
+
+.pill:where([data-type^="restricted"])::before {
+  content: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 8 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.25 4.5H7v3.715a.34.34 0 0 1-.37.285H1V5.285A.34.34 0 0 1 1.37 5h5a.25.25 0 0 0 .25-.25V3.275A2.545 2.545 0 0 0 4 1a2.55 2.55 0 0 0-2.625 2.29L1.39 4.5a.83.83 0 0 0-.89.785V8.75A.25.25 0 0 0 .75 9h5.88a.835.835 0 0 0 .87-.785V4.75a.25.25 0 0 0-.25-.25Zm-2.225 0H2.96V3.425c0-.035 0-.845 1.03-.845a.96.96 0 0 1 1.035.8V4.5ZM4 1.5a2.045 2.045 0 0 1 2.115 1.79V4.5h-.59V3.37A1.455 1.455 0 0 0 4 2.075a1.385 1.385 0 0 0-1.53 1.35V4.5h-.58V3.31A2.045 2.045 0 0 1 4 1.5Zm-.495 4.25H1.5v.5h2.005v-.5Zm-2.005 1h1.505v.5H1.5v-.5Z' fill='%23F0F0FA'/%3E%3C/svg%3E");
+  line-height: 1.1;
+}
+
+:where(.dark) .pill:where([data-type^="restricted"]) {
+  --pill-background: var(--bs-navy-300);
+  --pill-text: var(--bs-white);
+}
+
+/* ------------------------------ Live Now Styles ------------------------------ */
+
+.pill:where([data-type^="live"]) {
+  --pill-background: var(--bs-royal-400);
+  --pill-text: var(--bs-white);
+  text-transform: uppercase;
+}
+
+.pill:where([data-type^="live"]):hover {
+  --pill-border: transparent;
+}
+
+.pill:where([data-type^="live"])::before {
+  background-color: var(--bs-red-400);
+  border: 3px solid var(--bs-white);
+  border-radius: 100%;
+  content: '';
+  height: 12px;
+  width: 12px;
+}
+
+/* ----- Disabled Styles ----- */
+
+.pill:is(:disabled, [aria-disabled="true"]) {
+  pointer-events: none;
+  color: var(--bs-gray-400);
+  background-color: var(--bs-gray-200);
+}
+
+.pill:where([data-type^="filter"]):not([data-type*="active"]):is(:disabled, [aria-disabled="true"]) {
+  --pill-border: var(--bs-gray-400);
+}
+
+:where(.profile-img),
+:where(.profile-img[data-img-size^='sm']) {
+  --profile-size: 2rem;
+  --profile-text: var(--bs-text-sm);
+
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+  height: var(--profile-size);
+  overflow: hidden;
+  position: relative;
+  width: var(--profile-size);
+}
+
+:where(.profile-img img) {
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+
+:where(.profile-img[data-no-img="true"]) img {
+  display: none;
+}
+
+:where(.profile-img)::before,
+:where(.profile-img)::after {
+  border-radius: 50%;
+  border-collapse: collapse;
+  height: 100%;
+  inset: 0;
+  position:absolute;
+  width: 100%;
+}
+
+/* Shadow */
+
+:where(.profile-img)::before {
+  box-shadow: var(--bs-shadow-profilePhoto);
+  content: '';
+}
+
+:where(.profile-img[data-no-img="true"])::before {
+    display: none;
+}
+
+/* Initials */
+
+:where(.profile-img[data-no-img="true"])::after {
+  border: 1px solid currentColor;
+  color: var(--bs-blue-500);
+  content: attr(data-initials);
+  font-size: var(--profile-text);
+  text-transform: uppercase;
+  display: grid;
+  place-items: center;
+}
+
+/* Profile Sizes */
+
+:where([data-img-size^='xs']) {
+  --profile-size: 1.5rem;
+  --profile-text: var(--bs-text-xs);
+}
+
+:where([data-img-size^='md']) {
+  --profile-size: 3rem;
+  --profile-text: var(--bs-text-md);
+}
+
+:where([data-img-size^='lg']) {
+  --profile-size: 4rem;
+  --profile-text: var(--bs-text-lg);
+}
+
+:where([data-img-size^='xl']) {
+  --profile-size: 5.75rem;
+  --profile-text: var(--bs-text-xl);
+}
+
+/* Profile with User Details */
+
+:where(.profile[data-layout]),
+:where(.profile[data-layout^='vertical']) {
+  display: grid;
+  row-gap: 0.5rem;
+}
+
+:where(.profile[data-layout^='horizontal']) {
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  grid-template-columns: auto 1fr;
+}
+
+:where(.profile-content) {
+  color: var(--bs-ink-light);
+  font-size: var(--bs-text-xs);
+}
+
+:where(.profile[data-layout]:hover .profile-content > *:first-child) {
+  --profile-ink-hover: var(--bs-blue-500);
+
+  color: var(--profile-ink-hover);
+  text-decoration: underline;
+}
+
+.dark :where(.profile[data-layout]:hover .profile-content > *:first-child) {
+  --profile-ink-hover: var(--bs-blue-200);
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-x: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+thead {
+  color: var(--bs-ink-base);
+  font-size: var(--bs-font-base);
+  font-weight: 600;
+}
+
+tbody {
+  color: var(--bs-ink-light);
+}
+
+th {
+  background: var(--bs-bg-base);
+}
+
+th, td {
+  border-bottom: 1px solid var(--bs-border);
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  padding: var(--bs-space-2);
+  text-align: left;
+}
+
+/* Table Borders */
+
+table[data-borders^="none"] {
+  border: 0;
+}
+
+table[data-borders^="all"] :where(th, td) {
+  border-left: 1px solid var(--bs-border);
+}
+
+table[data-borders^="all"] :where(th, td):last-child {
+  border-right: 1px solid var(--bs-border);
+}
+
+table[data-borders^="all"] th {
+  border-top: 1px solid var(--bs-border);
+}
+
+/* Table Rows */
+
+table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
+  background-color: var(--bs-bg-subtle);
+}
+
+/* Table Cells */
+
+table[data-cells^="fixed"] {
+  table-layout: fixed;
+}
+
+table:where([data-cells^="height"]) td {
+  height: 4.5rem;
+  vertical-align: middle;
+}
+
+/* Sticky Header */
+
+table:where([data-sticky]) {
+  isolation: isolate;
+}
+
+table:where([data-sticky^="top"]) td {
+  z-index: 1;
+}
+
+table:where([data-sticky^="top"]) {
+  border-collapse: separate;
+  overflow-y: unset; /* Will break sticky headers if removed */
+  position: relative;
+}
+
+table:where([data-sticky^="left"]) {
+  border-collapse: separate;
+  overflow-x: unset; /* Will break sticky headers if removed */
+  position: relative;
+}
+
+table:where([data-sticky^="top"]) th {
+  position: sticky;
+  top: var(--bs-content-top);
+  z-index: 2;
+}
+
+table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.box {
+  background: var(--bg-color, var(--bs-bg-subtle));
+  border-radius: 0.25rem;
+  padding: var(--box-space, var(--bs-space-6));
+}
+
+.box[data-invert] {
+  --bg-color: var(--bs-bg-invert);
+  color: var(--bs-ink-invert);
+}
+
+:where(.fluid) .box {
+  padding: var(--box-space, var(--bs-space-f-6));
+}
+
+.cluster {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cluster-space, var(--bs-space-6));
+  justify-content: flex-start;
+}
+
+.cluster[data-gap="tight"] {
+  gap: var(--cluster-space, var(--bs-space-2));
+}
+
+:where(.fluid) .cluster {
+  gap: var(--cluster-space, var(--bs-space-f-6));
+}
+
+:where(.fluid) .cluster[data-gap="tight"] {
+  gap: var(--cluster-space, var(--bs-space-f-2));
+}
+
+.flow > * + * {
+  margin-top: var(--flow-space, 1.25em);
+}
+
+.flow > :is(h1, h2, h3, h4, h5, h6) {
+  --flow-space: 2em;
+}
+
+.flow > hr + * {
+  --flow-space: 1.5em;
+}
+
+.flow > :is(h1, h2, h3, h4, h5, h6) + * {
+  --flow-space: 0.5em;
+}
+
+.flow > :is(ul, ol) > li {
+  margin-top: var(--flow-space, 0.625em);
+}
+
+.region {
+  padding-block: var(--region-space, var(--bs-space-6));
+}
+
+.region[data-space^='sm'] {
+  padding-block: var(--bs-space-3);
+}
+
+.region[data-space^='lg'] {
+  padding-block: var(--bs-space-12);
+}
+
+:where(.fluid) .region {
+  padding-block: var(--region-space, var(--bs-space-f-6));
+}
+
+:where(.fluid) .region[data-space^='sm'] {
+  padding-block: var(--bs-space-f-3);
+}
+
+:where(.fluid) .region[data-space^='lg'] {
+  padding-block: var(--bs-space-f-12);
+}
+
+.wrapper {
+  margin-inline: auto;
+  max-width: var(--max-width, 75rem);
+  min-width: 0;
+  padding-inline: var(--wrapper-space, var(--bs-space-6));
+  position: relative;
+  width: 100%;
+}
+
+:where(.fluid) .wrapper {
+  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
+}
+
+.wrapper[data-flush] {
+  padding-inline: 0;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: auto;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}
+
+.measure-compact {
+  max-width: 40ch;
+}
+
+.measure-short {
+  max-width: 50ch;
+}
+
+.measure-long {
+  max-width: 70ch;
+}