:where(.bricks-button) { --btn: var(--Dixie); --btn-light: var(--DixieLight); --btn-dark: var(--dixie-darker); }  .bricks-button.btn-rouge { --btn: var(--Cinnabar); --btn-light: var(--Cinnabar-Light); --btn-dark: var(--cinnabar-darker); } .bricks-button.btn-bleu { --btn: var(--EasternBlue); --btn-light: var(--EasternBlueLight); --btn-dark: var(--eastern-blue-darker); } .bricks-button.btn-vert { --btn: var(--olive-drab); --btn-light: var(--olive-drab-light); --btn-dark: var(--olive-drab-darker); }  .bricks-button.btn-blanc { --btn: var(--White); --btn-dark: var(--NeutralDark); }  .bricks-button.bricks-background-primary, .bricks-button.bricks-background-secondary { border-color: var(--btn) !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; }  .bricks-button.bricks-background-primary { background-color: var(--btn) !important; color: var(--White) !important; }  .bricks-button.bricks-background-secondary { background-color: transparent !important; color: var(--btn) !important; } .bricks-button.bricks-background-secondary:hover { background-color: var(--btn) !important; color: var(--White) !important; }  .bricks-button.bricks-background-secondary.btn-blanc:hover { background-color: transparent !important; color: var(--White) !important; }  .bricks-button.bricks-background-primary:hover, .bricks-button.bricks-background-secondary:hover { transform: translateY(-3px); box-shadow: 0 4px 0 var(--btn-dark); }  .bricks-button.bricks-background-primary:active, .bricks-button.bricks-background-secondary:active { transform: translateY(0); box-shadow: 0 1px 0 var(--btn-dark); transition-duration: 0.08s; }  @media (prefers-reduced-motion: reduce) { .bricks-button:hover, .bricks-button:active { transform: none; } }