/* dist/Accordion/styles.module.scss */
@layer cmm.components {
  .Accordion {
    width: 100%;
  }
  .Accordion__details {
    border-bottom: 1px solid var(--cmm-color-border-base);
  }
  .Accordion__details:first-of-type {
    border-top: 1px solid var(--cmm-color-border-base);
  }
  .Accordion__details[open] .Accordion__summary > svg {
    rotate: -180deg;
  }
  .Accordion__summary {
    display: block;
    cursor: pointer;
    padding: var(--cmm-Accordion-summary-pad, 0.5rem 1rem);
    display: grid;
    grid-template-columns: 1fr auto;
    user-select: none;
    transition: var(--cmm-transition-bg);
    color: var(--cmm-color-font-base);
  }
  .Accordion__summary::-webkit-details-marker {
    display: none;
  }
  .Accordion__summary > svg {
    color: var(--cmm-color-font-muted);
    width: var(--cmm-Accordion-marker-size, 1.25em);
    height: var(--cmm-Accordion-marker-size, 1.25em);
  }
  .Accordion__content {
    padding: var(--cmm-Accordion-content-pad, 0.5rem 1rem);
    font-weight: var(--cmm-font-weight-normal);
    color: var(--cmm-color-font-muted);
  }
}

/* dist/Avatar/styles.module.scss */
@layer cmm.components {
  .Avatar {
    width: var(--cmm-Avatar-size);
    height: var(--cmm-Avatar-size);
    display: inline-block;
    border-radius: var(--cmm-radius-full);
    overflow: hidden;
    transition: var(--cmm-transition-bg);
    margin: var(--cmm-Avatar-margin);
    font-weight: var(--cmm-font-weight-medium);
    box-shadow: 0 0 0 var(--cmm-Avatar-ring-size) var(--cmm-color-surface-0);
  }
  .Avatar * {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
  }
  .Avatar img {
    object-fit: cover;
    object-position: center;
  }
  .Avatar svg {
    width: 1.8em;
    height: 1.8em;
  }
  .Avatar--solid.Avatar--primary {
    background: var(--cmm-color-primary-solid-bg);
    color: var(--cmm-color-primary-solid-font);
    border-color: var(--cmm-color-primary-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--primary:hover {
    background: var(--cmm-color-primary-solid-bg-hover);
  }
  .Avatar--solid.Avatar--neutral {
    background: var(--cmm-color-neutral-solid-bg);
    color: var(--cmm-color-neutral-solid-font);
    border-color: var(--cmm-color-neutral-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--neutral:hover {
    background: var(--cmm-color-neutral-solid-bg-hover);
  }
  .Avatar--solid.Avatar--info {
    background: var(--cmm-color-info-solid-bg);
    color: var(--cmm-color-info-solid-font);
    border-color: var(--cmm-color-info-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--info:hover {
    background: var(--cmm-color-info-solid-bg-hover);
  }
  .Avatar--solid.Avatar--success {
    background: var(--cmm-color-success-solid-bg);
    color: var(--cmm-color-success-solid-font);
    border-color: var(--cmm-color-success-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--success:hover {
    background: var(--cmm-color-success-solid-bg-hover);
  }
  .Avatar--solid.Avatar--warn {
    background: var(--cmm-color-warn-solid-bg);
    color: var(--cmm-color-warn-solid-font);
    border-color: var(--cmm-color-warn-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--warn:hover {
    background: var(--cmm-color-warn-solid-bg-hover);
  }
  .Avatar--solid.Avatar--danger {
    background: var(--cmm-color-danger-solid-bg);
    color: var(--cmm-color-danger-solid-font);
    border-color: var(--cmm-color-danger-solid-border);
  }
  :is(a, button).Avatar--solid.Avatar--danger:hover {
    background: var(--cmm-color-danger-solid-bg-hover);
  }
  .Avatar--soft.Avatar--primary {
    background: var(--cmm-color-primary-soft-bg);
    color: var(--cmm-color-primary-soft-font);
    border-color: var(--cmm-color-primary-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--primary:hover {
    background: var(--cmm-color-primary-soft-bg-hover);
  }
  .Avatar--soft.Avatar--neutral {
    background: var(--cmm-color-neutral-soft-bg);
    color: var(--cmm-color-neutral-soft-font);
    border-color: var(--cmm-color-neutral-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--neutral:hover {
    background: var(--cmm-color-neutral-soft-bg-hover);
  }
  .Avatar--soft.Avatar--info {
    background: var(--cmm-color-info-soft-bg);
    color: var(--cmm-color-info-soft-font);
    border-color: var(--cmm-color-info-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--info:hover {
    background: var(--cmm-color-info-soft-bg-hover);
  }
  .Avatar--soft.Avatar--success {
    background: var(--cmm-color-success-soft-bg);
    color: var(--cmm-color-success-soft-font);
    border-color: var(--cmm-color-success-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--success:hover {
    background: var(--cmm-color-success-soft-bg-hover);
  }
  .Avatar--soft.Avatar--warn {
    background: var(--cmm-color-warn-soft-bg);
    color: var(--cmm-color-warn-soft-font);
    border-color: var(--cmm-color-warn-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--warn:hover {
    background: var(--cmm-color-warn-soft-bg-hover);
  }
  .Avatar--soft.Avatar--danger {
    background: var(--cmm-color-danger-soft-bg);
    color: var(--cmm-color-danger-soft-font);
    border-color: var(--cmm-color-danger-soft-border);
  }
  :is(a, button).Avatar--soft.Avatar--danger:hover {
    background: var(--cmm-color-danger-soft-bg-hover);
  }
  .Avatar--outline.Avatar--primary {
    background: var(--cmm-color-primary-outline-bg);
    color: var(--cmm-color-primary-outline-font);
    border-color: var(--cmm-color-primary-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--primary:hover {
    background: var(--cmm-color-primary-outline-bg-hover);
  }
  .Avatar--outline.Avatar--neutral {
    background: var(--cmm-color-neutral-outline-bg);
    color: var(--cmm-color-neutral-outline-font);
    border-color: var(--cmm-color-neutral-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--neutral:hover {
    background: var(--cmm-color-neutral-outline-bg-hover);
  }
  .Avatar--outline.Avatar--info {
    background: var(--cmm-color-info-outline-bg);
    color: var(--cmm-color-info-outline-font);
    border-color: var(--cmm-color-info-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--info:hover {
    background: var(--cmm-color-info-outline-bg-hover);
  }
  .Avatar--outline.Avatar--success {
    background: var(--cmm-color-success-outline-bg);
    color: var(--cmm-color-success-outline-font);
    border-color: var(--cmm-color-success-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--success:hover {
    background: var(--cmm-color-success-outline-bg-hover);
  }
  .Avatar--outline.Avatar--warn {
    background: var(--cmm-color-warn-outline-bg);
    color: var(--cmm-color-warn-outline-font);
    border-color: var(--cmm-color-warn-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--warn:hover {
    background: var(--cmm-color-warn-outline-bg-hover);
  }
  .Avatar--outline.Avatar--danger {
    background: var(--cmm-color-danger-outline-bg);
    color: var(--cmm-color-danger-outline-font);
    border-color: var(--cmm-color-danger-outline-border);
  }
  :is(a, button).Avatar--outline.Avatar--danger:hover {
    background: var(--cmm-color-danger-outline-bg-hover);
  }
  .Avatar--ghost.Avatar--primary {
    background: var(--cmm-color-primary-ghost-bg);
    color: var(--cmm-color-primary-ghost-font);
    border-color: var(--cmm-color-primary-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--primary:hover {
    background: var(--cmm-color-primary-ghost-bg-hover);
  }
  .Avatar--ghost.Avatar--neutral {
    background: var(--cmm-color-neutral-ghost-bg);
    color: var(--cmm-color-neutral-ghost-font);
    border-color: var(--cmm-color-neutral-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--neutral:hover {
    background: var(--cmm-color-neutral-ghost-bg-hover);
  }
  .Avatar--ghost.Avatar--info {
    background: var(--cmm-color-info-ghost-bg);
    color: var(--cmm-color-info-ghost-font);
    border-color: var(--cmm-color-info-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--info:hover {
    background: var(--cmm-color-info-ghost-bg-hover);
  }
  .Avatar--ghost.Avatar--success {
    background: var(--cmm-color-success-ghost-bg);
    color: var(--cmm-color-success-ghost-font);
    border-color: var(--cmm-color-success-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--success:hover {
    background: var(--cmm-color-success-ghost-bg-hover);
  }
  .Avatar--ghost.Avatar--warn {
    background: var(--cmm-color-warn-ghost-bg);
    color: var(--cmm-color-warn-ghost-font);
    border-color: var(--cmm-color-warn-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--warn:hover {
    background: var(--cmm-color-warn-ghost-bg-hover);
  }
  .Avatar--ghost.Avatar--danger {
    background: var(--cmm-color-danger-ghost-bg);
    color: var(--cmm-color-danger-ghost-font);
    border-color: var(--cmm-color-danger-ghost-border);
  }
  :is(a, button).Avatar--ghost.Avatar--danger:hover {
    background: var(--cmm-color-danger-ghost-bg-hover);
  }
  .Avatar--outline {
    border-width: 1px;
    border-style: solid;
  }
  .Avatar--md,
  .Avatar {
    --cmm-Avatar-size: 3rem;
    font-size: var(--cmm-font-size-md);
  }
  .Avatar--sm {
    --cmm-Avatar-size: 2rem;
    font-size: var(--cmm-font-size-xs);
  }
  .Avatar--lg {
    --cmm-Avatar-size: 4rem;
    font-size: var(--cmm-font-size-xl);
  }
}

/* dist/AvatarGroup/styles.module.scss */
@layer cmm.components {
  .AvatarGroup {
    --cmm-Avatar-ring-size: 2px;
    --cmm-Avatar-margin: 0 0 0 -0.5rem;
    color: gray;
    display: flex;
  }
}

/* dist/Breadcrumbs/styles.module.scss */
@layer cmm.components {
  .Breadcrumbs__separator {
    color: var(--cmm-color-font-muted);
    width: 1rem;
    height: 1rem;
  }
  .Breadcrumbs__list {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  .Breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--cmm-font-size-sm);
    color: var(--cmm-color-font-base);
  }
  .Breadcrumbs__item a {
    color: var(--cmm-color-font-base);
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
  }
}

/* dist/Button/styles.module.scss */
@layer cmm.components {
  .Button {
    font-weight: var(--cmm-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: var(--cmm-transition-bg);
    outline-offset: 2px;
  }
  .Button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .Button--solid.Button--primary {
    background: var(--cmm-color-primary-solid-bg);
    color: var(--cmm-color-primary-solid-font);
    border-color: var(--cmm-color-primary-solid-border);
  }
  .Button--solid.Button--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-solid-bg-hover);
  }
  .Button--solid.Button--neutral {
    background: var(--cmm-color-neutral-solid-bg);
    color: var(--cmm-color-neutral-solid-font);
    border-color: var(--cmm-color-neutral-solid-border);
  }
  .Button--solid.Button--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-solid-bg-hover);
  }
  .Button--solid.Button--info {
    background: var(--cmm-color-info-solid-bg);
    color: var(--cmm-color-info-solid-font);
    border-color: var(--cmm-color-info-solid-border);
  }
  .Button--solid.Button--info:hover:not(:disabled) {
    background: var(--cmm-color-info-solid-bg-hover);
  }
  .Button--solid.Button--success {
    background: var(--cmm-color-success-solid-bg);
    color: var(--cmm-color-success-solid-font);
    border-color: var(--cmm-color-success-solid-border);
  }
  .Button--solid.Button--success:hover:not(:disabled) {
    background: var(--cmm-color-success-solid-bg-hover);
  }
  .Button--solid.Button--warn {
    background: var(--cmm-color-warn-solid-bg);
    color: var(--cmm-color-warn-solid-font);
    border-color: var(--cmm-color-warn-solid-border);
  }
  .Button--solid.Button--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-solid-bg-hover);
  }
  .Button--solid.Button--danger {
    background: var(--cmm-color-danger-solid-bg);
    color: var(--cmm-color-danger-solid-font);
    border-color: var(--cmm-color-danger-solid-border);
  }
  .Button--solid.Button--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-solid-bg-hover);
  }
  .Button--soft.Button--primary {
    background: var(--cmm-color-primary-soft-bg);
    color: var(--cmm-color-primary-soft-font);
    border-color: var(--cmm-color-primary-soft-border);
  }
  .Button--soft.Button--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-soft-bg-hover);
  }
  .Button--soft.Button--neutral {
    background: var(--cmm-color-neutral-soft-bg);
    color: var(--cmm-color-neutral-soft-font);
    border-color: var(--cmm-color-neutral-soft-border);
  }
  .Button--soft.Button--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-soft-bg-hover);
  }
  .Button--soft.Button--info {
    background: var(--cmm-color-info-soft-bg);
    color: var(--cmm-color-info-soft-font);
    border-color: var(--cmm-color-info-soft-border);
  }
  .Button--soft.Button--info:hover:not(:disabled) {
    background: var(--cmm-color-info-soft-bg-hover);
  }
  .Button--soft.Button--success {
    background: var(--cmm-color-success-soft-bg);
    color: var(--cmm-color-success-soft-font);
    border-color: var(--cmm-color-success-soft-border);
  }
  .Button--soft.Button--success:hover:not(:disabled) {
    background: var(--cmm-color-success-soft-bg-hover);
  }
  .Button--soft.Button--warn {
    background: var(--cmm-color-warn-soft-bg);
    color: var(--cmm-color-warn-soft-font);
    border-color: var(--cmm-color-warn-soft-border);
  }
  .Button--soft.Button--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-soft-bg-hover);
  }
  .Button--soft.Button--danger {
    background: var(--cmm-color-danger-soft-bg);
    color: var(--cmm-color-danger-soft-font);
    border-color: var(--cmm-color-danger-soft-border);
  }
  .Button--soft.Button--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-soft-bg-hover);
  }
  .Button--outline.Button--primary {
    background: var(--cmm-color-primary-outline-bg);
    color: var(--cmm-color-primary-outline-font);
    border-color: var(--cmm-color-primary-outline-border);
  }
  .Button--outline.Button--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-outline-bg-hover);
  }
  .Button--outline.Button--neutral {
    background: var(--cmm-color-neutral-outline-bg);
    color: var(--cmm-color-neutral-outline-font);
    border-color: var(--cmm-color-neutral-outline-border);
  }
  .Button--outline.Button--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-outline-bg-hover);
  }
  .Button--outline.Button--info {
    background: var(--cmm-color-info-outline-bg);
    color: var(--cmm-color-info-outline-font);
    border-color: var(--cmm-color-info-outline-border);
  }
  .Button--outline.Button--info:hover:not(:disabled) {
    background: var(--cmm-color-info-outline-bg-hover);
  }
  .Button--outline.Button--success {
    background: var(--cmm-color-success-outline-bg);
    color: var(--cmm-color-success-outline-font);
    border-color: var(--cmm-color-success-outline-border);
  }
  .Button--outline.Button--success:hover:not(:disabled) {
    background: var(--cmm-color-success-outline-bg-hover);
  }
  .Button--outline.Button--warn {
    background: var(--cmm-color-warn-outline-bg);
    color: var(--cmm-color-warn-outline-font);
    border-color: var(--cmm-color-warn-outline-border);
  }
  .Button--outline.Button--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-outline-bg-hover);
  }
  .Button--outline.Button--danger {
    background: var(--cmm-color-danger-outline-bg);
    color: var(--cmm-color-danger-outline-font);
    border-color: var(--cmm-color-danger-outline-border);
  }
  .Button--outline.Button--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-outline-bg-hover);
  }
  .Button--ghost.Button--primary {
    background: var(--cmm-color-primary-ghost-bg);
    color: var(--cmm-color-primary-ghost-font);
    border-color: var(--cmm-color-primary-ghost-border);
  }
  .Button--ghost.Button--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-ghost-bg-hover);
  }
  .Button--ghost.Button--neutral {
    background: var(--cmm-color-neutral-ghost-bg);
    color: var(--cmm-color-neutral-ghost-font);
    border-color: var(--cmm-color-neutral-ghost-border);
  }
  .Button--ghost.Button--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-ghost-bg-hover);
  }
  .Button--ghost.Button--info {
    background: var(--cmm-color-info-ghost-bg);
    color: var(--cmm-color-info-ghost-font);
    border-color: var(--cmm-color-info-ghost-border);
  }
  .Button--ghost.Button--info:hover:not(:disabled) {
    background: var(--cmm-color-info-ghost-bg-hover);
  }
  .Button--ghost.Button--success {
    background: var(--cmm-color-success-ghost-bg);
    color: var(--cmm-color-success-ghost-font);
    border-color: var(--cmm-color-success-ghost-border);
  }
  .Button--ghost.Button--success:hover:not(:disabled) {
    background: var(--cmm-color-success-ghost-bg-hover);
  }
  .Button--ghost.Button--warn {
    background: var(--cmm-color-warn-ghost-bg);
    color: var(--cmm-color-warn-ghost-font);
    border-color: var(--cmm-color-warn-ghost-border);
  }
  .Button--ghost.Button--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-ghost-bg-hover);
  }
  .Button--ghost.Button--danger {
    background: var(--cmm-color-danger-ghost-bg);
    color: var(--cmm-color-danger-ghost-font);
    border-color: var(--cmm-color-danger-ghost-border);
  }
  .Button--ghost.Button--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-ghost-bg-hover);
  }
  .Button--outline {
    border-width: 1px;
    border-style: solid;
  }
  .Button--md,
  .Button {
    height: 2.5rem;
    font-size: var(--cmm-font-size-sm);
    padding: 0 1rem;
  }
  .Button {
    border-radius: var(--cmm-Button-radius, var(--cmm-radius-lg));
  }
  .Button--sm {
    height: 2rem;
    font-size: var(--cmm-font-size-sm);
    padding: 0 0.75rem;
  }
  .Button--lg {
    height: 3rem;
    font-size: var(--cmm-font-size-md);
    padding: 0 1.25rem;
  }
  .Button__endDecorator,
  .Button__startDecorator {
    display: flex;
    align-items: center;
  }
  .Button__endDecorator > svg,
  .Button__startDecorator > svg {
    width: var(--cmm-Button-icon-size, 1.2em);
    height: var(--cmm-Button-icon-size, 1.2em);
  }
  .Button__startDecorator {
    margin-right: var(--cmm-Button-icon-margin, 0.5rem);
  }
  .Button__endDecorator {
    margin-left: var(--cmm-Button-icon-margin, 0.5rem);
  }
}

/* dist/FormField/FormFieldDescription/styles.module.scss */
@layer cmm.components {
  .FormFieldDescription {
    font-size: var(--cmm-FormFieldDescription-font-size, var(--cmm-font-size-sm));
    color: var(--cmm-FormFieldDescription-color, var(--cmm-color-font-muted));
    line-height: var(--cmm-FormFieldDescription-line-height, 1.2);
    margin: var(--cmm-FormFieldDescription-margin);
  }
}

/* dist/FormField/FormFieldError/styles.module.scss */
@layer cmm.components {
  .FormFieldError {
    font-size: var(--cmm-FormFieldError-font-size, var(--cmm-font-size-sm));
    color: var(--cmm-FormFieldError-color, var(--cmm-color-danger-6));
    line-height: var(--cmm-FormFieldError-line-height, 1.2);
    margin: var(--cmm-FormFieldError-margin);
  }
}

/* dist/FormField/FormFieldLabel/styles.module.scss */
@layer cmm.components {
  .FormFieldLabel {
    font-size: var(--cmm-FormFieldLabel-font-size, var(--cmm-font-size-sm));
    font-weight: var(--cmm-FormFieldLabel-font-weight, var(--cmm-font-weight-medium));
    line-height: var(--cmm-FormFieldLabel-line-height, 1.2);
    margin: var(--cmm-FormFieldLabel-margin);
    inline-size: fit-content;
  }
}

/* dist/FormField/styles.module.scss */
@layer cmm.components {
  .FormField {
    --cmm-FormFieldLabel-margin: 0 0 0.5rem 0;
    --cmm-FormFieldDescription-margin: -0.4rem 0 0.5rem 0;
    --cmm-FormFieldError-margin: 0.5rem 0 0 0;
    display: flex;
    flex-direction: column;
  }
  .FormField:has(:is([required], [aria-required=true])) label::after {
    content: var(--cmm-FormField-required-mark, "*");
    color: var(--cmm-color-danger-5);
    margin-left: 0.25rem;
  }
  .FormField:has(:where(:disabled)) label {
    color: var(--cmm-color-font-subtle);
  }
  .FormField--fill {
    width: 100%;
  }
}

/* dist/Checkbox/styles.module.scss */
@layer cmm.components {
  .Checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5em;
    position: relative;
    border-radius: var(--cmm-radius-sm);
    margin: var(--cmm-Checkbox-margin);
  }
  @supports selector(:has(:focus-visible)) {
    .Checkbox:has(:focus-visible) {
      outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
      outline-offset: 2px;
    }
  }
  @supports not selector(:has(:focus-visible)) {
    .Checkbox:focus-within {
      outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
      outline-offset: 2px;
    }
  }
  .Checkbox > input[type=checkbox] {
    margin: 0;
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .Checkbox > input[type=checkbox]:checked + .Checkbox__marker {
    background: var(--cmm-color-primary-soft-bg);
  }
  .Checkbox > input[type=checkbox]:checked + .Checkbox__marker::before {
    transform: scale(1);
  }
  .Checkbox > input[type=checkbox]:hover:not(:disabled) + .Checkbox__marker {
    background: var(--cmm-color-primary-soft-bg-hover);
  }
  .Checkbox > input[type=checkbox]:disabled {
    cursor: not-allowed;
  }
  .Checkbox > input[type=checkbox]:disabled ~ .Checkbox__marker {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .Checkbox > input[type=checkbox]:disabled ~ label {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .Checkbox .FormFieldError {
    position: relative;
    grid-column: 2;
  }
  .Checkbox__marker {
    width: var(--cmm-Checkbox-size);
    height: var(--cmm-Checkbox-size);
    border-radius: var(--cmm-radius-sm);
    display: grid;
    place-content: center;
    background: var(--cmm-color-primary-soft-bg);
    transition: var(--cmm-transition-bg);
  }
  .Checkbox__marker::before {
    content: "";
    width: calc(var(--cmm-Checkbox-size) * 0.5);
    height: calc(var(--cmm-Checkbox-size) * 0.5);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    background: var(--cmm-color-primary-soft-font);
  }
  .Checkbox--md,
  .Checkbox {
    --cmm-Checkbox-size: 1.25rem;
  }
  .Checkbox--md > label,
  .Checkbox > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-sm);
  }
  .Checkbox--sm {
    --cmm-Checkbox-size: 1rem;
  }
  .Checkbox--sm > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-sm);
  }
  .Checkbox--lg {
    --cmm-Checkbox-size: 1.5rem;
  }
  .Checkbox--lg > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-md);
  }
}

/* dist/IconButton/styles.module.scss */
@layer cmm.components {
  .IconButton {
    font-weight: var(--cmm-font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: var(--cmm-transition-bg);
    outline-offset: 2px;
  }
  .IconButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  .IconButton--solid.IconButton--primary {
    background: var(--cmm-color-primary-solid-bg);
    color: var(--cmm-color-primary-solid-font);
    border-color: var(--cmm-color-primary-solid-border);
  }
  .IconButton--solid.IconButton--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-solid-bg-hover);
  }
  .IconButton--solid.IconButton--neutral {
    background: var(--cmm-color-neutral-solid-bg);
    color: var(--cmm-color-neutral-solid-font);
    border-color: var(--cmm-color-neutral-solid-border);
  }
  .IconButton--solid.IconButton--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-solid-bg-hover);
  }
  .IconButton--solid.IconButton--info {
    background: var(--cmm-color-info-solid-bg);
    color: var(--cmm-color-info-solid-font);
    border-color: var(--cmm-color-info-solid-border);
  }
  .IconButton--solid.IconButton--info:hover:not(:disabled) {
    background: var(--cmm-color-info-solid-bg-hover);
  }
  .IconButton--solid.IconButton--success {
    background: var(--cmm-color-success-solid-bg);
    color: var(--cmm-color-success-solid-font);
    border-color: var(--cmm-color-success-solid-border);
  }
  .IconButton--solid.IconButton--success:hover:not(:disabled) {
    background: var(--cmm-color-success-solid-bg-hover);
  }
  .IconButton--solid.IconButton--warn {
    background: var(--cmm-color-warn-solid-bg);
    color: var(--cmm-color-warn-solid-font);
    border-color: var(--cmm-color-warn-solid-border);
  }
  .IconButton--solid.IconButton--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-solid-bg-hover);
  }
  .IconButton--solid.IconButton--danger {
    background: var(--cmm-color-danger-solid-bg);
    color: var(--cmm-color-danger-solid-font);
    border-color: var(--cmm-color-danger-solid-border);
  }
  .IconButton--solid.IconButton--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-solid-bg-hover);
  }
  .IconButton--soft.IconButton--primary {
    background: var(--cmm-color-primary-soft-bg);
    color: var(--cmm-color-primary-soft-font);
    border-color: var(--cmm-color-primary-soft-border);
  }
  .IconButton--soft.IconButton--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-soft-bg-hover);
  }
  .IconButton--soft.IconButton--neutral {
    background: var(--cmm-color-neutral-soft-bg);
    color: var(--cmm-color-neutral-soft-font);
    border-color: var(--cmm-color-neutral-soft-border);
  }
  .IconButton--soft.IconButton--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-soft-bg-hover);
  }
  .IconButton--soft.IconButton--info {
    background: var(--cmm-color-info-soft-bg);
    color: var(--cmm-color-info-soft-font);
    border-color: var(--cmm-color-info-soft-border);
  }
  .IconButton--soft.IconButton--info:hover:not(:disabled) {
    background: var(--cmm-color-info-soft-bg-hover);
  }
  .IconButton--soft.IconButton--success {
    background: var(--cmm-color-success-soft-bg);
    color: var(--cmm-color-success-soft-font);
    border-color: var(--cmm-color-success-soft-border);
  }
  .IconButton--soft.IconButton--success:hover:not(:disabled) {
    background: var(--cmm-color-success-soft-bg-hover);
  }
  .IconButton--soft.IconButton--warn {
    background: var(--cmm-color-warn-soft-bg);
    color: var(--cmm-color-warn-soft-font);
    border-color: var(--cmm-color-warn-soft-border);
  }
  .IconButton--soft.IconButton--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-soft-bg-hover);
  }
  .IconButton--soft.IconButton--danger {
    background: var(--cmm-color-danger-soft-bg);
    color: var(--cmm-color-danger-soft-font);
    border-color: var(--cmm-color-danger-soft-border);
  }
  .IconButton--soft.IconButton--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-soft-bg-hover);
  }
  .IconButton--outline.IconButton--primary {
    background: var(--cmm-color-primary-outline-bg);
    color: var(--cmm-color-primary-outline-font);
    border-color: var(--cmm-color-primary-outline-border);
  }
  .IconButton--outline.IconButton--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-outline-bg-hover);
  }
  .IconButton--outline.IconButton--neutral {
    background: var(--cmm-color-neutral-outline-bg);
    color: var(--cmm-color-neutral-outline-font);
    border-color: var(--cmm-color-neutral-outline-border);
  }
  .IconButton--outline.IconButton--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-outline-bg-hover);
  }
  .IconButton--outline.IconButton--info {
    background: var(--cmm-color-info-outline-bg);
    color: var(--cmm-color-info-outline-font);
    border-color: var(--cmm-color-info-outline-border);
  }
  .IconButton--outline.IconButton--info:hover:not(:disabled) {
    background: var(--cmm-color-info-outline-bg-hover);
  }
  .IconButton--outline.IconButton--success {
    background: var(--cmm-color-success-outline-bg);
    color: var(--cmm-color-success-outline-font);
    border-color: var(--cmm-color-success-outline-border);
  }
  .IconButton--outline.IconButton--success:hover:not(:disabled) {
    background: var(--cmm-color-success-outline-bg-hover);
  }
  .IconButton--outline.IconButton--warn {
    background: var(--cmm-color-warn-outline-bg);
    color: var(--cmm-color-warn-outline-font);
    border-color: var(--cmm-color-warn-outline-border);
  }
  .IconButton--outline.IconButton--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-outline-bg-hover);
  }
  .IconButton--outline.IconButton--danger {
    background: var(--cmm-color-danger-outline-bg);
    color: var(--cmm-color-danger-outline-font);
    border-color: var(--cmm-color-danger-outline-border);
  }
  .IconButton--outline.IconButton--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-outline-bg-hover);
  }
  .IconButton--ghost.IconButton--primary {
    background: var(--cmm-color-primary-ghost-bg);
    color: var(--cmm-color-primary-ghost-font);
    border-color: var(--cmm-color-primary-ghost-border);
  }
  .IconButton--ghost.IconButton--primary:hover:not(:disabled) {
    background: var(--cmm-color-primary-ghost-bg-hover);
  }
  .IconButton--ghost.IconButton--neutral {
    background: var(--cmm-color-neutral-ghost-bg);
    color: var(--cmm-color-neutral-ghost-font);
    border-color: var(--cmm-color-neutral-ghost-border);
  }
  .IconButton--ghost.IconButton--neutral:hover:not(:disabled) {
    background: var(--cmm-color-neutral-ghost-bg-hover);
  }
  .IconButton--ghost.IconButton--info {
    background: var(--cmm-color-info-ghost-bg);
    color: var(--cmm-color-info-ghost-font);
    border-color: var(--cmm-color-info-ghost-border);
  }
  .IconButton--ghost.IconButton--info:hover:not(:disabled) {
    background: var(--cmm-color-info-ghost-bg-hover);
  }
  .IconButton--ghost.IconButton--success {
    background: var(--cmm-color-success-ghost-bg);
    color: var(--cmm-color-success-ghost-font);
    border-color: var(--cmm-color-success-ghost-border);
  }
  .IconButton--ghost.IconButton--success:hover:not(:disabled) {
    background: var(--cmm-color-success-ghost-bg-hover);
  }
  .IconButton--ghost.IconButton--warn {
    background: var(--cmm-color-warn-ghost-bg);
    color: var(--cmm-color-warn-ghost-font);
    border-color: var(--cmm-color-warn-ghost-border);
  }
  .IconButton--ghost.IconButton--warn:hover:not(:disabled) {
    background: var(--cmm-color-warn-ghost-bg-hover);
  }
  .IconButton--ghost.IconButton--danger {
    background: var(--cmm-color-danger-ghost-bg);
    color: var(--cmm-color-danger-ghost-font);
    border-color: var(--cmm-color-danger-ghost-border);
  }
  .IconButton--ghost.IconButton--danger:hover:not(:disabled) {
    background: var(--cmm-color-danger-ghost-bg-hover);
  }
  .IconButton--outline {
    border-width: 1px;
    border-style: solid;
  }
  .IconButton {
    border-radius: var(--cmm-radius-lg);
    width: var(--cmm-IconButton-size);
    height: var(--cmm-IconButton-size);
    padding: 0;
  }
  .IconButton > svg {
    width: var(--cmm-IconButton-icon-size);
    height: var(--cmm-IconButton-icon-size);
  }
  .IconButton--md,
  .IconButton {
    --cmm-IconButton-size: 2.5rem;
    --cmm-IconButton-icon-size: 1.75em;
  }
  .IconButton--sm {
    --cmm-IconButton-size: 2rem;
    --cmm-IconButton-icon-size: 1.25em;
  }
  .IconButton--lg {
    --cmm-IconButton-size: 3.5rem;
    --cmm-IconButton-icon-size: 2.25em;
  }
}

/* dist/Dialog/styles.module.scss */
@layer cmm.components {
  .Dialog {
    position: relative;
    z-index: 100;
  }
  .Dialog__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
  }
  .Dialog__panel-wrapper {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
  }
  .Dialog__panel {
    position: relative;
    min-width: min(100vw - 2 * var(--cmm-Dialog-outer-margin, 1rem), var(--cmm-Dialog-min-width, 28rem));
    max-width: var(--cmm-Dialog-max-width, 28rem);
    margin: 0 var(--cmm-Dialog-outer-margin, 1rem);
    padding: 1.5rem;
    background: var(--cmm-color-surface-0);
    border-radius: var(--cmm-radius-xl);
  }
  .Dialog__title {
    font-weight: var(--cmm-font-weight-semibold);
    font-size: var(--cmm-font-size-lg);
    color: var(--cmm-color-font-base);
  }
  .Dialog__content {
    margin: 0.5rem 0 1rem 0;
    font-weight: var(--cmm-font-weight-normal);
    color: var(--cmm-color-font-muted);
  }
  .Dialog__close {
    --cmm-IconButton-size: 1.75rem !important;
    --cmm-IconButton-icon-size: calc( var(--cmm-IconButton-size) * 0.75 ) !important;
    position: absolute;
    inset: var(--cmm-Dialog-close-offset, 0.75rem) var(--cmm-Dialog-close-offset, 0.75rem) auto auto;
  }
}

/* dist/Input/styles.module.scss */
@layer cmm.components {
  .Input--md,
  .Input {
    font-size: var(--cmm-font-size-md);
    height: 2.5rem;
    padding-left: var(--cmm-Input-start-decor-width, 0.75rem);
    padding-right: var(--cmm-Input-end-decor-width, 0.75rem);
    margin: var(--cmm-Input-margin);
  }
  .Input {
    appearance: none;
    border: 1px solid var(--cmm-Input-border);
    border-radius: var(--cmm-radius-lg);
    transition: var(--cmm-transition-bg);
    font-weight: var(--cmm-font-weight-normal);
    outline-offset: 0;
    background-color: var(--cmm-Input-bg);
  }
  .Input:disabled {
    color: var(--cmm-color-font-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .Input:disabled::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Input::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Input[aria-invalid=true] {
    border-color: var(--cmm-color-danger-outline-border);
    color: var(--cmm-color-danger-font);
    outline-color: var(--cmm-outline-color-danger);
  }
  .Input[aria-invalid=true]::placeholder {
    color: var(--cmm-color-danger-muted);
  }
  .Input--sm {
    font-size: var(--cmm-font-size-sm);
    height: 2rem;
    padding-left: var(--cmm-Input-start-decor-width, 0.5rem);
    padding-right: var(--cmm-Input-end-decor-width, 0.5rem);
  }
  .Input--lg {
    font-size: var(--cmm-font-size-md);
    height: 3rem;
    padding-left: var(--cmm-Input-start-decor-width, 1rem);
    padding-right: var(--cmm-Input-end-decor-width, 1rem);
  }
  .Input--fill {
    width: 100%;
  }
}

/* dist/InputGroup/styles.module.scss */
@layer cmm.components {
  .InputGroup {
    display: inline-flex;
    position: relative;
  }
  .InputGroup__decorator--end,
  .InputGroup__decorator--start {
    position: absolute;
    display: grid;
    place-content: center;
    top: 0;
    bottom: 0;
  }
  .InputGroup__decorator--end svg,
  .InputGroup__decorator--start svg {
    width: 1em;
    height: 1em;
  }
  .InputGroup__decorator--start {
    left: 0;
    width: var(--cmm-Input-start-decor-width, 0.75rem);
  }
  .InputGroup__decorator--end {
    right: 0;
    width: var(--cmm-Input-end-decor-width, 0.75rem);
  }
}

/* dist/Kbd/styles.module.scss */
@layer cmm.components {
  .Kbd {
    font-family: var(--cmm-font-family-code);
    font-weight: var(--cmm-font-weight-semibold);
    color: var(--cmm-Kbd-font);
    padding: 0 0.5em;
    line-height: 1.5;
    background: var(--cmm-Kbd-bg);
    border-radius: var(--cmm-radius-sm);
    border-width: 1px 1px 3px;
    border-style: solid;
    border-color: var(--cmm-Kbd-border);
  }
}

/* dist/Markup/styles.module.scss */
@layer cmm.components {
  .Markup > :where(:first-child) {
    margin-top: 0 !important;
  }
  .Markup > :where(:last-child) {
    margin-bottom: 0 !important;
  }
  .Markup :where(h1, h2, h3, h4):not(:where([class~=no-markup] *)) {
    margin-top: 2.25rem;
    margin-bottom: 1.2rem;
    line-height: 1.3;
    color: var(--cmm-color-font-base);
  }
  .Markup :where(table, img, blockquote):not(:where([class~=no-markup] *)) {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .Markup :where(p):not(:where([class~=no-markup] *)) {
    margin-top: 1rem;
    color: var(--cmm-color-font-muted);
  }
  .Markup :where(ul, ol):not(:first-child):not(:where([class~=no-markup] *)) {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
  .Markup :where(ul, ol):not(:where([class~=no-markup] *)) :where(ul, ol) {
    margin: 0.5rem 0 0 0;
  }
  .Markup > *:first-child {
    margin-top: 0;
  }
  .Markup :where(h1, h2):not(:where([class~=no-markup] *)) {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-2xl);
    border-bottom: 1px solid var(--cmm-color-border-base);
    padding-bottom: 0.3rem;
  }
  .Markup :where(h3):not(:where([class~=no-markup] *)) {
    font-weight: var(--cmm-font-weight-semibold);
    font-size: var(--cmm-font-size-xl);
  }
  .Markup :where(h4):not(:where([class~=no-markup] *)) {
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-lg);
  }
  .Markup :where(code):not(:where([class~=no-markup] *)) {
    color: var(--cmm-color-font-base);
    background: var(--cmm-color-code-inline);
    border: 1px solid var(--cmm-color-border-base);
    padding: 0.2em 0.4em;
    border-radius: var(--cmm-radius-sm);
    font-family: var(--cmm-font-family-code);
    font-weight: var(--cmm-font-weight-normal);
    font-size: 0.85em;
    overflow: auto;
  }
  .Markup :where(a):not(:where([class~=no-markup] *)) {
    color: var(--cmm-color-link);
    text-decoration: underline;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
  }
  .Markup :where(a):not(:where([class~=no-markup] *)) code {
    color: var(--cmm-color-link);
  }
  .Markup :where(pre):has(code) {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .Markup :where(blockquote):not(:where([class~=no-markup] *)) {
    border-left: 0.2rem solid var(--cmm-color-neutral-muted);
    padding-left: 1em;
  }
  .Markup :where(ul, ol):not(:where([class~=no-markup] *)) {
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--cmm-color-font-muted);
  }
  .Markup :where(ul):not(:where([class~=no-markup] *)) {
    list-style: disc;
  }
  .Markup :where(ul[class~=contains-task-list]):not(:where([class~=no-markup] *)) {
    list-style: none;
  }
  .Markup :where(ol):not(:where([class~=no-markup] *)) {
    list-style: decimal;
  }
  .Markup :where(p):not(:where([class~=no-markup] *)) {
    line-height: 1.75;
    font-weight: var(--cmm-font-weight-normal);
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) th {
    text-align: start;
    border-top: 1px solid var(--cmm-color-border-base);
    border-bottom: 1px solid var(--cmm-color-border-base);
    background: var(--cmm-color-surface-1);
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) th:first-child {
    border-left: 1px solid var(--cmm-color-border-base);
    border-radius: var(--cmm-radius-lg) 0 0 var(--cmm-radius-lg);
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) th:last-child {
    border-right: 1px solid var(--cmm-color-border-base);
    border-radius: 0 var(--cmm-radius-lg) var(--cmm-radius-lg) 0;
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) td,
  .Markup :where(table):not(:where([class~=no-markup] *)) th {
    padding: 0.75rem;
  }
  .Markup :where(table):not(:where([class~=no-markup] *)) tr:not(:last-of-type) td {
    border-bottom: 1px solid var(--cmm-color-border-base);
  }
  .Markup :where(b, strong) {
    font-weight: var(--cmm-font-weight-bold);
  }
  .Markup :where(b, strong) a {
    font-weight: inherit;
  }
  .Markup .Message:not(:where([class~=no-markup] *)) {
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 0.94em;
  }
  .Markup .Message:not(:where([class~=no-markup] *)) p:first-child {
    margin-top: 0;
  }
  .Markup .Message:not(:where([class~=no-markup] *)) ul {
    gap: 0.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .Markup .Message--info :is(p, li) {
    color: var(--cmm-info-font);
  }
  .Markup .Message--info :is(code) {
    color: var(--cmm-color-info-font);
    --cmm-color-code-inline: var(--cmm-Message-info-bg);
    border: 1px solid var(--cmm-color-info-border);
  }
  .Markup .Message--success :is(p, li) {
    color: var(--cmm-success-font);
  }
  .Markup .Message--success :is(code) {
    color: var(--cmm-color-success-font);
    --cmm-color-code-inline: var(--cmm-Message-success-bg);
    border: 1px solid var(--cmm-color-success-border);
  }
  .Markup .Message--warn :is(p, li) {
    color: var(--cmm-warn-font);
  }
  .Markup .Message--warn :is(code) {
    color: var(--cmm-color-warn-font);
    --cmm-color-code-inline: var(--cmm-Message-warn-bg);
    border: 1px solid var(--cmm-color-warn-border);
  }
  .Markup .Message--danger :is(p, li) {
    color: var(--cmm-danger-font);
  }
  .Markup .Message--danger :is(code) {
    color: var(--cmm-color-danger-font);
    --cmm-color-code-inline: var(--cmm-Message-danger-bg);
    border: 1px solid var(--cmm-color-danger-border);
  }
}

/* dist/Menu/styles.module.scss */
@layer cmm.components {
  .Menu {
    display: inline-block;
    border: 1px solid var(--cmm-color-border-base);
    border-radius: var(--cmm-radius-md);
    padding: 0.25rem;
    min-width: 10rem;
    box-shadow: var(--cmm-shadow-lg);
    background: var(--cmm-Menu-bg);
    color: var(--cmm-color-font-base);
    font-size: var(--cmm-font-size-sm);
  }
  .Menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--cmm-radius-sm);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: var(--cmm-transition-bg);
    width: 100%;
    color: var(--cmm-Menu-font-label);
  }
  .Menu__item--active {
    background: var(--cmm-Menu-bg-hover);
  }
  .Menu__item--disabled {
    cursor: not-allowed;
    background: var(--cmm-Menu-bg);
  }
  .Menu__item > svg {
    width: var(--cmm-Menu-icon-size, 1em);
    height: var(--cmm-Menu-icon-size, 1em);
    color: var(--cmm-Menu-font-icon);
  }
  .Menu__group {
    color: var(--cmm-Menu-font-group);
    padding: 0.25rem 0.75rem;
    width: 100%;
  }
  .Menu__divider {
    border-top: 1px solid var(--cmm-color-border-base);
    margin: 0.25rem 0;
  }
}

/* dist/Message/styles.module.scss */
@layer cmm.components {
  .Message {
    display: grid;
    grid-template-columns: auto 1fr;
    place-items: center start;
    gap: 0.5rem;
    padding: 1rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--cmm-radius-lg);
    width: 100%;
  }
  .Message--info {
    color: var(--cmm-Message-info-font);
    background: var(--cmm-Message-info-bg);
    border-color: var(--cmm-Message-info-border);
  }
  .Message--success {
    color: var(--cmm-Message-success-font);
    background: var(--cmm-Message-success-bg);
    border-color: var(--cmm-Message-success-border);
  }
  .Message--warn {
    color: var(--cmm-Message-warn-font);
    background: var(--cmm-Message-warn-bg);
    border-color: var(--cmm-Message-warn-border);
  }
  .Message--danger {
    color: var(--cmm-Message-danger-font);
    background: var(--cmm-Message-danger-bg);
    border-color: var(--cmm-Message-danger-border);
  }
  .Message__title {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    font-weight: var(--cmm-font-weight-bold);
    font-size: var(--cmm-font-size-md);
  }
  .Message__title + .Message__content {
    grid-column: 1/-1;
  }
  .Message__content {
    line-height: 1.7;
    font-weight: var(--cmm-font-weight-normal);
  }
  .Message__content > :last-child {
    margin-bottom: 0;
  }
  .Message__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* dist/Radio/styles.module.scss */
@layer cmm.components {
  .Radio {
    display: flex;
    align-items: center;
    gap: 0.5em;
    position: relative;
    border-radius: var(--cmm-radius-full);
    margin: var(--cmm-Radio-margin);
  }
  @supports selector(:has(:focus-visible)) {
    .Radio:has(:focus-visible) {
      outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
      outline-offset: 2px;
    }
  }
  @supports not selector(:has(:focus-visible)) {
    .Radio:focus-within {
      outline: var(--cmm-outline-width) solid var(--cmm-outline-color-primary);
      outline-offset: 2px;
    }
  }
  .Radio > input[type=radio] {
    margin: 0;
    opacity: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    cursor: pointer;
  }
  .Radio > input[type=radio]:checked + .Radio__mark {
    background: var(--cmm-color-primary-soft-bg);
  }
  .Radio > input[type=radio]:checked + .Radio__mark::before {
    scale: 1;
    background: var(--cmm-color-primary-soft-font);
  }
  .Radio > input[type=radio]:hover:not(:disabled) + .Radio__mark {
    background: var(--cmm-color-primary-soft-bg-hover);
  }
  .Radio > input[type=radio]:disabled {
    cursor: not-allowed;
  }
  .Radio > input[type=radio]:disabled ~ .Radio__mark {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .Radio > input[type=radio]:disabled ~ label {
    cursor: not-allowed;
    opacity: 0.6;
  }
  .Radio__mark {
    width: var(--cmm-Radio-size);
    height: var(--cmm-Radio-size);
    appearance: none;
    border-radius: var(--cmm-radius-full);
    background: var(--cmm-color-primary-soft-bg);
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: var(--cmm-transition-bg);
  }
  .Radio__mark::before {
    content: "";
    width: calc(var(--cmm-Radio-size) * (1 - var(--cmm-Radio-ring-width-ratio, 0.45)));
    height: calc(var(--cmm-Radio-size) * (1 - var(--cmm-Radio-ring-width-ratio, 0.45)));
    border-radius: var(--cmm-radius-full);
    background: var(--cmm-color-primary-1);
    scale: 0;
  }
  .Radio--md,
  .Radio {
    --cmm-Radio-size: 1.25rem;
  }
  .Radio--md > label,
  .Radio > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-sm);
  }
  .Radio--sm {
    --cmm-Radio-size: 1rem;
  }
  .Radio--sm > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-sm);
  }
  .Radio--lg {
    --cmm-Radio-size: 1.5rem;
  }
  .Radio--lg > label {
    --cmm-FormFieldLabel-font-size: var(--cmm-font-size-md);
  }
}

/* dist/RadioGroup/styles.module.scss */
@layer cmm.components {
  .RadioGroup {
    display: flex;
    flex-direction: column;
  }
  .RadioGroup__items {
    display: flex;
    gap: var(--cmm-RadioGroup-item-gap, 0.75rem);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .RadioGroup--vertical .RadioGroup__items,
  .RadioGroup__items {
    flex-direction: column;
  }
  .RadioGroup--horizontal .RadioGroup__items {
    flex-direction: row;
  }
}

/* dist/Select/styles.module.scss */
@layer cmm.components {
  .Select {
    appearance: none;
    border: 1px solid var(--cmm-Input-border);
    border-radius: var(--cmm-radius-lg);
    transition: var(--cmm-transition-bg);
    font-weight: var(--cmm-font-weight-normal);
    outline-offset: 0;
    background-color: var(--cmm-Input-bg);
    background-image: var(--cmm-Select-marker, url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM3MTgwOTYiPjxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTguMjUgMTVMMTIgMTguNzUgMTUuNzUgMTVtLTcuNS02TDEyIDUuMjUgMTUuNzUgOSIgLz48L3N2Zz4=));
    background-repeat: no-repeat;
    background-size: 1em 1em;
  }
  .Select:disabled {
    color: var(--cmm-color-font-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .Select:disabled::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Select::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Select[aria-invalid=true] {
    border-color: var(--cmm-color-danger-outline-border);
    color: var(--cmm-color-danger-font);
    outline-color: var(--cmm-outline-color-danger);
  }
  .Select[aria-invalid=true]::placeholder {
    color: var(--cmm-color-danger-muted);
  }
  .Select--sm {
    font-size: var(--cmm-font-size-sm);
    height: 1.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .Select--md {
    font-size: var(--cmm-font-size-md);
    height: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .Select--lg {
    font-size: var(--cmm-font-size-md);
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .Select:not(:disabled) {
    cursor: pointer;
  }
  .Select--fill {
    width: 100%;
  }
  .Select--sm {
    height: 2rem;
    font-size: var(--cmm-font-size-sm);
    padding-left: 0.5rem;
    padding-right: calc(0.5rem + 1em);
    background-position: right 0.25rem center;
  }
  .Select--md {
    font-size: var(--cmm-font-size-md);
    height: 2.5rem;
    padding-left: 0.75rem;
    padding-right: calc(0.75rem + 1em);
    background-position: right 0.375rem center;
  }
  .Select--lg {
    font-size: var(--cmm-font-size-md);
    height: 3rem;
    padding-left: 1rem;
    padding-right: calc(1rem + 1em);
    background-position: right 0.5rem center;
  }
}

/* dist/Slider/styles.module.scss */
@layer cmm.components {
  .Slider {
    appearance: none;
    height: var(--cmm-Slider-track-height);
    border-radius: var(--cmm-Slider-track-radius, var(--cmm-radius-full));
    background: var(--cmm-color-primary-soft-bg);
    cursor: pointer;
    outline: none;
  }
  .Slider::-webkit-slider-thumb {
    width: var(--cmm-Slider-thumb-size);
    height: var(--cmm-Slider-thumb-size);
    border-radius: var(--cmm-radius-full);
    background: var(--cmm-color-white);
    border: 2px solid var(--cmm-color-primary-emphasis);
    appearance: none;
  }
  .Slider::-moz-range-thumb {
    width: var(--cmm-Slider-thumb-size);
    height: var(--cmm-Slider-thumb-size);
    border-radius: var(--cmm-radius-full);
    background: var(--cmm-color-white);
    border: 2px solid var(--cmm-color-primary-emphasis);
    appearance: none;
  }
  .Slider:focus-within::-webkit-slider-thumb {
    outline: 2px solid var(--cmm-outline-color-primary);
    outline-offset: 2px;
  }
  .Slider:focus-within::-moz-range-thumb {
    outline: 2px solid var(--cmm-outline-color-primary);
    outline-offset: 2px;
  }
  .Slider--md,
  .Slider {
    --cmm-Slider-track-height: 0.4rem;
    --cmm-Slider-thumb-size: 1rem;
  }
  .Slider--sm {
    --cmm-Slider-track-height: 0.25rem;
    --cmm-Slider-thumb-size: 0.75rem;
  }
  .Slider--lg {
    --cmm-Slider-track-height: 0.6rem;
    --cmm-Slider-thumb-size: 1.25rem;
  }
}

/* dist/Spinner/styles.module.scss */
@layer cmm.components {
  .Spinner--md,
  .Spinner {
    --cmm-Spinner-size: 1.5em;
  }
  .Spinner > svg {
    width: var(--cmm-Spinner-size);
    height: var(--cmm-Spinner-size);
    color: var(--cmm-color-primary-soft-bg);
    animation: Spinner__spin 1.2s linear infinite;
  }
  .Spinner__accent {
    color: var(--cmm-color-primary-emphasis);
  }
  .Spinner--sm {
    --cmm-Spinner-size: 1em;
  }
  .Spinner--lg {
    --cmm-Spinner-size: 2em;
  }
  @keyframes Spinner__spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}

/* dist/Switch/styles.module.scss */
@layer cmm.components {
  .Switch__input,
  .Switch__label,
  .Switch {
    width: var(--cmm-Switch-width);
    height: calc(var(--cmm-Switch-thumb-height) + var(--cmm-Switch-pad-y) * 2);
    border-radius: var(--cmm-Switch-radius, var(--cmm-radius-full));
  }
  .Switch {
    box-sizing: content-box;
    display: flex;
    border: var(--cmm-Switch-border-width, 1px) solid var(--cmm-Switch-border);
    border-radius: var(--cmm-Switch-radius, var(--cmm-radius-full));
    position: relative;
  }
  .Switch--sm {
    --cmm-Switch-width: 1.75rem;
    --cmm-Switch-thumb-width: 0.75rem;
    --cmm-Switch-thumb-height: 0.75rem;
    --cmm-Switch-pad-x: 0.1rem;
    --cmm-Switch-pad-y: 0.1rem;
    --cmm-Switch-label-pad-x: 0.4rem;
    --cmm-Switch-label-font-size: calc(var(--cmm-font-size-xs) * 0.8);
  }
  .Switch--md {
    --cmm-Switch-width: 2.25rem;
    --cmm-Switch-thumb-width: 1rem;
    --cmm-Switch-thumb-height: 1rem;
    --cmm-Switch-pad-x: 0.1rem;
    --cmm-Switch-pad-y: 0.1rem;
    --cmm-Switch-label-pad-x: 0.4rem;
    --cmm-Switch-label-font-size: calc(var(--cmm-font-size-xs) * 0.9);
  }
  .Switch--lg {
    --cmm-Switch-width: 3rem;
    --cmm-Switch-thumb-width: 1.25rem;
    --cmm-Switch-thumb-height: 1.25rem;
    --cmm-Switch-pad-x: 0.15rem;
    --cmm-Switch-pad-y: 0.15rem;
    --cmm-Switch-label-pad-x: 0.4rem;
    --cmm-Switch-label-font-size: var(--cmm-font-size-xs);
  }
  .Switch__background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--cmm-Switch-bg-off);
    border-radius: var(--cmm-Switch-radius, var(--cmm-radius-full));
    transition: var(--cmm-transition-bg);
  }
  .Switch__on,
  .Switch__off {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 50%;
    translate: 0 -50%;
    font-size: var(--cmm-Switch-label-font-size);
    font-weight: var(--cmm-font-weight-normal);
  }
  .Switch__off {
    right: var(--cmm-Switch-label-pad-x);
    color: var(--cmm-Switch-font-off);
  }
  .Switch__on {
    left: var(--cmm-Switch-label-pad-x);
    color: var(--cmm-Switch-font-on);
    display: none;
  }
  .Switch__label {
    position: absolute;
  }
  .Switch__input {
    appearance: none;
    position: absolute;
    cursor: pointer;
    z-index: 20;
  }
  .Switch__input ~ .Switch__label::after {
    position: absolute;
    content: "";
    width: var(--cmm-Switch-thumb-width);
    height: var(--cmm-Switch-thumb-height);
    top: 50%;
    left: var(--cmm-Switch-pad-x);
    translate: 0 -50%;
    background: var(--cmm-Switch-bg-thumb);
    border: var(--cmm-Switch-border-width, 1px) solid var(--cmm-Switch-border-thumb);
    border-radius: var(--cmm-Switch-radius, var(--cmm-radius-full));
    transition: left 0.3s;
    z-index: 10;
  }
  .Switch__input:checked ~ .Switch__label::after {
    left: calc(100% - var(--cmm-Switch-thumb-width) - var(--cmm-Switch-pad-x));
  }
  .Switch__input:checked ~ .Switch__background {
    background: var(--cmm-Switch-bg-on);
  }
  .Switch__input:checked ~ .Switch__off {
    display: none;
  }
  .Switch__input:checked ~ .Switch__on {
    display: flex;
  }
}

/* dist/Tab/styles.module.scss */
@layer cmm.components {
  .Tab__group {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .Tab {
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 0.5rem;
    line-height: 2.5;
    color: var(--cmm-Tab-font);
    border-bottom: solid 2px var(--cmm-Tab-border);
    margin-bottom: -2px;
    transition:
      var(--cmm-transition-bg),
      color 0.3s,
      border 0.3s;
  }
  .Tab:hover:not(.Tab--active) {
    border-color: var(--cmm-Tab-border-hover);
    border-color: var(--cmm-Tab-bg-hover);
    color: var(--cmm-Tab-font-hover);
  }
  .Tab:focus-visible {
    outline-color: var(--cmm-outline-color-primary);
    outline-offset: var(--cmm-outline-offset);
  }
  .Tab--active {
    border-color: var(--cmm-Tab-border-active);
    background: var(--cmm-Tab-bg-active);
    color: var(--cmm-Tab-font-active);
  }
  .Tab__list {
    display: flex;
    gap: 0.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--cmm-Tab-border);
    background: var(--cmm-Tab-list-bg);
  }
  .Tab__panel {
    margin-top: 1rem;
  }
}

/* dist/Table/styles.module.scss */
.Table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.Table th {
  text-align: start;
  border-top: 1px solid var(--cmm-color-border-base);
  border-bottom: 1px solid var(--cmm-color-border-base);
  background: var(--cmm-color-surface-1);
  font-size: var(--cmm-font-size-sm);
}
.Table th:first-child {
  border-left: 1px solid var(--cmm-color-border-base);
  border-radius: var(--cmm-radius-lg) 0 0 var(--cmm-radius-lg);
}
.Table th:last-child {
  border-right: 1px solid var(--cmm-color-border-base);
  border-radius: 0 var(--cmm-radius-lg) var(--cmm-radius-lg) 0;
}
.Table th:first-child:last-child {
  border: 1px solid var(--cmm-color-border-base);
  border-radius: var(--cmm-radius-lg);
}
.Table td,
.Table th {
  padding: 0.75rem;
}
.Table tr:not(:last-of-type) td {
  border-bottom: 1px solid var(--cmm-color-border-base);
}

/* dist/Tag/styles.module.scss */
@layer cmm.components {
  .Tag--md,
  .Tag {
    padding: 0 0.5rem;
    height: 1.5rem;
    font-size: var(--cmm-font-size-sm);
  }
  .Tag {
    white-space: nowrap;
    border-radius: var(--cmm-radius-full);
    column-gap: 0.5rem;
    font-weight: var(--cmm-font-weight-semibold);
    display: inline-flex;
    align-items: center;
  }
  .Tag > svg {
    width: var(--cmm-Tag-icon-size, 1em);
    height: var(--cmm-Tag-icon-size, 1em);
    margin: var(--cmm-Tag-icon-margin);
  }
  .Tag--solid.Tag--primary {
    background: var(--cmm-color-primary-solid-bg);
    color: var(--cmm-color-primary-solid-font);
    border-color: var(--cmm-color-primary-solid-border);
  }
  .Tag--solid.Tag--neutral {
    background: var(--cmm-color-neutral-solid-bg);
    color: var(--cmm-color-neutral-solid-font);
    border-color: var(--cmm-color-neutral-solid-border);
  }
  .Tag--solid.Tag--info {
    background: var(--cmm-color-info-solid-bg);
    color: var(--cmm-color-info-solid-font);
    border-color: var(--cmm-color-info-solid-border);
  }
  .Tag--solid.Tag--success {
    background: var(--cmm-color-success-solid-bg);
    color: var(--cmm-color-success-solid-font);
    border-color: var(--cmm-color-success-solid-border);
  }
  .Tag--solid.Tag--warn {
    background: var(--cmm-color-warn-solid-bg);
    color: var(--cmm-color-warn-solid-font);
    border-color: var(--cmm-color-warn-solid-border);
  }
  .Tag--solid.Tag--danger {
    background: var(--cmm-color-danger-solid-bg);
    color: var(--cmm-color-danger-solid-font);
    border-color: var(--cmm-color-danger-solid-border);
  }
  .Tag--soft.Tag--primary {
    background: var(--cmm-color-primary-soft-bg);
    color: var(--cmm-color-primary-soft-font);
    border-color: var(--cmm-color-primary-soft-border);
  }
  .Tag--soft.Tag--neutral {
    background: var(--cmm-color-neutral-soft-bg);
    color: var(--cmm-color-neutral-soft-font);
    border-color: var(--cmm-color-neutral-soft-border);
  }
  .Tag--soft.Tag--info {
    background: var(--cmm-color-info-soft-bg);
    color: var(--cmm-color-info-soft-font);
    border-color: var(--cmm-color-info-soft-border);
  }
  .Tag--soft.Tag--success {
    background: var(--cmm-color-success-soft-bg);
    color: var(--cmm-color-success-soft-font);
    border-color: var(--cmm-color-success-soft-border);
  }
  .Tag--soft.Tag--warn {
    background: var(--cmm-color-warn-soft-bg);
    color: var(--cmm-color-warn-soft-font);
    border-color: var(--cmm-color-warn-soft-border);
  }
  .Tag--soft.Tag--danger {
    background: var(--cmm-color-danger-soft-bg);
    color: var(--cmm-color-danger-soft-font);
    border-color: var(--cmm-color-danger-soft-border);
  }
  .Tag--outline.Tag--primary {
    background: var(--cmm-color-primary-outline-bg);
    color: var(--cmm-color-primary-outline-font);
    border-color: var(--cmm-color-primary-outline-border);
  }
  .Tag--outline.Tag--neutral {
    background: var(--cmm-color-neutral-outline-bg);
    color: var(--cmm-color-neutral-outline-font);
    border-color: var(--cmm-color-neutral-outline-border);
  }
  .Tag--outline.Tag--info {
    background: var(--cmm-color-info-outline-bg);
    color: var(--cmm-color-info-outline-font);
    border-color: var(--cmm-color-info-outline-border);
  }
  .Tag--outline.Tag--success {
    background: var(--cmm-color-success-outline-bg);
    color: var(--cmm-color-success-outline-font);
    border-color: var(--cmm-color-success-outline-border);
  }
  .Tag--outline.Tag--warn {
    background: var(--cmm-color-warn-outline-bg);
    color: var(--cmm-color-warn-outline-font);
    border-color: var(--cmm-color-warn-outline-border);
  }
  .Tag--outline.Tag--danger {
    background: var(--cmm-color-danger-outline-bg);
    color: var(--cmm-color-danger-outline-font);
    border-color: var(--cmm-color-danger-outline-border);
  }
  .Tag--ghost.Tag--primary {
    background: var(--cmm-color-primary-ghost-bg);
    color: var(--cmm-color-primary-ghost-font);
    border-color: var(--cmm-color-primary-ghost-border);
  }
  .Tag--ghost.Tag--neutral {
    background: var(--cmm-color-neutral-ghost-bg);
    color: var(--cmm-color-neutral-ghost-font);
    border-color: var(--cmm-color-neutral-ghost-border);
  }
  .Tag--ghost.Tag--info {
    background: var(--cmm-color-info-ghost-bg);
    color: var(--cmm-color-info-ghost-font);
    border-color: var(--cmm-color-info-ghost-border);
  }
  .Tag--ghost.Tag--success {
    background: var(--cmm-color-success-ghost-bg);
    color: var(--cmm-color-success-ghost-font);
    border-color: var(--cmm-color-success-ghost-border);
  }
  .Tag--ghost.Tag--warn {
    background: var(--cmm-color-warn-ghost-bg);
    color: var(--cmm-color-warn-ghost-font);
    border-color: var(--cmm-color-warn-ghost-border);
  }
  .Tag--ghost.Tag--danger {
    background: var(--cmm-color-danger-ghost-bg);
    color: var(--cmm-color-danger-ghost-font);
    border-color: var(--cmm-color-danger-ghost-border);
  }
  .Tag--outline {
    border-width: 1px;
    border-style: solid;
  }
  .Tag--sm {
    padding: 0 0.5rem;
    height: 1.25rem;
    font-size: var(--cmm-font-size-xs);
  }
  .Tag--lg {
    padding: 0 0.75rem;
    height: 1.75rem;
    font-size: var(--cmm-font-size-md);
  }
}

/* dist/Textarea/styles.module.scss */
@layer cmm.components {
  .Textarea {
    appearance: none;
    border: 1px solid var(--cmm-Input-border);
    border-radius: var(--cmm-radius-lg);
    transition: var(--cmm-transition-bg);
    font-weight: var(--cmm-font-weight-normal);
    outline-offset: 0;
    background-color: var(--cmm-Input-bg);
    width: var(--cmm-Textarea-width);
    padding: 0.75rem;
    resize: none;
  }
  .Textarea:disabled {
    color: var(--cmm-color-font-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }
  .Textarea:disabled::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Textarea::placeholder {
    color: var(--cmm-color-font-subtle);
  }
  .Textarea[aria-invalid=true] {
    border-color: var(--cmm-color-danger-outline-border);
    color: var(--cmm-color-danger-font);
    outline-color: var(--cmm-outline-color-danger);
  }
  .Textarea[aria-invalid=true]::placeholder {
    color: var(--cmm-color-danger-muted);
  }
  .Textarea--fill {
    --cmm-Textarea-width: 100%;
  }
}

/* dist/Tooltip/styles.module.scss */
@layer cmm.components {
  .Tooltip__target {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
  }
  .Tooltip__target:hover .Tooltip__content {
    opacity: 1;
    visibility: visible;
  }
  @supports selector(:has(:focus-visible)) {
    .Tooltip__target:has(:focus-visible) .Tooltip__content {
      opacity: 1;
      visibility: visible;
    }
  }
  @supports not selector(:has(:focus-visible)) {
    .Tooltip__target:focus-within .Tooltip__content {
      opacity: 1;
      visibility: visible;
    }
  }
  .Tooltip__content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    font-size: var(--cmm-font-size-xs);
    font-weight: var(--cmm-font-weight-normal);
    line-height: 1;
    background: var(--cmm-Tooltip-bg);
    color: var(--cmm-Tooltip-font);
    border: 1px solid var(--cmm-Tooltip-border);
    border-radius: var(--cmm-radius-md);
    transition: 0.2s ease-in;
    transition-delay: 0.15s;
    display: inline-block;
    padding: 0.5rem;
  }
  .Tooltip__content::before {
    content: "";
    position: absolute;
    border: var(--cmm-Tooltip-arrow-size, 6px) solid transparent;
  }
  .Tooltip__content[data-placement=top] {
    left: 50%;
    translate: -50% calc((var(--cmm-Tooltip-offset, 0.2rem) + var(--cmm-Tooltip-arrow-size, 6px)) * -1);
    bottom: 100%;
  }
  .Tooltip__content[data-placement=top]:before {
    bottom: calc(var(--cmm-Tooltip-arrow-size, 6px) * 2 * -1 + 1px);
    left: 50%;
    translate: calc(var(--cmm-Tooltip-arrow-size, 6px) * -1);
    border-top: var(--cmm-Tooltip-arrow-size, 6px) solid var(--cmm-Tooltip-bg);
  }
  .Tooltip__content[data-placement=right] {
    translate: calc(var(--cmm-Tooltip-offset, 0.2rem) + var(--cmm-Tooltip-arrow-size, 6px)) -50%;
    top: 50%;
    left: 100%;
  }
  .Tooltip__content[data-placement=right]:before {
    top: 50%;
    left: calc(var(--cmm-Tooltip-arrow-size, 6px) * 2 * -1 + 1px);
    translate: 0 -50%;
    border-right: var(--cmm-Tooltip-arrow-size, 6px) solid var(--cmm-Tooltip-bg);
  }
  .Tooltip__content[data-placement=bottom] {
    left: 50%;
    translate: -50% calc(var(--cmm-Tooltip-offset, 0.2rem) + var(--cmm-Tooltip-arrow-size, 6px));
    top: 100%;
  }
  .Tooltip__content[data-placement=bottom]:before {
    top: calc(var(--cmm-Tooltip-arrow-size, 6px) * 2 * -1 + 1px);
    left: 50%;
    translate: calc(var(--cmm-Tooltip-arrow-size, 6px) * -1);
    border-bottom: var(--cmm-Tooltip-arrow-size, 6px) solid var(--cmm-Tooltip-bg);
  }
  .Tooltip__content[data-placement=left] {
    translate: calc((var(--cmm-Tooltip-offset, 0.2rem) + var(--cmm-Tooltip-arrow-size, 6px)) * -1) -50%;
    top: 50%;
    right: 100%;
  }
  .Tooltip__content[data-placement=left]:before {
    top: 50%;
    right: calc(var(--cmm-Tooltip-arrow-size, 6px) * 2 * -1 + 1px);
    translate: 0 -50%;
    border-left: var(--cmm-Tooltip-arrow-size, 6px) solid var(--cmm-Tooltip-bg);
  }
}