src-css/mavo.scss

@import 'defs';

.mv-danger:enabled:hover {
	box-shadow: 0 0 10em #b00 inset;
	color: white;
}

.mv-highlight {
	@include highlight(hsla(58, 100%, 50%, .5));
}

.mv-item-bar:where(.mv-ui) {
	all: initial;
	position: absolute;
	z-index: 10;
	display: inline-flex;
	box-shadow: 0 .1em .15em rgba(0,0,0,.12);
	border-radius: calc(.3em + 1px);
	white-space: nowrap;
	opacity: .7;
	bottom: 100%;
	right: 0;
	margin: .2em 0;

	tr[mv-list-item] > & { // Table rows cannot be relative, hack to fix that
		bottom: auto;
		right: auto;
	}

	&[hidden] {
		opacity: 0;
		pointer-events: none;
	}

	&:not([hidden]) {
		transition: .4s opacity;
	}

	&:hover,
	&.mv-sticky {
		opacity: 1;
	}

	&:focus-within {
		opacity: 1;
	}

	button {
		all: unset;
		padding: .2em .3em;
		min-width: 1em;
		min-height: 1em;
		border: 1px solid rgba(0,0,0, .1);
		cursor: pointer;
		background: #eee no-repeat center;
		line-height: 1;
		font-size: 120%;
		text-align: center;

		&:not(:hover):not(:focus) {
			box-shadow: 0 .4em 1em white inset;
		}

		$radius: .3em;

		&:first-child {
			border-top-left-radius: $radius;
			border-bottom-left-radius: $radius;
		}

		&:last-child {
			border-top-right-radius: $radius;
			border-bottom-right-radius: $radius;
		}

		&:not(:first-child) {
			border-left: 0;
		}
	}

	.mv-delete {
		$color: rgb(200,0,0);
		color: $color;

		&::before {
			content: $rubbish-bin;
			display: block;
			width: 1em;
			height: 1em;
		}

		&:hover, &:focus {
			background-color: $color;
			color: white;

			&::before {
				filter: saturate(0) brightness(600%);
			}
		}
	}

	.mv-add {
		$color: hsl(80, 80%, 40%);
		color: $color;

		&::before {
			content: "✚";
		}

		&:hover, &:focus {
			background-color: $color;
			color: white;
		}
	}

	.mv-move {
		$color: hsl(0, 0%, 30%);

		&::before {
			content: "≡";
		}

		&:hover, &:focus {
			background-color: $color;
			color: white;
		}
	}

	[mv-app]:not([mv-permissions~="delete"]) & .mv-delete,
	[mv-app]:not([mv-permissions~="add"]) & .mv-add {
		display: none;
	}
}

.mv-drag-handle {
	cursor: move;

	&:active, &:focus {
		cursor: grabbing;
	}
}

[mv-list-item] {
	position: relative;

	&.mv-highlight {  // basically &:has(> .mv-item-bar:hover)
		@include highlight(hsla(80, 50%, 50%, .25), "!important");
	}

	// Dragula styles
	&.gu-mirror {
		position: fixed !important;
		margin: 0 !important;
		z-index: 9999 !important;
		opacity: 0.8;
	}

	&.gu-transit {
		opacity: 0.2;
	}
}

.gu-hide {
	display: none !important;
}

.gu-unselectable {
	user-select: none !important;
}

button.mv-close {
	all: unset;
	float: right;
	width: 1.1em;
	padding-bottom: .1em;
	border: none;
	border-radius: 50%;
	margin: 0 0 0 1em;
	background: rgba(180, 0, 0, .6);
	color: white;
	font: bold 100%/1 sans-serif;
	cursor: pointer;
	text-align: center;

	&:hover {
		background: rgba(180, 0, 0, 1);
	}
}

:where([mv-app]) {
	[property].mv-multiline {
		white-space: pre-line;
	}

	button.mv-add {
		display: inline-block;
		vertical-align: middle;
	}

	// Is this really needed?!
	&:where(:not([mv-permissions~="add"])) button.mv-add {
		display: none;
	}

	&.mv-highlight-unsaved .mv-unsaved-changes {
		@include highlight(hsla(180, 50%, 50%, .25), "!important");
	}

	// Looking to change the hiding logic? Perhaps Primitive#empty is a better place
	.mv-empty:where(:not([mv-mode="edit"]):not(td):not(th)) {
		display: none;
	}

	&[mv-mode="edit"],
	[mv-mode="edit"] {
		.mv-empty {
			opacity: .5;
		}

		.mv-editor:focus {
			outline: none;
			box-shadow: 0 0 0 1px hsla(200,20%,60%,.5), 1px 1px .5em 1px rgba(0,0,0,.3) !important;
		}
	}

	&[mv-permissions~="login"] .mv-logged-in,
	&[mv-permissions~="logout"] .mv-logged-out {
		display: none;
	}
}

:where([mv-progress="Loading"]:not(.mv-no-hiding-during-loading)) [mv-list-item] {
	display: none;
}

[mv-progress] {
	&::after {
		content: attr(mv-progress) "…";
		content: var(--mv-progress-text, attr(mv-progress)) "…";
		position: fixed;
		z-index: 10;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		border: 1em solid transparent;
		border-bottom-width: .8em;
		padding-top: 3em;
		border-radius: .5em;
		background-image: $loader;
		background-repeat: no-repeat;
		background-color: rgba(0,0,0,.4);
		background-position-y: calc(50% - 1em);
		background-origin: padding-box;
		backdrop-filter: blur(3px);
		color: white;
		font-weight: bold;
		hyphens: none;
	}
}

// CSS Variables make it easier to track inherited attributes
[mv-mode="read"] { --mv-mode: read; }
[mv-mode="edit"] { --mv-mode: edit; }
[mv-mode=""]     { --mv-mode: initial; }

// Primitives
[property][mv-mode="edit"]:where(:not([typeof], [mv-group], [mv-list])) {
	.mv-editor:is(input, select, textarea):where(:not([type=range])) {
		all: unset;
		cursor: auto;
	}

	&:not(input, select, textarea):hover {
		@include highlight(hsla(58, 100%, 50%, .2));
	}

	textarea.mv-editor {
		display: block;
		box-sizing: border-box;
		width: 100%;
	}

	input.mv-editor {
		max-width: 100%;

		&[type="number"] {
			min-width: 3ch; /* If input is empty, we should still be able to see the controls */

			/* Do not hide spinner arrows */
			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				opacity: 1;
			}
		}
	}

	select.mv-editor {
		white-space: nowrap;
	}
}

// Specific styling per element type

meta[property][mv-mode="edit"],
link[property][mv-mode="edit"] {
	display: inline-block;
	padding: .15em .4em;
	border: 1px dashed;
	margin: 0 .2em;
	color: gray;
	font-weight: bold;

	&::before {
		content: attr(property);
	}
}

meter, progress {
	&[property][mv-mode="edit"] {
		cursor: ew-resize;
	}
}

.mv-toggle[property] {
	&:not([aria-checked="true"]):not([mv-mode="edit"]) {
		display: none;
	}

	&[mv-mode="edit"] {
		cursor: pointer;

		&:not([aria-checked]) {
			opacity: .5;
		}
	}
}

.mv-popup {
	all: initial;
	position: fixed;
	z-index: 100;
	padding: 1em;
	border: 1px solid rgba(0,0,0,.3);
	border-radius: .4em;
	margin: .3em 0 0 -.5em;
	box-shadow: 0 .1em .3em rgba(0,0,0,.3);
	background: white;
	transform-origin: 1.4em -0.45em; // Magic numbers. No idea why.
	transition: .3s;
	transition-property: transform, top, right, bottom, left;

	// tip
	&::before {
		content: "";
		position: absolute;
		top: -.36em;
		left: 1em;
		padding: .3em;
		border: inherit;
		border-right-width: 0;
		border-bottom-width: 0;
		background: inherit;
		transform: rotate(45deg)
	}

	&.mv-point-down {
		transform-origin: 1.4em calc(100% - 0.45em);

		&::before {
			top: auto;
			bottom: -.36em;
			border: inherit;
			border-left-width: 0;
			border-top-width: 0;
		}
	}

	& > fieldset {
		border: none;
		padding: 0;
	}

	&[hidden] {
		display: block;
		transform: scale(0);
	}

	input, select {
		display: block;
		font: inherit;
		min-width: 100%;
	}

	select[size] {
		border: 1px solid rgba(0,0,0,.2);
	}

	.mv-upload-popup {
		border: 2px dashed rgba(0,0,0,.1);
		padding: 1em;
		margin-top: .5em;

		&.mv-dragover {
			background: #cef;
		}

		input[type=file] {
			margin-top: .8em;
		}

		.mv-tip {
			color: rgba(0,0,0,.5);
			margin-top: .8em;
			font-size: 85%;

			&::before {
				content: "💡 ";
			}
		}
	}
}

.mv-dragover {
	outline: 2px dashed rgba(0, 0, 0, .3);
	outline-offset: -2px;
}

.mv-ui {
	a {
		color: inherit;
	}

	@media print {
		display: none !important;
	}
}

.mv-message {
	position: relative;
	padding: .5em 1em;
	border-radius: .3em;
	margin: 0;
	background: hsla(200, 100%, 87%, .8);
	--dark-color: #379;
	color: black;
	cursor: pointer;
	backdrop-filter: blur(2px);

	&::first-letter {
		text-transform: uppercase;
	}

	&::before {
		content: "Notice: ";
		text-transform: uppercase;
		font-size: 85%;
		font-weight: bold;
		color: var(--dark-color);
	}

	.mv-close {
		background: var(--dark-color);
		position: absolute;
		top: .5em;
		right: .5em;
		float: none;
	}

	@keyframes message-appear {
		from {
			transform: translateX(-50%) translateY(-10vh);
			opacity: 0;
		}
	}

	&:not(.mv-inline) {
		position: fixed;
		z-index: 3;
		top: 1em;
		left: 50%;
		transform: translateX(-50%);
		box-shadow: 0 .2em .2em rgba(0,0,0,.2);
		animation: message-appear .5s backwards;
		font-size: 120%;

		& + & {
			top: 4em;
			animation-delay: .5s;
		}

		& + & + & {
			top: 7em;
			animation-delay: 1s;
		}
	}

	@keyframes inline-message-appear {
		from {
			transform: scaleY(0);
			opacity: 0;
		}
	}

	&.mv-inline {
		margin-bottom: 1em;
		transform-origin: top;
		animation: inline-message-appear .5s backwards;
	}

	@supports (position: sticky) {
		@media (min-width: 600px) and (min-height: 500px) {
			&.mv-inline {
				position: sticky;
				z-index: 2;
				top: 3em;
			}
		}
	}

	form {
		margin: .5em 0;

		input, textarea, select, button {
			font: inherit;
			box-sizing: border-box;
		}

		textarea {
			width: 100%;
			height: 1.8em;
		}

		button {
			display: block;
			margin: auto;
		}
	}

	&.mv-warning {
		background: hsla(50, 100%, 85%, .9);

		&::before {
			content: "⚠️ Warning: ";
		}
	}

	&.mv-error {
		background: hsla(0,100%,85%,.9);
		color: hsl(0,100%,20%);
		--dark-color: hsl(0,50%,50%);

		&::before {
			content: "😳 Oh noes! ";
		}
	}

	&.mv-deleted {
		&::before {
			content: none;
		}

		button:not([class]) {
			margin-left: .5em;
		}
	}

	button:not([class]) {
		padding: .3em .5em;
	}
}

time[property]:where([aria-label][mv-mode="edit"].mv-empty:not([mv-edit-type="inline"], [mv-edit-type="self"]))::before {
	content: var(--mv-content, "(No " attr(aria-label) ")");
}

img[property]:where([mv-mode="edit"]:not([alt], [alt=""])) {
	&[src=""],
	&:not([src]) {
		min-width: 1.2em;
		min-height: 1.2em;
		background: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" fill="rgb(200,0,0)">\
			<text y="1em" font-size="90">🖼</text>\
			</svg>') center / contain no-repeat;
	}
}

@property --mv-length {
	syntax: "<length>";
	initial-value: 0;
	inherits: true;
}

.mv-container {
	display: contents !important;
}

select,
datalist {
	--mv-length: 1em;
}

optgroup:where(.mv-container) {
	& > option {
		padding-inline-start: 2px; /* Remove Firefox gap */

		/* Remove Chrome gap */
		&::before {
			content: none;
		}
	}

	:where(:root.mv-supports-atproperty) & {
		font-size: 0;
		--mv-length: inherit;

		& > * {
			--mv-length: inherit;
			font-size: var(--mv-length);
		}
	}
}


@import 'bar';