.reveal__occupancy{
	width:60%;
	border:none;

	@include breakpoint(medium down){
		width:100%;
	}
	
}
.occupancy-calendar{
	border-collapse: collapse;

	thead{
		background:none;
		border-top:0;
		border-left:0;
		border-right:0;
		th{text-align:center;width:calc(100%/7);font-size:0.75rem;}
		//th:first-child{border-left:0;}
		//th:last-child{border-right:0;}
	}
	
	tbody{
		td{text-align:center;padding:0;line-height:0;border-collapse: collapse;border: $table-border;background-color:rgba($light-gray,0.25);}
		td.empty-day{}
		
	}
	
	a.date{
		display:block;height:0;padding-bottom:80%;vertical-align:middle;position:relative;
		overflow:hidden;
		color:$black;
		background:$white;
		&::before{
			content:"";
		    right: -1rem;
		    position: absolute;
		    top: -0.5rem;
		    height: 1rem;
		    width: 3rem;
		    transform:rotate(45deg);
		    background-color: rgba($success-color,1);
			@include animate();
		}
		
		&::after{
			content:"Full availability";
			font-size:0.625rem;
			position:absolute;
			bottom:0;left:0;right:0;
			line-height:1.5rem;
			color:#fff;
			@include animate();
		}
		
		&:hover{
			box-shadow:0 0 1rem rgba($black,0.2);
			z-index:+1;
			
			&::before{
				height: 2rem;
				width: 4rem;
				right:-1.5rem;
			}
			&::after{
				color:$black
			}
		}
		
		
		.date-label{@include absolute-center();}
		
	}
	a.date__orange{
		&::before{background-color: rgba($warning-color,1);}
		&::after{content:"Limited availability";}
	}
	a.date__red{
		&::before{background-color: rgba($alert-color,1);}
		&::after{content:"No availability";}
	}
	
	a.date__gray{
		color:$medium-gray;
		&::before{background-color: rgba($black,0.1);}
		&::after{content:"No availability";}
		&:hover{
			box-shadow:none;
			&::after{color:#fff;}
			
		}
		
	}
	a.date__selected{
		color:$white;
		.date-label::before{
			content:"";
			position:absolute;
			width:2rem;
			height:2rem;
			background-color:$primary-color;
			border-radius:50%;
			top:-1rem;
			left:-0.5rem;
			z-index:-1;
			
		}
	}

	
	
}