@keyframes app-button--shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.app-button--root{--app-button--color:var(--color-primary);--app-button--custom-color:var(--color-primary);font:inherit;cursor:pointer;line-height:1}.app-button--root.small{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}.app-button--root.normal{padding:var(--space-3) var(--space-4);font-size:var(--font-size-base)}.app-button--root.big{padding:var(--space-4) var(--space-6);font-size:var(--font-size-base)}.app-button--root.fluid{inline-size:100%}.app-button--root.bold{font-weight:700}.app-button--root.ghost{background:0 0;border:none}.app-button--root.ghost.big{font-size:var(--font-size-lg);padding:0}.app-button--root.ghost.correct{color:var(--color-correct)}.app-button--root.ghost.error{color:var(--color-wrong)}.app-button--root.outlined{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);transition:border-color .15s,background .15s,color .15s,opacity .2s}.app-button--root.outlined.big{border-width:2px}.app-button--root.outlined.correct{border-color:var(--color-correct);color:var(--color-correct)}.app-button--root.outlined.wrong{border-color:var(--color-wrong);color:var(--color-wrong)}.app-button--root.outlined.chosen{cursor:default}.app-button--root.outlined.correct.chosen{border-color:var(--color-correct);background:var(--color-correct-subtle);color:var(--color-correct)}.app-button--root.outlined.wrong.chosen{border-color:var(--color-wrong);background:var(--color-wrong-subtle);color:var(--color-wrong)}.app-button--root.outlined.unchosen{opacity:.3;cursor:default}.app-button--root.outlined.selected{border-color:var(--color-text);background:var(--color-bg)}.app-button--root.muted.selected{border-color:var(--color-text);opacity:1}.app-button--root.outlined.matched{border-color:var(--app-button--color);background:color-mix(in srgb, var(--app-button--color) 9%, transparent);color:var(--app-button--color);cursor:default}.app-button--root.custom{border-color:var(--app-button--custom-color);background:color-mix(in srgb, var(--app-button--custom-color) 9%, transparent);color:var(--app-button--custom-color)}.app-button--root.active{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--color-primary)}.app-button--root.muted{border-radius:var(--radius-md);opacity:.4;background:0 0;border:2px solid #0000;transition:border-color .15s}.app-button--root.pill{border-radius:var(--radius-pill);opacity:.6;background:0 0;border:1.5px solid;font-weight:700}.app-button--root.pill.small{padding:var(--space-1) var(--space-4);font-size:var(--font-size-xs)}.app-button--root.pill.normal{padding:var(--space-2) var(--space-6);font-size:var(--font-size-sm)}.app-button--root.solid{border-radius:var(--radius-lg);background:var(--color-primary);color:var(--color-surface);border:none;font-weight:700}.app-button--root.shake{animation:.5s ease-in-out app-button--shake}