// Base
.rd-calendar-widget {
	font-weight: 400;
	background-color: $gray-200;

	.rdc-panel {
		padding: px-to-rem( 17px, 15px );
		color: $white;
		background-color: $primary;
	}

	.rdc-panel-title {
		line-height: 1.2;
	}

	.rdc-next,
	.rdc-prev {
		font-size: px-to-rem( 26px );
		line-height: 1;
	}

	.rdc-next:hover,
	.rdc-prev:hover {
		color: rgba( $white, .5 );
	}

	// Table grid
	.rdc-table {
		margin: 0;
		padding: px-to-rem( 9px, 15px );
	}

	// Weeks
	.rdc-table_week {
		display: inline-block;
		padding-bottom: px-to-rem( 13px );
		font-size: px-to-rem( 15px );
		font-weight: 400;
		line-height: 1.2;
		text-transform: uppercase;
	}


	// Date
	.rdc-table_date {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: px-to-rem( 36px );
		height: px-to-rem( 36px );
		font-size: px-to-rem( 16px );
		line-height: 1.2;
		color: $body-color;
		background-color: $white;
		border-radius: 50%;
	}

	.rdc-table_today {
		color: $white;
		background-color: $dark;
	}

	.rdc-table_has-events {
		.rdc-table_date {
			color: $white;
			background-color: $primary;
		}

		.rdc-table_today {
			color: $white;
			background-color: $dark;
		}
	}

	// Days of next/prev months
	.rdc-table_next,
	.rdc-table_prev {
		color: $gray-900;
		opacity: 0;
		pointer-events: none !important;
	}
}


// Media
@include media-breakpoint-between( md, lg ) {
	.rd-calendar-widget {
		.rdc-panel {
			font-size: px-to-rem( 16px );
		}

		.rdc-table_date {
			width: px-to-rem( 22px );
			height: px-to-rem( 22px );
			font-size: px-to-rem( 13px );
		}
	}
}

@include media-breakpoint-up( lg ) {
	.rd-calendar-widget {
		.rdc-table_date {
			width: px-to-rem( 36px );
			height: px-to-rem( 36px );
			margin: 2px 0;
			font-size: px-to-rem( 15px );
		}
	}
}