@import '../../Common/assets/scss/include-media';
@import '../../Common/assets/scss/variables';
@import '../../Common/assets/scss/mixins';

// Dark mode.
@mixin dark-mode-list {

	&[data-appearance="dark"] {

		.sugar-calendar-event-list-block__base-container {

			// Counter for @import '../../Common/assets/scss/no-events'.
			.sugar-calendar-block__base-container__no-events {

				border-top: 1px solid $border-hover-color-dark;

				&__msg {
					background: $border-hover-color-dark;
					color: $text-color-dark-primary;
				}
			}

			// Counter for @import './views/listview'.
			.sugar-calendar-event-list-block__listview {

				border-top: 1px solid $cell-border-color-dark;

				&__event {

					&__day {

						&__block {

							background: $background-dark;

							&-name {
								color: $text-color-dark-tertiary;
							}

							&-num {
								color: $text-color-dark-primary;
							}
						}
					}

					&__body {

						&__image {

							&__container {
								background: darkgray 50% / cover no-repeat;
							}
						}
					}
				}
			}

			// Counter for @import './views/gridview'.
			.sugar-calendar-event-list-block__gridview {

				border-top: 1px solid $cell-border-color-dark;

				.sugar-calendar-event-list-block__gridview__event {
					&__body {
						&__image {
							&__container {
								background: darkgray 50% / cover no-repeat;
							}
						}
					}
				}
			}

			// Counter for @import './views/plainview'.
			.sugar-calendar-event-list-block__plainview {
				.sugar-calendar-event-list-block__plainview__event {
					&__desc {
						color: $text-color-dark-primary;
					}
				}
			}

			.sugar-calendar-event-list-block__event__title {
				color: var(--links-color, $text-color-dark-primary);

				a {
					color: var(--links-color, $text-color-dark-primary);
				}
			}

			.sugar-calendar-event-list-block__event__datetime {
				color: $text-color-dark-tertiary;
			}

			.sugar-calendar-event-list-block__event__desc {
				color: $text-color-dark-primary;
			}
		}

		.sugar-calendar-event-list-block__footer {
			border-top: 1px solid $border-hover-color-dark;
		}

		button.sugar-calendar-event-list-block__footer__prev_btn,
		button.sugar-calendar-event-list-block__footer__next_btn {
			background: rgba(0, 0, 0, 0.50);
			border: 1px solid $border-color-dark-secondary;
			color: $text-color-dark-secondary;
			cursor: pointer;

			&:hover {
				background: $border-hover-color-dark;
				border-color: transparent;
				color: $text-color-dark-primary;
			}
		}
	}
}

.sugar-calendar-event-list-block {
	@import '../../Common/assets/scss/controls';
	@import '../../Common/assets/scss/popover/month_selector';
	@import '../../Common/assets/scss/popover/calendar_selector';
	@import '../../Common/assets/scss/popover/display_selector';

	// Loading State.
	@import '../../Common/assets/scss/loading-state';

	// Custom month selector.
	@import '../../Common/assets/scss/popover/datepicker';

	.sugar-calendar-event-list-block__base-container {
		@import '../../Common/assets/scss/no-events';
		@import './views/listview';
		@import './views/gridview';
		@import './views/plainview';

		.sugar-calendar-block__events-display-container {

			&__no-header {
				border-top: none;
				padding-top: 0;
			}
		}

		.sugar-calendar-event-list-block__event__title {
			color: var(--links-color, $text-color-primary);
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			margin: 0 0 5px 0;

			@include media('<tablet') {
				font-size: 16px !important;
			}

			a {
				color: var(--links-color, $text-color-primary);
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.sugar-calendar-event-list-block__event__datetime {
			color: $text-color-tertiary;
			font-weight: 500;
			display: flex;
			gap: 4px;
			align-items: center;

			@include media('<tablet') {
				font-size: 13px !important;
			}

			span {
				vertical-align: middle;
			}

			img {
				display: inline;
				height: 15px;
				margin-left: 4px;
				vertical-align: middle;
			}

			.sugar-calendar-event-list-block__event__datetime__icons {
				display: inline;
				vertical-align: middle;

				img {
					margin-left: 8px;
					height: 15px;
				}
			}
		}

		.sugar-calendar-event-list-block__event__desc {
			color: $text-color-primary;
			font-weight: 400;
		}
	}

	&.sugar-calendar-event-list-block__plain-view {

		.sugar-calendar-block__base-container__no-events {
			border-top: 0;

			&__msg {
				margin: $spacing-lg 0;
			}
		}

		.sugar-calendar-event-list-block__footer {
			padding-top: $spacing-lg;
		}
	}

	.sugar-calendar-event-list-block__footer {
		border-top: 1px solid $border-hover-color;
		display: flex;
		justify-content: space-between;
		padding-top: 50px;

		@include media('<tablet') {
			padding-top: $spacing-md;
		}

		button.sugar-calendar-event-list-block__footer__prev_btn,
		button.sugar-calendar-event-list-block__footer__next_btn {
			align-items: center;
			align-self: stretch;
			background: rgba(255, 255, 255, 0.50);
			border: 1px solid $border-color-secondary;
			border-radius: $radius-lg;
			color: $text-color-secondary;
			cursor: pointer;
			display: flex;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			gap: $spacing-sm;
			line-height: 20px; /* 142.857% */
			letter-spacing: 0.035px;
			padding: $spacing-sm 15px;
			text-align: center;

			&:disabled {
				display: none;
			}

			&:hover {
				background: $border-hover-color;
				border-color: transparent;
				color: $text-color-primary;
			}
		}
	}

	@include dark-mode;
	@include dark-mode-list;
}

.sugar-calendar-block-hide-element {
	display: none !important;
}
