$inner_spacing: .5rem;

@import 'dashboard/popup';

.wpcrm-dashboard-calendar {
	background: white;
	border: 1px solid #ddd;
	
	table {
		width: 100%;
		table-layout: fixed;
	}
	
	thead {
		background: #fff;

		.calendar-row.month {
			background-color: #3199BE;
		}

		.calendar-row:nth-child(2) .calendar-day-head {
			text-align: center;
		}

		.calendar-day-head {
			border-bottom: 1px solid #ddd;
			font-weight: 500;
			padding-top: 1em;
			padding-bottom: 1em;
		}

		.calendar-nav{
			a {
				display: flex;
				width: 32px;
				height: 32px;
				line-height: 32px;
				margin: auto;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0;
				
				svg{
					fill: currentColor;
					max-height: 20px;
				}
			}

			&-prev{
				a {
					margin-left: 0;
				}
			}

			&-next{
				a {
					margin-right: 0;
				}
			}
		}
	}

    tbody {
		background-color: #fafafa;
		background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
		font-size: 13px;

		.calendar-row:nth-child(1) .calendar-day {
			border-bottom: none;
			border-left: 1px solid #ddd;
		}

        .calendar-row:nth-child(2) .calendar-day {
			border-top: 1px solid #ddd;
		}

		.calendar-row:last-child .calendar-day {
			border-bottom: none;
		}

		.calendar-day {
			background: white;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			position: relative;

			&:last-child {
				border-right: none;
			}

			&:first-child {
				border-left: none;
			}

			&:hover {
				background: #fafafa;

				.day-number {
					background: red;
					color: white;
				}
			}
		}
    }
	
	td {
		// We use this to position the day.
		position: relative;
		
		padding: $inner_spacing;
	}
	
	.calendar-day-np {
		// Will equalize the grid
		width: 130px;
		// background: #fafafa;
	}
	
	.calendar-day-head {
		a {
			display: block;
			background: #fafafa;
			font-size: 12px;
			color: #333;
			border-radius: 3px;
			padding: 1em .5em;
			text-decoration: none;
			border: 1px solid #ddd;
			text-align: center;

			&:hover {
				color: white;
				background: #253C55;
				border-color: #253C55;
			}
		}
		
		h3 {
			text-align: center;
			margin: 0;
			color: #fff;
		}
	}
	
	.day-number {
		font-size: 12px;
		height: 2em;
		width: 2em;
		line-height: 2;
		background: #eee;
		color: #333;
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
		display: inline-block;
		
		@media only screen and (max-width: 680px) {
			margin: auto;
		}
	}

	.quick-add {
		display: inline-block;
		vertical-align: middle;
		margin-left: 2px;
	}

	.calendar-icon-list{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		margin: 1em 0 0;
	}

	.calendar-row.weekdays{
		.calendar-day-head{
			span{
				@media only screen and (max-width: 680px) {
					text-align: center;
					
					.other-letters{
						display: none;
					}
					
					&.sunday{
						color: red;
					}
				}
			}
		}
	}
}