@use "~admin-stylesheets/colors";

.nelio-content-pqe-extra {
	background: colors.$layout-colors__background;
	display: flex;
	flex-direction: row;
	margin-top: 1em;
	border: 1px solid colors.$layout-colors__border;

	&__is-loading {
		border-color: transparent;
		display: flex;
		justify-content: center;
	}

	&__tabs {
		background: colors.$layout-colors__background--is-emphasized;
		display: flex;
		flex-direction: column;
		padding-bottom: 2em;
	}

	&__tab {
		background: none;
		border: none;
		border-left: 4px solid transparent;
		cursor: pointer;
		overflow: hidden;
		padding: 1em;
		padding-left: calc(1em - 4px);
		padding-right: 0.2em;
		text-align: left;
		text-overflow: ellipsis;
		width: 12em;

		&--active {
			background: colors.$layout-colors__background;
			border-left-color: colors.$wordpress-colors__tab-shadow--is-active;
			cursor: default;
			font-weight: 700;
		}
	}

	&__content {
		flex-grow: 1;
		overflow-y: auto;
		padding: 0.5em;
		min-height: 8em;
		max-height: 24em;
	}

	&__editor-info {

		&-title {
			font-weight: 700;
		}
	}

	&__reference-list,
	&__task-list {
		margin: 0;
		padding: 0.5em;

		li {
			margin-bottom: 0.6em;
		}
	}

	&__new-reference {
		display: flex;
		gap: 0.5em;

		> :first-child {
			flex-grow: 1;
		}

		* {
			height: auto !important;
			margin: 0 !important;
		}
	}

	&__task-list-actions {
		display: flex;
		gap: 0.5em;
		justify-content: center;
	}

	&__configure-task-presets {
		margin: 0.8em 0;
		text-align: center;
	}

	&__comments {
		display: flex;
		flex-direction: column;
	}

	&__comment {
		display: flex;
		flex-direction: row;
		margin-top: 1em;

		&--is-mine {
			justify-content: flex-end;
			text-align: right;
		}

		&-bubble {
			background: colors.$layout-colors__background--is-emphasized;
			border-radius: 0.5em;
			border-top-left-radius: 0;
			word-break: break-word;
			display: inline-block;
			max-width: 85%;
			width: auto;
			padding: 0.6em;
			text-align: left;

			&--is-mine {
				border-radius: 0.5em;
				border-top-right-radius: 0;
			}
		}

		&-list {
			flex-grow: 1;
			flex-shrink: 0;
			overflow-y: auto;
			max-height: 100%;
			max-height: 16em;
			padding: 0 1em;
		}

		&-form {
			flex-grow: 0;
			flex-shrink: 0;
		}

		&-form textarea {
			border: none;
			border-top: 1px solid #808080;
			border-radius: 0;
			height: 4em;
			padding: 4px 5px 0;
			resize: none;
		}

		&-extra {
			color: colors.$layout-colors__foreground--is-blurred;
			font-size: 0.9em;

			&--is-mine {
				text-align: right;
			}
		}

		&-author {
			font-weight: 700;
		}

		&-actions {
			color: colors.$layout-colors__foreground--is-blurred;
			font-size: 0.9em;

			> .nelio-content-delete-button {
				font-size: 1em;
			}
		}
	}

	&__task {
		border-left: 3px solid colors.$task-colors__actual-color;
		margin-left: -3px;
		padding-left: 0.5em;

		&--completed {
			opacity: 0.4;
		}

		&--is-red {
			border-color: colors.$task-colors__actual-color--is-red;
		}

		&--is-orange {
			border-color: colors.$task-colors__actual-color--is-orange;
		}

		&--is-yellow {
			border-color: colors.$task-colors__actual-color--is-yellow;
		}

		&--is-green {
			border-color: colors.$task-colors__actual-color--is-green;
		}

		&--is-cyan {
			border-color: colors.$task-colors__actual-color--is-cyan;
		}

		&--is-blue {
			border-color: colors.$task-colors__actual-color--is-blue;
		}

		&--is-purple {
			border-color: colors.$task-colors__actual-color--is-purple;
		}

		&-desc--completed {
			text-decoration: line-through;
		}

		&-details {
			font-size: 0.9em;
			opacity: 0.7;
		}
	}

	&__task-actions,
	&__task-details {
		min-height: 1.5rem;
	}

	&__task-actions {
		display: none;
	}

	&__task:hover #{&}__task-details {
		display: none;
	}

	&__task:hover #{&}__task-actions {
		display: block;
	}
}