dialog.s3-explorer-modal {
	width: 90%;
	height: 90%;
	box-sizing: border-box;
	border: 1px solid;
	padding: 0;
	border-radius: 10px;

	& * {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	& input[type="submit"] {

		&,
		&.close {
			cursor: pointer;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			color: black;
			font-size: 100%;
			font-weight: bold;
			background: #f5f5f5;

			&:hover {
				background-color: #e0e0e0;
			}
		}
	}

	>form {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 10px;
		gap: 10px;
		margin: 0;

		>header {
			display: flex;
			justify-content: start;
			padding-bottom: 15px;
			gap: 8px;

			>input.close {
				margin-left: auto;
				opacity: 1;
			}
		}

		>main {
			flex: 1;
			display: flex;
			gap: 10px;
			justify-content: stretch;
			align-items: stretch;
			overflow: auto;

			>aside {
				overflow: auto;
				min-width: 300px;
				max-width: 40%;

				& ul {
					display: none;
					padding-left: 20px;
				}

				>ul,
				& ul:has(input[type="radio"]:checked),
				& label:has(input[type="radio"]:checked)+ul {
					display: block;
				}

				& li {
					&::marker {
						content: '▶ ';
						color: #aaa;
						font-size: 90%;
					}

					>label {
						padding: 4px 8px;

						>input[type="radio"] {
							display: none;
						}

						&:has(input[type="radio"]:checked) {
							background-color: #ddd;
						}
					}

					&:has(input[type="radio"]:checked)::marker {
						content: '▼';
						color: black;
						font-size: 120%;
					}
				}
			}

			>section {
				flex-grow: 1;
				display: flex;
				flex-wrap: wrap;
				overflow-y: auto;
				gap: 10px;
				border: 1px solid #ccc;

				>p {
					margin: auto;
					font-size: 120%;
					color: #666;
				}

				>label {
					display: flex;
					flex-direction: column;
					padding: 4px;
					align-self: self-start;

					>img {
						width: 100px;
						height: 100px;
						object-fit: contain;
					}

					>span {
						width: 100px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 90%;
						text-align: center;
					}

					>input[type="radio"] {
						display: none;
					}

					&:has(input[type="radio"]:checked) {
						background-color: #ddd;
					}
				}
			}
		}

		>footer {
			display: flex;
			justify-content: flex-end;

			>input[type="submit"] {
				background-color: #006ce7;
				color: white;

				&:hover {
					background-color: #0060ce;
				}
			}
		}
	}
}

dialog.s3-explorer-preview-modal {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 90%;
	max-height: 90%;
	box-sizing: border-box;
	border: 1px solid;
	padding: 10px;
	border-radius: 10px;

	>header {
		display: flex;
		gap: 10px;
		align-items: center;

		h2 {
			margin: 0;
			font-size: 1.2em;
		}

		button.close {
			/* position: absolute;
			top: 8px;
			right: 8px; */
			margin-left: auto;
			cursor: pointer;
			padding: 6px 12px;
			border: 1px solid #ccc;
			border-radius: 4px;
			color: black;
			font-size: 100%;
			font-weight: bold;
			background: #f5f5f5;
			opacity: 1;

			&:hover {
				background-color: #e0e0e0;
			}
		}
	}
}