:root { --m5-reading-scale: 1; }
:root[data-font-size="75"] { font-size: 75%; }
:root[data-font-size="80"] { font-size: 80%; }
:root[data-font-size="90"] { font-size: 90%; }
:root[data-font-size="100"] { font-size: 100%; }
:root[data-font-size="115"] { font-size: 115%; }
:root[data-font-size="130"] { font-size: 130%; }
:root[data-font-size="150"] { font-size: 150%; }
:root[data-font-size="175"] { font-size: 175%; }
:root[data-font-size="200"] { font-size: 200%; }
:root[data-reading-size="75"] { --m5-reading-scale: .75; }
:root[data-reading-size="80"] { --m5-reading-scale: .8; }
:root[data-reading-size="90"] { --m5-reading-scale: .9; }
:root[data-reading-size="115"] { --m5-reading-scale: 1.15; }
:root[data-reading-size="130"] { --m5-reading-scale: 1.3; }
:root[data-reading-size="150"] { --m5-reading-scale: 1.5; }
:root[data-reading-size="175"] { --m5-reading-scale: 1.75; }
:root[data-reading-size="200"] { --m5-reading-scale: 2; }

.reading-size-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: max-content;
  margin: .25rem 0 .25rem auto;
  border: 1px solid var(--m5-border);
  border-radius: 8px;
  background: var(--m5-surface);
}
.reading-size-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: .25rem .6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--m5-link);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.reading-size-controls .smaller-text { font-size: .85rem; }
.reading-size-controls .larger-text { font-size: 1.3rem; }
.reading-size-controls button:hover:not(:disabled) { background: var(--m5-surface-soft); }
.reading-size-controls button:focus-visible { outline: 2px solid var(--m5-focus); outline-offset: 2px; }
.reading-size-controls button:disabled { opacity: .4; cursor: default; }
.transcript-heading > .reading-size-controls { margin-inline-start: 0; }
.scripture-popover-header > .reading-size-controls { margin-block: 0; }