@use '../../global';

.gallery {
	display: flex;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	z-index: 1300;
	background-color: rgb(0 0 0 / 0.5);

	&__topbar {
		padding: 1.25rem;

		&__search[type='text'] {
			@include global.input();
		}
	}

	&__bottombar {
		padding: 1.25rem;
		display: flex;
		align-items: center;
		justify-content: center;

		&__pagination {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			&__page {
				@media (prefers-color-scheme: dark) {
					color: rgb(209 213 219 / 1);
				}
			}
			&__prev,
			&__next {
				@include global.button();
			}
		}
	}

	&__container {
		display: flex;
		position: relative;
		background-color: #ffffff;
		border-radius: 0.25rem;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
		height: 95%;
		width: 95%;

		@media (prefers-color-scheme: dark) {
			background-color: #2c333a;
		}

		&__drag-overlay {
			display: flex;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 50;
			color: #ffffff;
			justify-content: center;
			align-items: center;
			background-color: rgb(72 146 234 / 0.8);
			font-size: 2.25rem;
			line-height: 2.5rem;

			@media (prefers-color-scheme: dark) {
				background-color: rgb(16 71 137 / 0.8);
				color: rgb(226 229 233 / 1);
			}
		}

		&__close-btn {
			position: absolute;
			top: 0;
			right: 0.5rem;
			padding: 0.5rem;
			font-size: 1.25rem;
			line-height: 1.75rem;
			cursor: pointer;

			@media (prefers-color-scheme: dark) {
				color: rgb(197 204 211 / 1);
			}
		}

		&__inner {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-start;
			flex: 1 1 0%;
		}

		&__file-container {
			display: flex;
			flex: 1 1 0%;
			justify-content: flex-start;
			align-items: center;
			padding: 1.25rem;
			gap: 1rem;
			width: 100%;

			&--has-files {
				flex-wrap: wrap;
				align-content: flex-start;
				overflow: auto;
			}

			&__empty {
				display: flex;
				padding: 2.5rem;
				font-size: 1.5rem;
				line-height: 2rem;
				text-align: center;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				border-radius: 0.5rem;
				border-width: 4px;
				border-style: dashed;
				border-color: rgb(197 204 211 / 1);
				color: rgb(88 102 116 / 1);

				@media (prefers-color-scheme: dark) {
					border-color: rgb(139 153 167 / 1);
				}
			}
		}

		&__selected-file-panel {
			display: flex;
			padding: 1.5rem;
			flex-direction: column;
			justify-content: space-between;
			align-items: stretch;
			width: 100%;
			max-width: 20rem;
			border-top-right-radius: 0.25rem;
			border-bottom-right-radius: 0.25rem;
			gap: 1.25rem;
			background-color: rgb(241 242 244 / 1);

			@media (prefers-color-scheme: dark) {
				background-color: rgb(33 38 43 / 1);
			}

			div &__save-btn {
				padding-top: 0.375rem;
				padding-bottom: 0.375rem;
				padding-left: 1.25rem;
				padding-right: 1.25rem;
				margin-top: 1rem;
				transition-property: background-color, border-color, color, fill, stroke,
					opacity, box-shadow, transform;
				color: #ffffff;
				font-size: 0.875rem;
				line-height: 1.25rem;
				border-radius: 0.25rem;
				cursor: pointer;
				background-color: #6ca7ee;

				&:hover {
					background-color: #4892ea;
				}

				@media (prefers-color-scheme: dark) {
					background-color: #104789;
					color: #e2e5e9;

					&:hover {
						background-color: #155fb7;
					}
				}
			}

			&__select-btn {
				padding-top: 0.375rem;
				padding-bottom: 0.375rem;
				padding-left: 1.25rem;
				padding-right: 1.25rem;
				transition-property: background-color, border-color, color, fill, stroke,
					opacity, box-shadow, transform;
				color: #ffffff;
				font-size: 0.875rem;
				line-height: 1.25rem;
				align-self: flex-end;
				border-radius: 0.25rem;
				cursor: pointer;
				background-color: #6ca7ee;

				&:hover {
					background-color: #4892ea;
				}

				@media (prefers-color-scheme: dark) {
					background-color: #424c57;
					color: #e2e5e9;

					&:hover {
						background-color: #155fb7;
					}
				}
			}
		}
	}
}