.dt-button {
  --_bg: var(--dt-button-accent, var(--dt-color-primary));
  --_fg: var(--dt-color-on-primary);
  --_accent: var(--dt-button-accent, var(--dt-color-primary-text));
  --_size: var(--dt-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--dt-space-2);
  min-height: var(--_size);
  padding: 10px var(--dt-space-3);
  border: 1px solid transparent;
  border-radius: var(--dt-radius-md);
  font-family: var(--dt-font-family);
  font-weight: var(--dt-font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dt-button:disabled, .dt-button[aria-disabled=true] {
  cursor: not-allowed;
}
.dt-button:disabled:not(.dt-button--loading), .dt-button[aria-disabled=true]:not(.dt-button--loading) {
  background: var(--dt-color-disabled);
  color: var(--dt-color-on-disabled);
}
.dt-button--filled {
  background: var(--_bg);
  color: var(--_fg);
}
.dt-button--filled:hover:not(:disabled) {
  background: color-mix(in srgb, var(--_bg) 85%, #000);
}
.dt-button--outlined {
  background: transparent;
  color: var(--_accent);
  border-color: currentColor;
}
.dt-button--ghost {
  background: var(--dt-palette-gray-200);
  color: var(--_accent);
}
.dt-button--ghost:hover:not(:disabled) {
  background: var(--dt-palette-gray-300);
}
.dt-button--transparent {
  background: transparent;
  color: var(--_accent);
}
.dt-button--outlined:hover:not(:disabled), .dt-button--transparent:hover:not(:disabled) {
  background: color-mix(in srgb, var(--_accent) 8%, transparent);
}
.dt-button--link {
  background: transparent;
  color: var(--_accent);
  min-height: 0;
  padding: 0;
  text-decoration: underline;
}
.dt-button--link:hover:not(:disabled) {
  color: color-mix(in srgb, var(--_accent) 85%, #000);
}
.dt-button--primary {
  --_bg: var(--dt-button-accent, var(--dt-color-primary));
  --_fg: var(--dt-color-on-primary);
  --_accent: var(--dt-button-accent, var(--dt-color-primary-text));
}
.dt-button--secondary {
  --_bg: var(--dt-color-secondary);
  --_fg: var(--dt-color-on-secondary);
  --_accent: var(--dt-color-secondary);
}
.dt-button--success {
  --_bg: var(--dt-color-success);
  --_fg: var(--dt-color-on-success);
  --_accent: var(--dt-color-success);
}
.dt-button--info {
  --_bg: var(--dt-color-info);
  --_fg: var(--dt-color-on-info);
  --_accent: var(--dt-color-info);
}
.dt-button--warning {
  --_bg: var(--dt-color-warning);
  --_fg: var(--dt-color-on-warning);
  --_accent: var(--dt-color-warning);
}
.dt-button--danger {
  --_bg: var(--dt-color-danger);
  --_fg: var(--dt-color-on-danger);
  --_accent: var(--dt-color-danger);
}
.dt-button--tertiary {
  --_bg: var(--dt-color-on-surface-muted);
  --_fg: var(--dt-color-surface);
  --_accent: var(--dt-color-on-surface-muted);
}
.dt-button--white {
  --_bg: var(--dt-color-surface);
  --_fg: var(--dt-color-on-surface);
  --_accent: var(--dt-color-on-surface);
}
.dt-button--black {
  --_bg: var(--dt-color-on-surface);
  --_fg: var(--dt-color-surface);
  --_accent: var(--dt-color-on-surface);
}
.dt-button--facebook {
  --_bg: var(--dt-fixed-social-facebook);
  --_fg: var(--dt-palette-white);
  --_accent: var(--dt-fixed-social-facebook);
}
.dt-button--google {
  --_bg: var(--dt-fixed-social-google);
  --_fg: var(--dt-palette-white);
  --_accent: var(--dt-fixed-social-google);
}
.dt-button--linkedin {
  --_bg: var(--dt-fixed-social-linkedin);
  --_fg: var(--dt-palette-white);
  --_accent: var(--dt-fixed-social-linkedin);
}
.dt-button--youtube {
  --_bg: var(--dt-fixed-social-youtube);
  --_fg: var(--dt-palette-white);
  --_accent: var(--dt-fixed-social-youtube);
}
.dt-button--whatsapp {
  --_bg: var(--dt-fixed-social-whatsapp);
  --_fg: var(--dt-palette-white);
  --_accent: var(--dt-fixed-social-whatsapp);
}
.dt-button--xxs {
  --_size: var(--dt-size-xxs);
}
.dt-button--xs {
  --_size: var(--dt-size-xs);
}
.dt-button--sm {
  --_size: var(--dt-size-sm);
}
.dt-button--md {
  --_size: var(--dt-size-md);
}
.dt-button--lg {
  --_size: var(--dt-size-lg);
}
.dt-button--xl {
  --_size: var(--dt-size-xl);
}
.dt-button--xxl {
  --_size: var(--dt-size-xl);
}
.dt-button--full-width {
  width: 100%;
}
.dt-button--icon {
  padding: 0;
  width: var(--_size);
  height: var(--_size);
  text-decoration: none;
}
.dt-button--loading {
  pointer-events: none;
  position: relative;
}
.dt-button--loading.dt-button--icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: dt-button-spinner 0.5s linear infinite;
}
.dt-button--filled.dt-button--active {
  background: color-mix(in srgb, var(--_bg) 85%, #000);
}
.dt-button--outlined.dt-button--active {
  background: color-mix(in srgb, var(--_accent) 8%, transparent);
}
.dt-button--ghost.dt-button--active {
  background: var(--dt-palette-gray-300);
}
.dt-button--rounded-none {
  border-radius: var(--dt-radius-none);
}
.dt-button--rounded-xs, .dt-button--rounded-sm {
  border-radius: var(--dt-radius-sm);
}
.dt-button--rounded-md {
  border-radius: var(--dt-radius-md);
}
.dt-button--rounded-lg, .dt-button--rounded-xl, .dt-button--rounded-xxl {
  border-radius: var(--dt-radius-lg);
}
.dt-button--rounded-circle {
  border-radius: var(--dt-radius-full);
}

@keyframes dt-button-spinner {
  to {
    transform: rotate(360deg);
  }
}