@import 'libs/vars';
@import 'libs/functions';

/* Utilities */
.text-fg {
	color: _palette(fg);
}

/* ==================== Selection Mode ==================== */

#selection-toolbar {
	position: fixed;
	bottom: _size(header);
	left: 0;
	width: 100%;
	background: rgba(31, 34, 36, 0.95);
	padding: 0.75em 1.5em;
	display: flex;
	align-items: center;
	gap: 1em;
	z-index: _misc(z-index-base) + 3;
	transform: translateY(100%);
	transition: transform 0.3s ease;
	box-sizing: border-box;

	&.visible {
		transform: translateY(0);
	}

	#sel-count {
		color: _palette(fg-bold);
		font-weight: _font(weight-extrabold);
		margin-right: auto;
		white-space: nowrap;
	}

	button {
		white-space: nowrap;
	}
}

body.selection-mode {
	#main .thumb {
		cursor: pointer;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 0.6em;
			left: 0.6em;
			width: 1.4em;
			height: 1.4em;
			border: 2px solid rgba(255, 255, 255, 0.7);
			border-radius: 3px;
			background: rgba(0, 0, 0, 0.4);
			z-index: 2;
			transition: all 0.2s ease;
			pointer-events: none;
		}

		&.selected {
			&::before {
				background: _palette(accent1);
				border-color: _palette(accent1);
			}

			.image {
				outline: 3px solid _palette(accent1);
				outline-offset: -3px;
			}
		}
	}
}

@media screen and (max-width: 736px) {
	#selection-toolbar {
		bottom: auto;
		top: _size(header);
		transform: translateY(-200%);
		padding: 0.5em 1em;
		gap: 0.5em;

		&.visible {
			transform: translateY(0);
		}

		button {
			font-size: 0.85em;
			padding: 0.4em 0.8em;
		}
	}
}

/* Footer */
#footer {
	.presentify {
		margin: 0 0 1.4em 0;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 1rem;
		align-items: center;

		.presentify-logo {
			display: flex;
			align-items: center;
			justify-content: center;
			a {
				display: flex;
				align-items: center;
				justify-content: center;
				border: 0;
			}

			img {
				width: 72px;
				height: 72px;
				display: block;
			}
		}

		.presentify-text {
			margin: 0;
		}
	}
}