@layer base {
  :root {
    --dbv-kit-btn-height: var(--dbv-kit-control-height-medium);
    --dbv-kit-btn-padding-inline: calc(var(--tw-spacing) * 2.5);
    --dbv-kit-btn-gap: calc(var(--dbv-kit-btn-padding-inline) / 4);
    --dbv-kit-btn-outline-offset: var(--dbv-kit-outline-offset);

    --dbv-kit-btn-foreground: var(--tw-color-white);
    --dbv-kit-btn-background: var(--dbv-kit-color-primary-600);
    --dbv-kit-btn-background-hover: var(--dbv-kit-color-primary-700);
    --dbv-kit-btn-background-active: var(--dbv-kit-color-primary-800);
    --dbv-kit-btn-outline-color: var(--dbv-kit-color-outline);

    --dbv-kit-btn-border-width: var(--dbv-kit-control-border-width);
    --dbv-kit-btn-border-color: transparent;
    --dbv-kit-btn-border-style: solid;
    --dbv-kit-btn-border-radius: var(--dbv-kit-control-border-radius);

    --dbv-kit-btn-font-weight: var(--tw-font-weight-normal);
    --dbv-kit-btn-font-size: calc(var(--dbv-kit-font-size-base) * 0.875);

    --dbv-kit-btn-loader-base-color: var(--tw-color-white);
    --dbv-kit-btn-loader-animation: var(--tw-animate-spin);
  }
}