.btn{--btn-step:var(--ds-border-width);box-shadow:var(--ds-shadow-xs);-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative;translate:0}.btn-solid{background-color:var(--ds-color-primary);color:var(--ds-color-primary-fg)}.btn-outline{border:var(--ds-border-width) solid var(--ds-color-input);color:var(--ds-color-fg);box-shadow:none}.btn-inverse{background-color:var(--ds-color-footer-fg);color:var(--ds-color-footer)}@media (hover:hover) and (pointer:fine){.btn:hover{translate:0 calc(var(--btn-step) * -1);box-shadow:var(--ds-shadow-sm)}.btn-outline:hover{border-color:var(--ds-color-fg)}}.btn:active{translate:0 var(--btn-step);box-shadow:none}@media (prefers-reduced-motion:no-preference){.btn{transition:translate var(--ds-motion-duration) var(--ds-motion-ease), box-shadow var(--ds-motion-duration) var(--ds-motion-ease), border-color var(--ds-motion-duration-fast) var(--ds-motion-ease)}.btn:active{transition-duration:var(--ds-motion-duration-fast)}}@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{translate:none}}