MaramaDayTile { width: calc(2 * var(--tile-radius)) height: calc(2 * var(--tile-radius)) cursor: pointer border-radius: 2px display: flex justify-content: center align-items: center -past { background: hsl(0, 0%, 20%) } -future { background: hsl(0, 0%, 80%) } -range { background: deeppink -future { background: deepskyblue } } -events { div.dot { background: none width: calc(2 * var(--dot-radius) - 2 * var(--dot-border)) height: calc(2 * var(--dot-radius) - 2 * var(--dot-border)) border: var(--dot-border) solid #fff border-radius: calc(2 * var(--dot-radius)) } -attending { div.dot { background: #fff width: calc(2 * var(--dot-radius)) height: calc(2 * var(--dot-radius)) border: none } } } }