@import '../../../../../../../styles/variables';

.day-list-container {
	padding-bottom: 2rem;

	.bottom,
	.top {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.top {
		padding-top: 1rem;
	}

	.bottom {
		padding-bottom: 1rem;
	}

	.day-weekend {
		background: #dccfed;
	}

	.button {
		min-width: 9ch;
	}

	.date-choice {
		margin-bottom: 0.5em;
		border-radius: 0.25em;
		background: $bg-grey;

		.columns {
			margin-bottom: 0;
		}

		label {
			font-weight: 600;
		}

		input,
		.button {
			width: 100%;
			display: block;
		}

		hr {
			background: $rules;
			margin: 0;
		}
	}

	.colored-weekend-days {
		.date-choice {
			&.day-weekend {
				background: #b1a1d5;
			}

			&:nth-of-type(odd) {
				background: #9880d5;
				&.day-weekend {
					background: #8e72d4;
				}
			}
		}
	}

	.date-choice-item {
		width: 75%;
		border-color: $border-color !important;
	}

	.button .fa {
		margin-left: 1ch;
		display: inline-block;
	}

	.delete-date {
		color: $primary_color;
		border: 0;
		border-radius: 0.25rem;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		background: transparent;
		text-align: left;
		margin-right: 0;

		.fa,
		.icon {
			float: left;
			color: $primary_color;
			margin: 0;
			margin-right: 1rem;
			height: 1.25rem;
			// filter converter is here https://codepen.io/sosuke/pen/Pjoqqp
			filter: invert(48%) sepia(68%) saturate(6489%) hue-rotate(233deg) brightness(89%) contrast(81%);
		}

		&:hover {
			color: $white;
			background-color: $primary_color;

			.fa,
			.icon {
				color: $white;
				filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(80deg) brightness(104%) contrast(105%);
			}
		}
	}

	.format-helper {
		font-style: normal;
		font-weight: normal;
		font-size: 14px;
		line-height: 16px;
	}
	.add_date {
		margin-top: 2rem;
	}
}