.bricks-button.specto-btn {
  --specto-btn-bg: transparent;
  --specto-btn-fg: currentColor;
  --specto-btn-icon-color: currentColor;
  --specto-btn-border: transparent;
  --specto-btn-border-width: 0;
  --specto-btn-after-bg: transparent;
  --specto-btn-after-fg: currentColor;
  --specto-btn-after-icon-color: currentColor;
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--specto-btn-after-fg, currentColor);
  --specto-btn-overlay-opacity: 0;
  --specto-ui-radius-full: var(--su-radius-unit-full-round, 999px);
  --su-btn-radius-all: var(--specto-ui-button-radius, var(--su-shape-btn-default-m, var(--su-radius-full)));
  --specto-btn-radius-all: var(--su-btn-radius-all);
  --specto-btn-radius-tl: var(--su-btn-radius-tl, var(--specto-btn-radius-all));
  --specto-btn-radius-tr: var(--su-btn-radius-tr, var(--specto-btn-radius-all));
  --specto-btn-radius-br: var(--su-btn-radius-br, var(--specto-btn-radius-all));
  --specto-btn-radius-bl: var(--su-btn-radius-bl, var(--specto-btn-radius-all));
  --specto-btn-shadow: none;
  --specto-btn-height: var(--su-size-unit-m, 40px);
  --specto-btn-padding-inline: var(--su-space-unit-xl, 16px);
  --specto-btn-gap: var(--su-space-unit-m, 8px);
  --specto-btn-font-size: var(--su-font-size-label-m, 14px);
  --specto-btn-icon-size: var(--su-size-unit-xs, 24px);
  --specto-btn-ripple-color: currentColor;
  --specto-btn-ripple-opacity: 0.16;

  position: relative;
  box-sizing: border-box;
  height: var(--specto-btn-height);
  min-height: var(--specto-btn-height);
  padding-block: 0 !important;
  padding-inline: var(--specto-btn-padding-inline) !important;
  gap: 0 !important;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  border-radius:
    var(--specto-btn-radius-tl)
    var(--specto-btn-radius-tr)
    var(--specto-btn-radius-br)
    var(--specto-btn-radius-bl);
  background: transparent !important;
  box-shadow: var(--specto-btn-shadow) !important;
  color: var(--specto-btn-after-fg) !important;
  cursor: pointer;
  font-family: var(--su-font-family-label, inherit);
  font-size: var(--specto-btn-font-size) !important;
  font-weight: var(--su-font-weight-bold, 500);
  line-height: normal;
  letter-spacing: -0.04em;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    transform 80ms ease;
}

.bricks-button.specto-btn::before,
.bricks-button.specto-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 80ms ease;
}

.bricks-button.specto-btn::after {
  z-index: 0;
  background: var(--specto-btn-after-bg);
  border: var(--specto-btn-border-width) solid var(--specto-btn-after-border);
  box-shadow: var(--specto-btn-after-shadow);
}

.bricks-button.specto-btn::before {
  z-index: 1;
  background: var(--specto-btn-overlay-color);
  opacity: var(--specto-btn-overlay-opacity);
}

.bricks-button.specto-btn > .specto-btn__content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  gap: var(--specto-btn-gap);
  min-width: 0;
  font: inherit;
  line-height: inherit;
  color: var(--specto-btn-after-fg) !important;
}

.bricks-button.specto-btn > .specto-btn__content > i,
.bricks-button.specto-btn > .specto-btn__content > svg {
  width: var(--specto-btn-icon-size);
  height: var(--specto-btn-icon-size);
  color: var(--specto-btn-after-icon-color);
}

.bricks-button.specto-btn > .specto-btn__content > i {
  display: inline-flex !important;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-size: var(--specto-btn-icon-size) !important;
  line-height: 1 !important;
}

.bricks-button.specto-btn > .specto-btn__content > i::before {
  display: block;
  line-height: 1;
}

.bricks-button.specto-btn > .specto-btn__content > svg,
.bricks-button.specto-btn > .specto-btn__content > svg * {
  stroke: var(--specto-btn-after-icon-color);
  fill: var(--specto-btn-after-icon-color);
}

.bricks-button.specto-btn[data-specto-button-layered='true'] {
  --specto-btn-overlay-opacity: 0;
}

.bricks-button.specto-btn[data-specto-button-layered='true']:hover {
  --specto-btn-overlay-opacity: 0.08;
}

.bricks-button.specto-btn[data-specto-button-layered='true']:active {
  --specto-btn-overlay-opacity: 0.1;
}

.bricks-button.specto-btn[data-specto-size='s'] {
  --su-btn-radius-all: var(--su-shape-btn-default-s, var(--su-radius-full));
  --specto-btn-height: var(--su-size-unit-s, 32px);
  --specto-btn-padding-inline: var(--su-space-unit-m, 8px);
  --specto-btn-gap: var(--su-space-unit-s, 4px);
  --specto-btn-font-size: var(--su-font-size-label-s, 12px);
  --specto-btn-icon-size: var(--su-size-unit-3xs, 16px);
}

.bricks-button.specto-btn[data-specto-size='m'] {
  --su-btn-radius-all: var(--su-shape-btn-default-m, var(--su-radius-full));
  --specto-btn-height: var(--su-size-unit-m, 40px);
  --specto-btn-padding-inline: var(--su-space-unit-xl, 16px);
  --specto-btn-gap: var(--su-space-unit-m, 8px);
  --specto-btn-font-size: var(--su-font-size-label-m, 14px);
  --specto-btn-icon-size: var(--su-size-unit-xs, 24px);
}

.bricks-button.specto-btn[data-specto-size='l'] {
  --su-btn-radius-all: var(--su-shape-btn-default-l, var(--su-radius-full));
  --specto-btn-height: var(--su-size-unit-xl, 56px);
  --specto-btn-padding-inline: var(--su-space-unit-3xl, 24px);
  --specto-btn-gap: var(--su-space-unit-m, 8px);
  --specto-btn-font-size: var(--su-font-size-label-l, 16px);
  --specto-btn-icon-size: var(--su-size-unit-xs, 24px);
}

.bricks-button.specto-btn[data-specto-layout='icon'] {
  --specto-btn-gap: 0;
  width: var(--specto-btn-height);
  min-width: var(--specto-btn-height);
  padding-inline: 0 !important;
  font-size: 0 !important;
}

.bricks-button.specto-btn[data-specto-layout='icon'][data-specto-size='s'] {
  --su-btn-radius-all: var(--su-shape-btn-icon-s, var(--su-radius-full));
}

.bricks-button.specto-btn[data-specto-layout='icon'][data-specto-size='m'] {
  --su-btn-radius-all: var(--su-shape-btn-icon-m, var(--su-radius-full));
}

.bricks-button.specto-btn[data-specto-layout='icon'][data-specto-size='l'] {
  --su-btn-radius-all: var(--su-shape-btn-icon-l, var(--su-radius-full));
}

.bricks-button.specto-btn[data-specto-corners='start'] {
  --su-btn-radius-tl: var(--su-btn-radius-all);
  --su-btn-radius-tr: var(--su-radius-none);
  --su-btn-radius-br: var(--su-radius-none);
  --su-btn-radius-bl: var(--su-btn-radius-all);
}

.bricks-button.specto-btn[data-specto-corners='middle'] {
  --su-btn-radius-tl: var(--su-radius-none);
  --su-btn-radius-tr: var(--su-radius-none);
  --su-btn-radius-br: var(--su-radius-none);
  --su-btn-radius-bl: var(--su-radius-none);
}

.bricks-button.specto-btn[data-specto-corners='end'] {
  --su-btn-radius-tl: var(--su-radius-none);
  --su-btn-radius-tr: var(--su-btn-radius-all);
  --su-btn-radius-br: var(--su-btn-radius-all);
  --su-btn-radius-bl: var(--su-radius-none);
}

.bricks-button.specto-btn[data-specto-corners='custom'] {
  --su-btn-radius-tl: var(--su-btn-radius-custom-tl, var(--su-btn-radius-all));
  --su-btn-radius-tr: var(--su-btn-radius-custom-tr, var(--su-btn-radius-all));
  --su-btn-radius-br: var(--su-btn-radius-custom-br, var(--su-btn-radius-all));
  --su-btn-radius-bl: var(--su-btn-radius-custom-bl, var(--su-btn-radius-all));
}

.bricks-button.specto-btn[data-specto-type='filled'],
.bricks-button.specto-btn[data-specto-type='tonal'],
.bricks-button.specto-btn[data-specto-type='outlined'] {
  --specto-btn-border-width: 1px;
}

.bricks-button.specto-btn[data-specto-type='text'] {
  --specto-btn-border-width: 0;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='primary'] {
  --specto-btn-bg: var(--sc-fil-reg-pri-def, #9625ff);
  --specto-btn-fg: var(--sc-tex-lab-on-pri-def, #fff);
  --specto-btn-icon-color: var(--sc-ico-lab-on-pri-def, #fff);
  --specto-btn-ripple-color: var(--sc-tex-lab-on-pri-def, #fff);
  --specto-btn-after-bg: var(--sc-fil-reg-pri-def, #9625ff);
  --specto-btn-after-fg: var(--sc-tex-lab-on-pri-def, #fff);
  --specto-btn-after-icon-color: var(--sc-ico-lab-on-pri-def, #fff);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-on-pri-hov, rgba(255, 255, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='primary']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='primary']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-on-pri-act, rgba(255, 255, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='neutral'] {
  --specto-btn-bg: var(--sc-fil-reg-neu-def, #8890a9);
  --specto-btn-fg: var(--sc-tex-lab-on-neu-def, #fff);
  --specto-btn-icon-color: var(--sc-ico-lab-on-neu-def, #fff);
  --specto-btn-ripple-color: var(--sc-tex-lab-on-neu-def, #fff);
  --specto-btn-after-bg: var(--sc-fil-reg-neu-def, #8890a9);
  --specto-btn-after-fg: var(--sc-tex-lab-on-neu-def, #fff);
  --specto-btn-after-icon-color: var(--sc-ico-lab-on-neu-def, #fff);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-on-neu-hov, rgba(255, 255, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='neutral']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='neutral']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-on-neu-act, rgba(255, 255, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='danger'] {
  --specto-btn-bg: var(--sc-fil-reg-dan-def, #d70071);
  --specto-btn-fg: var(--sc-tex-lab-on-dan-def, #fff);
  --specto-btn-icon-color: var(--sc-ico-lab-on-dan-def, #fff);
  --specto-btn-ripple-color: var(--sc-tex-lab-on-dan-def, #fff);
  --specto-btn-after-bg: var(--sc-fil-reg-dan-def, #d70071);
  --specto-btn-after-fg: var(--sc-tex-lab-on-dan-def, #fff);
  --specto-btn-after-icon-color: var(--sc-ico-lab-on-dan-def, #fff);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-on-dan-hov, rgba(255, 255, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='danger']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='danger']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-on-dan-act, rgba(255, 255, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='plain'] {
  --specto-btn-bg: var(--sc-fil-reg-pla-def, #fff);
  --specto-btn-fg: var(--sc-tex-lab-con-def, #000);
  --specto-btn-icon-color: var(--sc-ico-lab-con-def, #000);
  --specto-btn-ripple-color: var(--sc-tex-lab-con-def, #000);
  --specto-btn-after-bg: var(--sc-fil-reg-pla-def, #fff);
  --specto-btn-after-fg: var(--sc-tex-lab-con-def, #000);
  --specto-btn-after-icon-color: var(--sc-ico-lab-con-def, #000);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='contrasting'] {
  --specto-btn-bg: var(--sc-fil-reg-con-def, #000);
  --specto-btn-fg: var(--sc-tex-lab-pla-def, #fff);
  --specto-btn-icon-color: var(--sc-ico-lab-pla-def, #fff);
  --specto-btn-ripple-color: var(--sc-tex-lab-pla-def, #fff);
  --specto-btn-after-bg: var(--sc-fil-reg-con-def, #000);
  --specto-btn-after-fg: var(--sc-tex-lab-pla-def, #fff);
  --specto-btn-after-icon-color: var(--sc-ico-lab-pla-def, #fff);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='primary'].specto-btn--disabled,
.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='primary'][aria-disabled='true'] {
  --specto-btn-bg-disabled: var(--specto-ui-disabled-fill-bg);
  --specto-btn-fg-disabled: var(--specto-ui-disabled-fill-fg);
  --specto-btn-icon-color-disabled: var(--specto-ui-disabled-fill-icon);
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='neutral'].specto-btn--disabled,
.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='neutral'][aria-disabled='true'] {
  --specto-btn-bg-disabled: var(--specto-ui-disabled-fill-bg);
  --specto-btn-fg-disabled: var(--specto-ui-disabled-fill-fg);
  --specto-btn-icon-color-disabled: var(--specto-ui-disabled-fill-icon);
}

.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='danger'].specto-btn--disabled,
.bricks-button.specto-btn[data-specto-type='filled'][data-specto-color='danger'][aria-disabled='true'] {
  --specto-btn-bg-disabled: var(--specto-ui-disabled-fill-bg);
  --specto-btn-fg-disabled: var(--specto-ui-disabled-fill-fg);
  --specto-btn-icon-color-disabled: var(--specto-ui-disabled-fill-icon);
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='primary'] {
  --specto-btn-bg: var(--sc-fil-ton-pri-def, #e7dcff);
  --specto-btn-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-ripple-color: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-bg: var(--sc-fil-ton-pri-def, #e7dcff);
  --specto-btn-after-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-hov, rgba(150, 37, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='primary']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='primary']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-act, rgba(150, 37, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='neutral'] {
  --specto-btn-bg: var(--sc-fil-ton-neu-def, #dfe2eb);
  --specto-btn-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-ripple-color: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-bg: var(--sc-fil-ton-neu-def, #dfe2eb);
  --specto-btn-after-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-hov, rgba(0, 0, 0, 0.08));
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='neutral']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='neutral']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-act, rgba(0, 0, 0, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='danger'] {
  --specto-btn-bg: var(--sc-fil-ton-dan-def, #ffd6e1);
  --specto-btn-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-ripple-color: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-bg: var(--sc-fil-ton-dan-def, #ffd6e1);
  --specto-btn-after-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-hov, rgba(215, 0, 113, 0.08));
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='danger']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='tonal'][data-specto-color='danger']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-act, rgba(215, 0, 113, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='primary'] {
  --specto-btn-bg: transparent;
  --specto-btn-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-border: var(--sc-bor-reg-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-ripple-color: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-bg: transparent;
  --specto-btn-after-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-border: var(--sc-bor-reg-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-hov, rgba(150, 37, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='primary']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='primary']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-act, rgba(150, 37, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='primary'] {
  --specto-btn-bg: var(--sc-fil-gho-pri-def, transparent);
  --specto-btn-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-border: transparent;
  --specto-btn-ripple-color: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-bg: var(--sc-fil-gho-pri-def, transparent);
  --specto-btn-after-fg: var(--sc-tex-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-icon-color: var(--sc-ico-lab-pri-def, var(--sc-fil-reg-pri-def, #9625ff));
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-hov, rgba(150, 37, 255, 0.08));
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='primary']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='primary']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-pri-act, rgba(150, 37, 255, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='neutral'] {
  --specto-btn-bg: transparent;
  --specto-btn-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-border: var(--sc-bor-reg-neu-def, var(--sc-tex-lab-neu-def, #292e3b));
  --specto-btn-ripple-color: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-bg: transparent;
  --specto-btn-after-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-after-border: var(--sc-bor-reg-neu-def, var(--sc-tex-lab-neu-def, #292e3b));
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-hov, rgba(0, 0, 0, 0.08));
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='neutral']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='neutral']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-act, rgba(0, 0, 0, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='neutral'] {
  --specto-btn-bg: var(--sc-fil-gho-neu-def, transparent);
  --specto-btn-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-border: transparent;
  --specto-btn-ripple-color: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-bg: var(--sc-fil-gho-neu-def, transparent);
  --specto-btn-after-fg: var(--sc-tex-lab-neu-def, #292e3b);
  --specto-btn-after-icon-color: var(--sc-ico-lab-neu-def, #292e3b);
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-hov, rgba(0, 0, 0, 0.08));
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='neutral']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='neutral']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-neu-act, rgba(0, 0, 0, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='danger'] {
  --specto-btn-bg: transparent;
  --specto-btn-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-border: var(--sc-bor-reg-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-ripple-color: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-bg: transparent;
  --specto-btn-after-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-border: var(--sc-bor-reg-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-hov, rgba(215, 0, 113, 0.08));
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='danger']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='outlined'][data-specto-color='danger']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-act, rgba(215, 0, 113, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='danger'] {
  --specto-btn-bg: var(--sc-fil-gho-dan-def, transparent);
  --specto-btn-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-border: transparent;
  --specto-btn-ripple-color: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-bg: var(--sc-fil-gho-dan-def, transparent);
  --specto-btn-after-fg: var(--sc-tex-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-icon-color: var(--sc-ico-lab-dan-def, var(--sc-fil-reg-dan-def, #d70071));
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-hov, rgba(215, 0, 113, 0.08));
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='danger']:hover {
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn[data-specto-type='text'][data-specto-color='danger']:active {
  --specto-btn-overlay-color: var(--theme-fil-ove-dan-act, rgba(215, 0, 113, 0.1));
  --specto-btn-overlay-opacity: 1;
}

.bricks-button.specto-btn:where(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ),
.bricks-button.specto-btn:where(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ):hover,
.bricks-button.specto-btn:where(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ):active {
  pointer-events: none;
  cursor: not-allowed;
  transform: none;
}

.bricks-button.specto-btn[data-specto-type='filled']:is(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ),
.bricks-button.specto-btn[data-specto-type='tonal']:is(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ) {
  --specto-btn-bg: var(--specto-btn-bg-disabled, var(--specto-ui-disabled-fill-bg));
  --specto-btn-fg: var(--specto-btn-fg-disabled, var(--specto-ui-disabled-fill-fg));
  --specto-btn-icon-color: var(
    --specto-btn-icon-color-disabled,
    var(--specto-ui-disabled-fill-icon)
  );
  --specto-btn-border: transparent;
  --specto-btn-after-bg: var(--specto-btn-bg-disabled, var(--specto-ui-disabled-fill-bg));
  --specto-btn-after-fg: var(--specto-btn-fg-disabled, var(--specto-ui-disabled-fill-fg));
  --specto-btn-after-icon-color: var(
    --specto-btn-icon-color-disabled,
    var(--specto-ui-disabled-fill-icon)
  );
  --specto-btn-after-border: transparent;
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-opacity: 0;
}

.bricks-button.specto-btn[data-specto-type='outlined']:is(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ),
.bricks-button.specto-btn[data-specto-type='text']:is(
    :disabled,
    [disabled],
    [aria-disabled='true'],
    .specto-btn--disabled,
    .disabled
  ) {
  --specto-btn-bg: var(--specto-btn-bg-disabled, #fff);
  --specto-btn-fg: var(--specto-btn-fg-disabled, var(--specto-ui-disabled-line-fg));
  --specto-btn-icon-color: var(
    --specto-btn-icon-color-disabled,
    var(--specto-ui-disabled-line-icon)
  );
  --specto-btn-border: var(--specto-btn-border-disabled, var(--specto-ui-disabled-line-border));
  --specto-btn-shadow: none;
  --specto-btn-after-bg: var(--specto-btn-bg-disabled, #fff);
  --specto-btn-after-fg: var(--specto-btn-fg-disabled, var(--specto-ui-disabled-line-fg));
  --specto-btn-after-icon-color: var(
    --specto-btn-icon-color-disabled,
    var(--specto-ui-disabled-line-icon)
  );
  --specto-btn-after-border: var(
    --specto-btn-border-disabled,
    var(--specto-ui-disabled-line-border)
  );
  --specto-btn-after-shadow: none;
  --specto-btn-overlay-opacity: 0;
}

.specto-btn__ripple {
  position: absolute;
  z-index: 2;
  border-radius: 999px;
  background: var(--specto-btn-ripple-color);
  opacity: var(--specto-btn-ripple-opacity);
  pointer-events: none;
  transform: scale(0);
  animation: specto-btn-ripple 520ms ease-out;
}

.bricks-button.specto-btn > *:not(.specto-btn__ripple):not(.specto-btn__content) {
  position: relative;
  z-index: 1;
}

@keyframes specto-btn-ripple {
  to {
    opacity: 0;
    transform: scale(1);
  }
}