.day-container{
	width: 50px;
	height: 50px;
	margin: auto;
	-webkit-tap-highlight-color: transparent; /* Doesnt work on safari and firefox */
	
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

input[type="checkbox"].day-button{
	-webkit-appearance: none;
	appearance: none;
	margin: 0;

	grid-row: 1;
    grid-column: 1;

	width: 100%;
	height: 100%;
	border-radius: 100%;
	background-color: wheat;

	transition: 
		box-shadow 0.2s;

	cursor: pointer;
}

input[type="checkbox"].day-button:hover{
	box-shadow: 0px 0px 2px 2px antiquewhite;
}

.day-ray{
	margin: auto;
	width: 35%;
	height: 10%;
	border-radius: 10000px;
	background-color: antiquewhite;

	grid-column: 1;
	grid-row: 1;

	z-index: -1;

	box-shadow: inherit;

	transition:
		transform 0.5s,
		width 0.5s;
}

.day-ray[visible = false]{
	width: 0;
}

.day-circle{
	grid-column: 1;
	grid-row: 1;

	margin: auto;

	border-radius: 100%;

	box-shadow: inset 2px 2px rgb(183, 172, 158);
	transition: 
		width 0.5s,
		height 0.5s;

	pointer-events: none;
}