@layer components.timer{:host{--ec-timer-gap:var(--space-rem-s,.5rem);--ec-timer-padding:var(--space-rem-s,.5rem);--ec-timer-radius:var(--border-radius,.5rem);--ec-timer-border:1px solid var(--color-border-default,currentColor);--ec-timer-remaining-font-size:var(--step-1,1.25rem);display:block}:host([hidden]){display:none}e-timer-box{align-items:center;gap:var(--ec-timer-gap);padding:var(--ec-timer-padding);border:var(--ec-timer-border);border-radius:var(--ec-timer-radius);background:var(--card-background-color,transparent);flex-wrap:wrap;display:flex}e-timer-head{flex-direction:column;flex:8rem;min-width:0;display:flex}e-timer-label{color:var(--color-text-light,inherit);font-size:var(--step--1,.875rem)}e-timer-remaining{color:var(--color-text,inherit);font-size:var(--ec-timer-remaining-font-size);font-variant-numeric:tabular-nums;font-weight:700}e-timer-actions{gap:var(--ec-timer-gap);display:flex}button{all:unset;border:1px solid var(--color-primary,currentColor);border-radius:var(--ec-timer-radius);color:var(--color-primary,inherit);font-family:inherit;font-size:var(--step--1,.875rem);cursor:pointer;padding:.25em .75em;line-height:1.6}button:focus-visible{outline:2px solid var(--color-primary,currentColor);outline-offset:2px}button[data-role=toggle]{background:var(--color-primary,transparent);color:var(--color-background,#fff)}button[disabled]{cursor:default;opacity:.5}e-timer-message{color:var(--color-text,inherit);flex:1 0 100%}e-timer-message:empty{display:none}:host([data-state=check]) e-timer-message{font-weight:700}:host([data-state=done]) e-timer-message{font-weight:700}}