.cnvs-button {
  box-sizing: border-box;
  font-family: "Roboto","Helvetica Neue","Helvetica",Arial,sans-serif;
  font-size: 0.875rem;
  line-height: normal;
  letter-spacing: 0.015rem;
  font-weight: var(--cnvs-sys-font-weight-bold);
  background-color: var(--cnvs-button-color-prop-default-background, var(--cnvs-button-background, transparent));
  color: var(--cnvs-button-color-prop-default-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
  border-width: 0.0625rem;
  border-style: solid;
  gap: var(--cnvs-sys-space-x2);
  border-color: var(--cnvs-button-color-prop-default-border, var(--cnvs-button-border, transparent));
  cursor: pointer;
  display: inline-flex;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  outline: 0.125rem transparent;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: var(--cnvs-button-color-prop-default-border-radius, var(--cnvs-button-border-radius, var(--cnvs-sys-shape-round)));
  position: relative;
  vertical-align: middle;
  overflow: hidden;
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
  transition: box-shadow 120ms linear,border 120ms linear,background-color 120ms linear,color 120ms linear;
}

.cnvs-button:disabled, .cnvs-button:disabled:active, .cnvs-button.disabled {
  cursor: default;
  box-shadow: none;
  opacity: var(--cnvs-button-color-prop-default-opacity, var(--cnvs-button-opacity, var(--cnvs-sys-opacity-full)));
}

.cnvs-button:focus-visible, .cnvs-button.focus {
  background-color: var(--cnvs-button-color-prop-focus-background, var(--cnvs-button-background, transparent));
  border-color: var(--cnvs-button-color-prop-focus-border, var(--cnvs-button-border, transparent));
  color: var(--cnvs-button-color-prop-focus-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 2px var(--cnvs-button-color-prop-focus-box-shadow-inner, var(--cnvs-button-box-shadow-inner, var(--cnvs-sys-color-border-inverse))),0 0 0 4px var(--cnvs-button-color-prop-focus-box-shadow-outer, var(--cnvs-button-box-shadow-outer, var(--cnvs-brand-common-focus-outline)));
}

.cnvs-button:hover, .cnvs-button.hover {
  background-color: var(--cnvs-button-color-prop-hover-background, var(--cnvs-button-background, var(--cnvs-sys-color-bg-contrast-strong)));
  border-color: var(--cnvs-button-color-prop-hover-border, var(--cnvs-button-border, transparent));
  color: var(--cnvs-button-color-prop-hover-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-stronger)));
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-stronger));
}

.cnvs-button:hover:active {
  transition-duration: 40ms;
}

.cnvs-button:active, .cnvs-button.active {
  background-color: var(--cnvs-button-color-prop-active-background, var(--cnvs-button-background, transparent));
  border-color: var(--cnvs-button-color-prop-active-border, var(--cnvs-button-border, transparent));
  color: var(--cnvs-button-color-prop-active-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
}

.cnvs-button:disabled, .cnvs-button.disabled {
  background-color: var(--cnvs-button-color-prop-disabled-background, var(--cnvs-button-background, transparent));
  border-color: var(--cnvs-button-color-prop-disabled-border, var(--cnvs-button-border, transparent));
  color: var(--cnvs-button-color-prop-disabled-label, var(--cnvs-button-label, var(--cnvs-sys-color-fg-strong)));
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
}

@media (prefers-contrast: more) {
.cnvs-button[aria-pressed="true"] {
  outline: 0.125rem solid transparent;
  outline-offset: -0.0625rem;
}

.cnvs-button[aria-pressed="true"]:focus-visible, .cnvs-button[aria-pressed="true"].focus {
  outline: 0.25rem double transparent;
  outline-offset: 0;
}


}

.cnvs-button svg {
  pointer-events: none;
}


.cnvs-button.size-large {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-body-small);
  font-size: var(--cnvs-sys-font-size-body-small);
  letter-spacing: var(--cnvs-base-letter-spacing-200);
  height: 3rem;
  padding-inline: var(--cnvs-sys-space-x8);
  min-width: 7rem;
}


.cnvs-button.size-medium {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
  min-width: 6rem;
  padding-inline: var(--cnvs-sys-space-x6);
  height: var(--cnvs-sys-space-x10);
}


.cnvs-button.size-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-subtext-large);
  font-size: var(--cnvs-sys-font-size-subtext-large);
  letter-spacing: var(--cnvs-base-letter-spacing-150);
  height: var(--cnvs-sys-space-x8);
  min-width: var(--cnvs-sys-space-x20);
  padding-inline: var(--cnvs-sys-space-x4);
  gap: var(--cnvs-sys-space-x1);
}


.cnvs-button.size-extra-small {
  font-family: var(--cnvs-sys-font-family-default);
  font-weight: var(--cnvs-sys-font-weight-bold);
  line-height: var(--cnvs-sys-line-height-subtext-medium);
  font-size: var(--cnvs-sys-font-size-subtext-medium);
  letter-spacing: var(--cnvs-base-letter-spacing-100);
  height: var(--cnvs-sys-space-x6);
  min-width: auto;
  padding-inline: var(--cnvs-sys-space-x3);
  gap: var(--cnvs-sys-space-x1);
}


.cnvs-button.grow {
  width: 100%;
  max-width: 100%;
}


.cnvs-button.icon-position-only {
  padding: var(--cnvs-sys-space-zero);
}




.cnvs-button.size-large.icon-position-only {
  min-width: calc(var(--cnvs-sys-space-x4) * 3);
}


.cnvs-button.size-large.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x6);
  padding-inline-end: var(--cnvs-sys-space-x8);
}


.cnvs-button.size-large.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x8);
  padding-inline-end: var(--cnvs-sys-space-x6);
}


.cnvs-button.size-medium.icon-position-only {
  min-width: var(--cnvs-sys-space-x10);
}


.cnvs-button.size-medium.icon-position-start {
  padding-inline-start: calc(var(--cnvs-sys-space-x1) * 5);
  padding-inline-end: var(--cnvs-sys-space-x6);
}


.cnvs-button.size-medium.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x6);
  padding-inline-end: calc(var(--cnvs-sys-space-x1) * 5);
}


.cnvs-button.size-small.icon-position-only {
  min-width: var(--cnvs-sys-space-x8);
}


.cnvs-button.size-small.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x3);
  padding-inline-end: var(--cnvs-sys-space-x4);
}


.cnvs-button.size-small.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x4);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-button.size-extraSmall.icon-position-only {
  min-width: var(--cnvs-sys-space-x6);
}


.cnvs-button.size-extraSmall.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-button.size-extraSmall.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x3);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-tertiary-button {
  box-sizing: border-box;
  padding-inline: var(--cnvs-sys-space-x2);
  min-width: auto;
  border-width: 0.125rem;
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-button-label: var(--cnvs-brand-primary-base);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-tertiary-button:focus-visible, .cnvs-tertiary-button.focus {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-button-label: var(--cnvs-brand-primary-base);
  --cnvs-system-icon-color: currentColor;
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 2px var(--cnvs-brand-common-focus-outline);
}

.cnvs-tertiary-button:hover, .cnvs-tertiary-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-soft);
  --cnvs-button-label: var(--cnvs-brand-primary-dark);
  --cnvs-system-icon-color: currentColor;
  text-decoration: underline;
}

.cnvs-tertiary-button:active, .cnvs-tertiary-button.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-button-label: var(--cnvs-brand-primary-darkest);
  --cnvs-system-icon-color: currentColor;
  text-decoration: underline;
}

.cnvs-tertiary-button:disabled, .cnvs-tertiary-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-button-label: var(--cnvs-brand-primary-base);
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-tertiary-button.icon-position-only {
  padding: 0;
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-sys-color-fg-strong));
}

.cnvs-tertiary-button.icon-position-only:focus-visible, .cnvs-tertiary-button.icon-position-only.focus {
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-sys-color-fg-strong));
}

.cnvs-tertiary-button.icon-position-only:hover, .cnvs-tertiary-button.icon-position-only.hover {
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-sys-color-fg-strong));
}

.cnvs-tertiary-button.icon-position-only:active, .cnvs-tertiary-button.icon-position-only.active {
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-sys-color-fg-strong));
}

.cnvs-tertiary-button.icon-position-only:disabled, .cnvs-tertiary-button.icon-position-only.disabled {
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-sys-color-fg-strong));
}




.cnvs-tertiary-button.variant-inverse {
  --cnvs-button-background: transparent;
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-tertiary-button.variant-inverse:focus-visible, .cnvs-tertiary-button.variant-inverse.focus {
  --cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-sys-color-border-inverse);
}

.cnvs-tertiary-button.variant-inverse:hover, .cnvs-tertiary-button.variant-inverse.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-tertiary-button.variant-inverse:active, .cnvs-tertiary-button.variant-inverse.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-tertiary-button.variant-inverse:disabled, .cnvs-tertiary-button.variant-inverse.disabled {
  --cnvs-button-background: transparent;
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-tertiary-button.size-large.icon-position-only {
  min-width: calc(var(--cnvs-sys-space-x4) * 3);
}


.cnvs-tertiary-button.size-large.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-tertiary-button.size-large.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x3);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-tertiary-button.size-medium.icon-position-only {
  min-width: var(--cnvs-sys-space-x10);
}


.cnvs-tertiary-button.size-medium.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-tertiary-button.size-medium.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x3);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-tertiary-button.size-small.icon-position-only {
  min-width: var(--cnvs-sys-space-x8);
}


.cnvs-tertiary-button.size-small.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x3);
}


.cnvs-tertiary-button.size-small.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x3);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-tertiary-button.size-extraSmall.icon-position-only {
  min-width: var(--cnvs-sys-space-x6);
}


.cnvs-tertiary-button.size-extraSmall.icon-position-start {
  padding-inline-start: var(--cnvs-sys-space-x1);
  padding-inline-end: var(--cnvs-sys-space-x2);
}


.cnvs-tertiary-button.size-extraSmall.icon-position-end {
  padding-inline-start: var(--cnvs-sys-space-x2);
  padding-inline-end: var(--cnvs-sys-space-x1);
}


.cnvs-toolbar-icon-button {
  box-sizing: border-box;
  min-width: var(--cnvs-sys-space-x8);
  padding: var(--cnvs-sys-space-zero);
  height: var(--cnvs-sys-space-x8);
  --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
}

.cnvs-toolbar-icon-button:focus-visible, .cnvs-toolbar-icon-button.focus {
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
}

.cnvs-toolbar-icon-button:hover, .cnvs-toolbar-icon-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
}

.cnvs-toolbar-icon-button:active, .cnvs-toolbar-icon-button.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
}

.cnvs-toolbar-icon-button:disabled, .cnvs-toolbar-icon-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
}

.cnvs-toolbar-icon-button[aria-pressed='true'] {
  --cnvs-system-icon-color: var(--cnvs-brand-primary-base);
  --cnvs-button-background: var(--cnvs-brand-primary-lightest);
}

.cnvs-toolbar-icon-button[aria-pressed='true']:hover, .cnvs-toolbar-icon-button[aria-pressed='true'].hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
}

.cnvs-toolbar-icon-button[aria-pressed='true']:active, .cnvs-toolbar-icon-button[aria-pressed='true'].active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
  --cnvs-system-icon-color: var(--cnvs-brand-primary-dark);
}

.cnvs-toolbar-icon-button[aria-pressed='true']:disabled, .cnvs-toolbar-icon-button[aria-pressed='true'].disabled {
  --cnvs-button-background: var(--cnvs-brand-primary-lightest);
  --cnvs-system-icon-color: var(--cnvs-brand-primary-light);
}


.cnvs-toolbar-dropdown-button {
  box-sizing: border-box;
  padding: var(--cnvs-sys-space-zero);
  min-width: var(--cnvs-sys-space-x8);
  gap: var(--cnvs-sys-space-zero);
  --cnvs-button-border-radius: var(--cnvs-sys-shape-x1);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
}

.cnvs-toolbar-dropdown-button:focus-visible, .cnvs-toolbar-dropdown-button.focus {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-soft);
  box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-transparent),0 0 0 2px var(--cnvs-brand-common-focus-outline);
}

.cnvs-toolbar-dropdown-button:hover, .cnvs-toolbar-dropdown-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
}

.cnvs-toolbar-dropdown-button:active, .cnvs-toolbar-dropdown-button.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-stronger);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-muted-stronger);
}

.cnvs-toolbar-dropdown-button:disabled, .cnvs-toolbar-dropdown-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
}

.cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-custom-icon"] {
  margin-inline-start: var(--cnvs-sys-space-x1);
  margin-inline-end: calc(0.125rem * -1);
}

.cnvs-toolbar-dropdown-button [data-part="toolbar-dropdown-btn-arrow"] {
  margin: 0;
  margin-inline-end: 0.125rem;
}


.cnvs-toolbar-dropdown-button.should-mirror-icon [data-part="toolbar-dropdown-btn-custom-icon"] {
  margin-inline-end: 0;
  margin-inline-start: 0.125rem;
}


.cnvs-toolbar-dropdown-button.should-mirror-icon-in-r-t-l:dir(rtl) [data-part="toolbar-dropdown-btn-custom-icon"] {
  margin-inline-end: 0;
  margin-inline-start: 0.125rem;
}


.cnvs-hyperlink {
  box-sizing: border-box;
  font-family: var(--cnvs-sys-font-family-default);
  text-decoration: underline;
  color: var(--cnvs-sys-color-text-primary-default);
  cursor: pointer;
  border-radius: var(--cnvs-sys-shape-half);
  padding: 0 0.125rem;
  margin: 0 -2px;
  transition: color 0.15s,background-color 0.15s;
  word-break: break-word;
}

.cnvs-hyperlink:hover, .cnvs-hyperlink.hover {
  color: var(--cnvs-sys-color-text-primary-strong);
  background: var(--cnvs-sys-color-bg-alt-soft);
}

.cnvs-hyperlink:focus, .cnvs-hyperlink.focus, .cnvs-hyperlink:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--cnvs-brand-common-focus-outline);
  outline: none;
}

.cnvs-hyperlink:active, .cnvs-hyperlink.active {
  color: var(--cnvs-sys-color-text-primary-stronger);
  background: var(--cnvs-sys-color-bg-alt-default);
}


.cnvs-hyperlink.variant-inverse {
  color: var(--cnvs-sys-color-text-inverse);
}

.cnvs-hyperlink.variant-inverse:hover, .cnvs-hyperlink.variant-inverse.hover {
  color: var(--cnvs-sys-color-text-inverse);
  background: rgba(255, 255, 255, 0.1);
}

.cnvs-hyperlink.variant-inverse:focus, .cnvs-hyperlink.variant-inverse.focus, .cnvs-hyperlink.variant-inverse:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);
}

.cnvs-hyperlink.variant-inverse:active, .cnvs-hyperlink.variant-inverse.active {
  color: var(--cnvs-sys-color-text-primary-stronger);
  background: var(--cnvs-sys-color-bg-alt-soft);
}


.cnvs-hyperlink.variant-standalone {
  text-decoration: none;
}


.cnvs-hyperlink.variant-standalone-inverse {
  text-decoration: none;
  color: var(--cnvs-sys-color-text-inverse);
}

.cnvs-hyperlink.variant-standalone-inverse:hover, .cnvs-hyperlink.variant-standalone-inverse.hover {
  color: var(--cnvs-sys-color-text-inverse);
  background: rgba(255, 255, 255, 0.1);
}

.cnvs-hyperlink.variant-standalone-inverse:focus, .cnvs-hyperlink.variant-standalone-inverse.focus, .cnvs-hyperlink.variant-standalone-inverse:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-text-inverse);
}

.cnvs-hyperlink.variant-standalone-inverse:active, .cnvs-hyperlink.variant-standalone-inverse.active {
  color: var(--cnvs-sys-color-text-primary-stronger);
  background: var(--cnvs-sys-color-bg-alt-soft);
}


.cnvs-external-hyperlink {
  box-sizing: border-box;
}

.cnvs-external-hyperlink [data-part="external-hyperlink-icon"] {
  vertical-align: text-top;
  --cnvs-system-icon-color: currentColor;
  --cnvs-svg-size: 1em;
  width: calc(1em - 0.0625rem);
  min-width: calc(var(--cnvs-sys-space-x4) - 0.0625rem);
  margin-inline-start: calc(var(--cnvs-sys-space-x1) - 0.125rem);
}

.cnvs-external-hyperlink [data-part="external-hyperlink-icon"]>svg {
  min-width: var(--cnvs-sys-space-x4);
  min-height: var(--cnvs-sys-space-x4);
}

.cnvs-external-hyperlink [data-part="external-hyperlink-icon"] :dir(rtl) {
  transform: rotate(270deg);
}


.cnvs-primary-button {
  box-sizing: border-box;
  --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button:focus-visible, .cnvs-primary-button.focus {
  --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button:hover, .cnvs-primary-button.hover {
  --cnvs-button-background: var(--cnvs-brand-action-dark, var(--cnvs-brand-primary-dark));
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button:active, .cnvs-primary-button.active {
  --cnvs-button-background: var(--cnvs-brand-action-darkest, var(--cnvs-brand-primary-darkest));
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button:disabled, .cnvs-primary-button.disabled {
  --cnvs-button-background: var(--cnvs-brand-action-base, var(--cnvs-brand-primary-base));
  --cnvs-button-label: var(--cnvs-brand-action-accent, var(--cnvs-brand-primary-accent));
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-primary-button.variant-inverse {
  --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button.variant-inverse:focus-visible, .cnvs-primary-button.variant-inverse.focus {
  --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button.variant-inverse:hover, .cnvs-primary-button.variant-inverse.hover {
  --cnvs-button-background: var(--cnvs-brand-action-lighter, var(--cnvs-brand-primary-lightest));
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button.variant-inverse:active, .cnvs-primary-button.variant-inverse.active {
  --cnvs-button-background: var(--cnvs-brand-action-light, var(--cnvs-brand-primary-light));
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-primary-button.variant-inverse:disabled, .cnvs-primary-button.variant-inverse.disabled {
  --cnvs-button-background: var(--cnvs-brand-action-lightest, var(--cnvs-brand-primary-lightest));
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-secondary-button {
  box-sizing: border-box;
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
  --cnvs-button-border: var(--cnvs-sys-color-border-input-default);
  --cnvs-button-label: var(--cnvs-sys-color-fg-strong);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button:focus-visible, .cnvs-secondary-button.focus {
  --cnvs-button-background: var(--cnvs-sys-color-bg-default);
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button:hover, .cnvs-secondary-button.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-default);
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button:active, .cnvs-secondary-button.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-alt-strong);
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-button-border: var(--cnvs-sys-color-border-input-strong);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button:disabled, .cnvs-secondary-button.disabled {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-default);
  --cnvs-button-label: var(--cnvs-sys-color-fg-stronger);
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-secondary-button.variant-inverse {
  --cnvs-button-background: transparent;
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button.variant-inverse:hover, .cnvs-secondary-button.variant-inverse.hover {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-strong);
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button.variant-inverse:focus-visible, .cnvs-secondary-button.variant-inverse.focus {
  --cnvs-button-background: var(--cnvs-sys-color-bg-translucent);
  --cnvs-button-border: transparent;
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-contrast-default);
  --cnvs-button-box-shadow-outer: var(--cnvs-sys-color-border-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button.variant-inverse:active, .cnvs-secondary-button.variant-inverse.active {
  --cnvs-button-background: var(--cnvs-sys-color-bg-transparent-stronger);
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}

.cnvs-secondary-button.variant-inverse:disabled, .cnvs-secondary-button.variant-inverse.disabled {
  --cnvs-button-background: transparent;
  --cnvs-button-border: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-label: var(--cnvs-sys-color-fg-inverse);
  --cnvs-system-icon-color: currentColor;
}


.cnvs-delete-button {
  box-sizing: border-box;
  --cnvs-button-background: var(--cnvs-brand-error-base);
  --cnvs-button-border-radius: var(--cnvs-sys-shape-round);
  --cnvs-button-label: var(--cnvs-brand-error-accent);
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-default-icon, var(--cnvs-brand-error-accent));
}

.cnvs-delete-button:focus-visible, .cnvs-delete-button.focus {
  --cnvs-button-background: var(--cnvs-brand-error-base);
  --cnvs-button-label: var(--cnvs-brand-error-accent);
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-focus-icon, var(--cnvs-brand-error-accent));
  --cnvs-button-box-shadow-inner: var(--cnvs-sys-color-border-inverse);
  --cnvs-button-box-shadow-outer: var(--cnvs-brand-common-focus-outline);
}

.cnvs-delete-button:hover, .cnvs-delete-button.hover {
  --cnvs-button-background: var(--cnvs-brand-error-dark);
  --cnvs-button-label: var(--cnvs-brand-error-accent);
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-hover-icon, var(--cnvs-brand-error-accent));
}

.cnvs-delete-button:active, .cnvs-delete-button.active {
  --cnvs-button-background: var(--cnvs-brand-error-darkest);
  --cnvs-button-label: var(--cnvs-brand-error-accent);
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-active-icon, var(--cnvs-brand-error-accent));
}

.cnvs-delete-button:disabled, .cnvs-delete-button.disabled {
  --cnvs-button-background: var(--cnvs-brand-error-base);
  --cnvs-button-label: var(--cnvs-brand-error-accent);
  --cnvs-system-icon-color: var(--cnvs-button-color-prop-disabled-icon, var(--cnvs-brand-error-accent));
  --cnvs-button-opacity: var(--cnvs-sys-opacity-disabled);
}