Could you add a class to a higher-level element describing the "Timer" state, and then modify the declarations of `#ring-button-close` and `#ring-button-snooze` to use this? For example, I'm thinking something like:

```css
.footer-button-container button {
  width: calc((100% - 4.06rem) / 2)
}
.timer-ring #ring-button-close {
  width: calc(100% - (4.06rem * .7666));
}
.timer-ring #ring-button-snooze {
  display: none;
}
```

This limits the amount of DOM updates you have to do in [`Ringview#timer`](https://github.com/oconnore/gaia/blob/650f9fa57992b2953453f08cc38fbf8e75ecfab2/apps/clock/js/onring.js#L122), avoids `!important`, and decouples the JavaScript and the presentation.