/* ==========================================================================
   Room Calendar shortcode styles
   ========================================================================== */

.qodef-room-calendar {
	position: relative;
	display: inline-block;
	vertical-align: top;
	min-width: 300px;
	padding: 24px 30px 30px;
	background-color: $additional-background-color;
	
	.qodef-m-title {
		margin: 0 0 24px;
		text-align: center;
	}
	
	.qodef-m-form {
		position: relative;
		
		&:after {
			content: '';
			@include qodefAbsoluteLayout();
			background-color: rgba(#fff, .8);
			z-index: 1;
		}
		
		&.qodef--loaded {
			
			&:after {
				display: none;
			}
			
			.qodef-m-spinner {
				display: none;
			}
		}
		
		&.qodef--selected {
			
			.qodef-m-form-button {
				display: block;
			}
		}
	}
	
	.qodef-m-spinner {
		position: absolute;
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		width: 40px;
		color: $main-color;
		fill: currentColor;
		animation: qode-rotate 2s infinite linear;
		z-index: 2;
	}
	
	.qodef-m-form-calendar {
		width: 100%;
		min-height: 200px;
	}
	
	.qodef-m-form-button {
		display: none;
		margin-top: 30px;
	}
}