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

%prevent-overlap {
	background-color: var(--color-main-background) !important;
	border: 1px solid var(--color-background-dark) !important;
}

.app-navigation-toggle--prevent-overlap {
	@extend %prevent-overlap;
}

.app-calendar {
	.datepicker-button-section,
	.today-button-section,
	.view-button-section {
		display: flex;
	}

	.datepicker-button-section {
		&__datepicker-label {
			flex-grow: 4 !important;
			text-align: center;
			border-radius: 0 !important;
		}

		&__datepicker {
			margin-inline-start: 26px;
			margin-top: 48px;
			position: absolute !important;
			width: 0 !important;

			.mx-input-wrapper {
				display: none !important;
			}
		}

		&__left,
		&__right {
			background-size: 10px;
			flex-grow: 0 !important;
			width: 34px;
			padding: 0 6px !important;
		}
		&__left{
			border-radius: var(--border-radius-element) 0 0 var(--border-radius-element) !important;
		}
		&__right{
			border-radius: 0 var(--border-radius-element) var(--border-radius-element) 0 !important;
		}
	}

	.app-navigation__body {
		overflow-y: unset !important;

		.app-navigation-header {
			padding: calc(var(--default-grid-baseline, 4px) * 2);
		}
	}

	.new-event-today-view-section {
		display: flex;
		gap: var(--default-grid-baseline);
		margin-top: var(--default-grid-baseline);

		// Fix margins from core
		.button {
			margin: 0 var(--default-grid-baseline) 0 0;
		}

		.new-event {
			flex-grow: 5;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.today {
			flex-grow: 1;
			font-weight: normal !important;
		}
	}

	// Add background to navigation toggle to fix overlap with calendar elements
	.app-navigation-toggle {
		@extend %prevent-overlap;
	}

	.app-navigation {
		button.icon-share {
			opacity: 0.3 !important;
		}

		button.icon-shared,
		button.icon-public {
			opacity: 0.7 !important;
		}

		button.icon-share:active,
		button.icon-share:focus,
		button.icon-share:hover,
		button.icon-shared:active,
		button.icon-shared:focus,
		button.icon-shared:hover,
		button.icon-public:active,
		button.icon-public:focus,
		button.icon-public:hover {
			opacity: 1 !important;
		}

		#calendars-list {
			display: block !important;
		}

		li.app-navigation-loading-placeholder-entry {
			div.icon.icon-loading {
				min-height: 44px;
			}
		}

		.app-navigation-entry-wrapper.deleted {
			.app-navigation-entry__name {
				text-decoration: line-through;
			}
		}

		.app-navigation-entry-wrapper.open-sharing {
			box-shadow: inset 4px 0 var(--color-primary-element) !important;
			margin-inline-start: -6px;
			padding-inline-start: 6px;
		}

		.app-navigation-entry-wrapper.disabled {
			.app-navigation-entry__name {
				color: var(--color-text-lighter) !important;
			}
		}

		.app-navigation-entry-wrapper .app-navigation-entry__children .app-navigation-entry {
			padding-inline-start: 0 !important;

			.avatar {
				width: 32px;
				height: 32px;
				background-color: var(--color-border-dark);
				background-size: 16px;
			}

			.avatar.published {
				background-color: var(--color-primary-element);
				color: white;
			}
		}

		.app-navigation-entry__multiselect {
			padding: 0 8px;

			.multiselect {
				width: 100%;
				border-radius: var(--border-radius-large);

				&__content-wrapper {
					z-index: 200 !important;
				}
			}
		}

		.app-navigation-entry__utils {
			.action-checkbox__label {
				padding-inline-end: 0 !important;
			}

			.action-checkbox__label::before {
				margin: 0 4px 0 !important;
			}
		}

		.app-navigation-entry-new-calendar {
			.app-navigation-entry__name {
				color: var(--color-text-maxcontrast) !important;
			}

			&:hover,
			&--open {
				.app-navigation-entry__name{
					color: var(--color-text-light) !important;
				}
			}

			.action-item:not(.action-item--open) {
				.action-item__menutoggle:not(:hover):not(:focus):not(:active) {
					opacity: .5;
				}
			}

		}


		ul {

			// Calendar list items / Subscription list items
			> li.app-navigation-entry-wrapper {

				div.sharing-section {
					//box-shadow: inset 4px 0 var(--color-primary-element);
					//padding-left: 12px;
					//padding-right: 12px;
					//width: 100%;

					div.multiselect {
						width: calc(100% - 14px);
						max-width: none;
						z-index: 105;
					}

					.oneline {
						white-space: nowrap;
						position: relative;
					}

					.shareWithList {
						list-style-type: none;
						display: flex;
						flex-direction: column;

						> li {
							height: 44px;
							white-space: normal;
							display: inline-flex;
							align-items: center;
							position: relative;



							.username {
								padding: 0 8px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}

							> .sharingOptionsGroup {
								margin-inline-start: auto;
								display: flex;
								align-items: center;
								white-space: nowrap;

								> a:hover,
								> a:focus,
								> .share-menu > a:hover,
								> .share-menu > a:focus {
									box-shadow: none !important;
									opacity: 1 !important;
								}

								> .icon:not(.hidden),
								> .share-menu .icon:not(.hidden){
									padding: 14px;
									height: 44px;
									width: 44px;
									opacity: 0.5;
									display: block;
									cursor: pointer;
								}

								> .share-menu {
									position: relative;
									display: block;
								}
							}
						}
					}
				}
			}

			.appointment-config-list {
				.app-navigation-caption {
					margin-top: 22px;
				}

				.app-navigation-entry-link,
				.app-navigation-entry-link * {
					cursor: default;
				}
			}
		}
	}
}