/*!
 * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

.app-calendar .app-sidebar,
.event-popover .event-popover__inner {
	.editor-invitee-list-empty-message,
	.editor-reminders-list-empty-message,
	.editor-invitee-list-no-email-configured-message {
		margin-top: 20px;

		&__icon {
			background-size: 50px;
			height: 50px;
			width: 50px;
			margin: 0 auto;
			opacity: .5;
		}

		&__caption {
			margin-top: 8px;
			text-align: center;
			color: var(--color-text-lighter);
		}
	}

	.editor-invitee-list-no-email-configured-message {
		&__icon {
			font-size: 50px;
			line-height: 1em;
			user-select: none;
		}
	}

	.editor-reminders-list-new-button {
		width: 100%;
		background-position-x: 8px;
	}

	.app-sidebar-header {
		&__action {
			margin-top: 0 !important;
			max-height: none !important;
			flex-wrap: wrap;

			div {
				flex-shrink: 0;
			}
		}

		&__desc {
			// We use our custom header layout for the sidebar editor
			height: 0 !important;
			padding: 0 !important;
			margin: 0 !important;

			// But keep the three-dot menu in the front
			.app-sidebar-header__menu {
				z-index: 1;
			}
		}

		&__description {
			flex-direction: column;

			// Close button should be aligned with calendar picker (header)
			padding-top: 5px;
		}
	}

	.app-sidebar-tab {
		// Make the whole sidebar scrollable instead of just the active tab
		overflow: unset !important;
		max-height: unset !important;
		height: auto !important;

		&__buttons {
			position: fixed;
			bottom: var(--body-container-margin);;
			z-index: 2;
			width: calc(27vw - 11px);
			min-width: 300px - 11px;
			max-width: 500px - 11px;
			background-color: var(--color-main-background);
			border-radius: 0 0 var(--body-container-radius) 0;
			padding: 0 8px 6px 0;

			button {
				width: 100%;
				height: 44px;
			}
		}
		&__content {
			margin-bottom: 120px;
		}
	}

	.app-sidebar-tabs {
		// Fix empty content in case of invalid event URLs
		.empty-content {
			height: 100vh;
			padding: 0 20px;
		}
	}

	.property-title-time-picker-loading-placeholder {
		width: 100%;

		&__icon {
			margin: 0 auto;
			height: 62px;
			width: 62px;
			background-size: 62px;
		}
	}

	.app-sidebar__loading-indicator {
		width: 100%;
		margin-top: 20vh;

		&__icon {
			margin: 0 auto;
			height: 44px;
			width: 44px;
			background-size: 44px;
		}
	}

	.repeat-option-set {
		.repeat-option-set-section {
			&:not(:first-of-type) {
				margin-top: 20px
			}

			&--on-the-select {
				display: flex;
				align-items: center;

				.v-select {
					width: 100%;
					min-width: 100px !important; // Set a lower min-width
				}
			}

			&__title {
				list-style: none;
			}

			&__grid {
				display: grid;
				grid-gap: 0;

				.repeat-option-set-section-grid-item {
					padding: 8px;
					border: 1px solid var(--color-border-dark);
					text-align: center;
					margin: 0;
					border-radius: 0;
				}
			}
		}

		&--weekly,
		&--monthly {
			.repeat-option-set-section {
				&__grid {
					grid-template-columns: repeat(7, auto);
				}
			}
		}

		&--yearly {
			.repeat-option-set-section {
				&__grid {
					grid-template-columns: repeat(4, auto);
				}
			}
		}

		&--interval-freq {
			display: flex;
			align-items: center;

			.multiselect {
				min-width: 100px;
				width: 25%;
			}
		}

		&--end {
			margin-top: 20px;
			display: flex;
			align-items: center;

			.repeat-option-end {
				&__label,
				&__end-type-select {
					display: block;
					min-width: 160px;
					width: 25%;
				}

				&__until {
					min-width: 75px;
					width: 50%
				}

				&__count {
					min-width: 75px;
					width: 25%;
				}
			}
		}

		&__label {
			margin-right: auto;
		}
	}

	.repeat-option-warning {
		text-align: center;
	}

	.property-title-time-picker {
		width: 100%;

		&--readonly {
			display: flex;
			align-items: center;
		}

		&__icon {
			width: 34px;
			height: 34px;
			margin-left: -5px;
			margin-right: 5px;
		}

		&__time-pickers,
		&__all-day {
			display: flex;
			align-items: center;
		}

		&__time-pickers {
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 5px;

			.mx-datepicker {
				flex: 1 auto;

				.mx-input-append {
					background-color: transparent !important;
				}
			}

			&--readonly {
				justify-content: start;

				.property-title-time-picker-read-only-wrapper {
					display: flex;
					align-items: center;
					padding: 8px 7px;
					background-color: var(--color-main-background);
					color: var(--color-main-text);
					outline: none;

					&--start-date {
						padding-right: 0;
					}

					&--end-date {
						padding-left: 0;
					}

					&__icon {
						margin-left: 8px;
						height: 16px;
						width: 16px;
						opacity: .3;

						&--highlighted {
							opacity: .7;
						}

						&:focus,
						&:hover {
							opacity: 1;
						}
					}
				}
			}
		}

		&__all-day {
			padding-left: 3px;
			margin-top: 5px;

			// Reduce the height just a little bit (from 44px) to save some space
			.checkbox-radio-switch__label {
				min-height: 32px;
			}
		}

		.datetime-picker-inline-icon {
			margin-top: 17px;
			opacity: .3;
			border: none;
			background-color: transparent;
			border-radius: 0;
			padding: 6px !important;

			&--highlighted {
				opacity: .7;
			}

			&:focus,
			&:hover {
				opacity: 1;
			}
		}
	}

	.property-alarm-list {
		width: 100%;
	}

	.property-alarm-item {
		display: flex;
		align-items: center;
		min-height: 44px;

		&__icon {
			align-self: flex-start;

			&--hidden {
				visibility: hidden;
			}

			.icon {
				width: 34px;
				height: 44px;
				margin-left: -5px;
				margin-right: 5px;
				// TODO: enable me again if the other icons on the details tab have an opacity too
				// opacity: .7;
			}
		}

		&__label {
			padding: 0 7px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			align-self: center;
		}

		&__options {
			margin-left: auto;
			display: flex;
			align-items: center;
			white-space: nowrap;
		}

		&__edit {
			display: flex;
			align-items: center;
			width: 100%;
			min-width: 0;
			padding-right: 8px;

			input[type=number] {
				width: 4em;
			}

			.multiselect {
				flex: 1 auto;
				height: 34px;
				min-width: 0;
			}

			.mx-datepicker {
				flex: 1 auto;
			}

			&--timed {
			}

			&--all-day {
				flex-wrap: wrap;
				margin-bottom: 5px;
				gap: 0 5px;

				&__distance,
				&__time {
					display: flex;
					flex: 1;
					align-items: center;
				}

				&__distance {
					.multiselect {
						width: 6em;
					}
				}

				&__time {
					&__before-at-label {
						flex: 0 0 auto;
						margin-right: 5px;
					}

					.mx-datepicker {
						width: 7em;
					}
				}
			}

			&--absolute {
				.mx-datepicker {
					width: unset;
				}
			}
		}
	}

	.property-repeat {
		width: 100%;

		&__summary {
			display: flex;
			align-items: center;

			&__icon {
				width: 34px;
				height: 34px;
				margin-left: -5px;
				margin-right: 5px;
			}

			&__content {
				flex: 1 auto;
				padding: 8px 7px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		&__options {
			margin-bottom: 5px;
		}
	}

	.resource-list-item,
	.invitees-list-item {
		display: flex;
		align-items: center;
		min-height: 44px;

		&__displayname {
			margin-left: 8px;
		}

		&__actions {
			margin-left: auto;
		}

		&__organizer-hint {
			color: var(--color-text-maxcontrast);
			font-weight: 300;
			margin-left: 5px;
		}
	}

	.resource-search {
		&__capacity {
			display: flex;
			align-items: center;

			&__actions {
				margin-left: 5px;
			}
		}
	}

	.avatar-participation-status {
		position: relative;
		height: 38px;
		width: 38px;

		&__indicator {
			position: absolute;
			bottom: 0;
			right: 0;
			background-size: 10px;
			height: 15px;
			width: 15px;
			border-radius: 50%;
		}

		&__indicator.accepted {
			background-color: #2fb130;
		}

		&__indicator.declined {
			background-color: #ff0000;
		}

		&__indicator.tentative {
			background-color: #ffa704;
		}

		&__indicator.delegated,
		&__indicator.no-response {
			background-color: grey;
		}
	}

	.property-text,
	.property-select,
	.property-color,
	.property-select-multiple,
	.property-title,
	.resource-capacity,
	.resource-room-type {
		display: flex;
		width: 100%;
		align-items: flex-start;

		&__icon,
		&__info {
			height: 34px;
			width: 34px;
		}

		&__icon {
			&--hidden {
				visibility: hidden;
			}
		}

		&__info {
			display: flex;
			justify-content: center;
			flex-shrink: 0;
			opacity: .5;
		}

		&__info:hover {
			opacity: 1;
		}

		&__icon {
			flex-shrink: 0;
			margin-left: -5px;
			margin-right: 5px;
		}

		&__input {
			flex-grow: 2;

			textarea,
			input,
			div.v-select {
				width: 100%;
			}

			textarea {
				max-height: calc(100vh - 500px);
				vertical-align: top;
				margin: 0;
			}

			&--readonly {
				div {
					width: calc(100% - 8px); /* for typical (thin) scrollbar size */
					white-space: pre-line;
					padding: 8px 7px;
					background-color: var(--color-main-background);
					color: var(--color-main-text);
					outline: none;
					overflow-y: scroll;
					word-break: break-word; /* allows breaking on long URLs */
					max-height: 30vh;
				}
			}

			&--readonly-calendar-picker {
				div.calendar-picker-option {
					padding: 8px 7px;
				}
			}
		}
	}

	.property-text,
	.property-select,
	.property-color,
	.property-select-multiple,
	.property-title,
	.property-repeat,
	.resource-capacity,
	.resource-room-type {
		margin-bottom: 5px;

		&--readonly {
			margin-bottom: 0;
		}
	}

	.property-select,
	.property-select-multiple {
		align-items: center;

		.v-select {
			min-width: unset !important;
		}
	}

	.property-color {
		&__input {
			display: flex;
			gap: 5px;
			margin-bottom: 5px;

			&--readonly {
				// Align with other (text based) fields
				margin: 3px 0 3px 7px;
			}
		}

		&__color-preview {
			$size: 44px;
			width: $size !important;
			height: $size !important;
			border-radius: $size;
		}
	}

	.property-text {
		&__icon {
			// Prevent icon misalignment on vertically growing inputs
			height: unset;
			align-self: flex-start;
			padding-top: 12px;
		}

		&--readonly {
			.property-text__icon {
				padding-top: 10px;
			}
		}

		&__input {
			&--readonly {
				// Reduce line height but still keep first row aligned to the icon
				line-height: 1;
				padding-top: calc(var(--default-line-height) / 2 - 0.5lh);
			}

			textarea {
				resize: none;
			}
		}
	}

	.property-select-multiple {
		.property-select-multiple__input.property-select-multiple__input--readonly {
			width: 100%;

			.property-select-multiple-colored-tag-wrapper {
				align-items: center;
				overflow: hidden;
				max-width: 100%;
				position: relative;
				padding: 3px 5px;

				.multiselect__tag {
					line-height: 20px;
					padding: 1px 5px;
					background-image: none;
					display: inline-flex;
					align-items: center;
					border-radius: 3px;
					max-width: fit-content;
					margin: 3px;
				}
			}
		}
	}

	.property-title {
		&__input, input {
			font-weight: bold;
		}

		&__input--readonly {
			font-size: 18px;
		}
	}

	// Normalize gaps between all properties. We use outer margins between each row so a padding
	// around inputs (from core) is not required.
	.property-title,
	.property-title-time-picker {
		input {
			margin: 0;
		}
	}

	.resource-room-type {
		margin-bottom: 5px;
	}

}

.event-popover .event-popover__inner {
	.event-popover__response-buttons {
		margin-top: 8px;
		margin-bottom: 0;
	}

	.property-text,
	.property-title-time-picker {
		&__icon {
			margin: 0 !important;
		}
	}
}

.timezone-popover-wrapper {
	.popover__inner {
		padding: 20px;
	}

	&__title {
		margin-bottom: 8px;
	}

	&__timezone-select {
		min-width: 200px;
	}
}

.event-popover {
	// Don't cut popovers above popovers (e.g. date time picker)
	.v-popper__inner {
		overflow: unset !important;
	}

	.event-popover__inner {
		text-align: left;
		max-width: 480px;
		width: 480px;
		padding: 5px 10px 10px 10px;

		.empty-content {
			margin-top: 0 !important;
			padding: 50px 0;
		}

		.property-title-time-picker:not(.property-title-time-picker--readonly) {
			margin-bottom: 12px;
		}

		.event-popover__invitees {
			.avatar-participation-status__text {
				bottom: 22px;
			}
		}

		.event-popover__buttons {
			margin-top: 8px;
		}

		.event-popover__top-right-actions {
			display: flex;
			gap: var(--default-grid-baseline);
			position: absolute !important;
			top: var(--default-grid-baseline) !important;
			right: var(--default-grid-baseline) !important;
			z-index: 100 !important;
			opacity: .7 !important;
			border-radius: 22px !important;

			.action-item.action-item--single {
				width: 44px !important;
				height: 44px !important;
			}
		}

		.popover-loading-indicator {
			width: 100%;

			&__icon {
				margin: 0 auto;
				height: 62px;
				width: 62px;
				background-size: 62px;
			}
		}
	}

	&[x-out-of-boundaries] {
		margin-top: 75px;
	}
}

.event-popover[x-placement^='bottom'] {
	.popover__arrow {
		border-bottom-color: var(--color-background-dark);
	}
}

.calendar-picker-option {
	display: flex;
	align-items: center;
	overflow: hidden;

	&__color-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: none;
		margin-right: 8px;
		flex-basis: 12px;
		flex-shrink: 0;
	}

	&__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex-grow: 1;
	}

	&__avatar {
		flex-basis: 18px;
		flex-shrink: 0;
	}
}

.property-select-multiple-colored-tag {
	width: 100%;
	display: flex;
	align-items: center;

	&__color-indicator {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		border: none;
		margin-right: 8px;
		flex-shrink: 0;
	}

	.icon {
		margin-left: 4px;
		scale: 0.8;
	}
}

.resource-list-button-group,
.invitees-list-button-group {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	// Only apply the margin if at least one button is being rendered
	&:not(:empty) {
		margin-top: 20px;
	}
}

.vs__dropdown-option span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.resource-search-list-item,
.invitees-search-list-item {
	display: flex;
	align-items: center;
	width: 100%;

	// Account for avatar width (because it is position: relative)
	padding-right: 32px;

	&__label {
		width: 100%;
		padding: 0 8px;

		&__availability {
			color: var(--color-text-maxcontrast);
		}

		div {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		div:nth-child(1) {
			color: var(--color-main-text)
		}

		div:nth-child(2) {
			color: var(--color-text-lighter);
			line-height: 1;
		}
	}
}

.resource-search__multiselect,
.invitees-search__multiselect {
	width: 100%;
}
