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

  font-family: sans

  -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
      }
    }
  }
}