:root {
	--line-color: #ccc;
	--line-color-record: #eee;

	--type-background: #ddd;
	--type-foreground: #000;

	--label-first: #800033;
	--label-rest: #666;

	--label-background: #f8f8f8;
	--label-border: #ccc;

	--copy-color: #d48700;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

[onClick] {
	cursor: pointer;
}

label {
	user-select: none;
}

body {
	font-family: sans-serif;
	font-size: 12pt;
	margin-left: 32px;

	/* Boxed folders are a settings for the user. */
	&.boxed-folders {
		#records-tree {
			.folder {
				&>.label {
					background-color: var(--label-background);
					width: min-content;
					padding: 4px 8px;
					border-radius: 4px;
					border: 1px solid var(--label-border);
					margin-top: 8px;
				}

				&>.subfolders {
					margin-left: 18px;
					/* Default 10px */
					padding-bottom: 8px;
					min-height: 8px;

					&:empty {
						border-left: unset;
					}
				}

				&>.records {
					margin-left: 18px;
					/* Default 10px */

					&>img {
						padding-left: 12px;
					}
				}
			}
		}
	}
}

input,
select,
button {
	font-size: 1em;
	padding: 4px 8px;
}

#create-icon {
	position: absolute;
	top: 18px;
	right: 64px;
	width: 24px;
	cursor: pointer;
}

#settings-icon {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	cursor: pointer;
}

#records-tree {
	white-space: nowrap;

	.folder {
		padding-left: 32px;

		&.top-most {
			padding-left: 0px;
		}

		&.open {
			&>.label>img.open {
				display: block;
			}
		}

		&.closed {
			&>.label>img.closed {
				display: block;
			}

			&>.subfolders {
				display: none;
			}

			&>.records {
				display: none;
			}
		}

		&>.label {
			display: grid;
			grid-template-columns: min-content min-content 1fr;
			align-items: center;
			padding: 5px 0px;
			cursor: pointer;
			user-select: none;

			img {
				height: 20px;
				margin-right: 6px;
				display: none;
			}
		}

		&>.subfolders {
			border-left: 1px solid var(--line-color);
			margin-left: 10px;
		}

		&>.records {
			padding-left: 30px;
			margin-left: 10px;

			display: grid;
			grid-template-columns: repeat(3, min-content) 1fr;
			grid-gap: 4px 10px;
			align-items: center;
			border-left: 1px solid var(--line-color);

			&>img {
				display: block;
				padding-left: 4px;
			}

			.copy {
				color: var(--copy-color) !important;

				span {
					color: var(--copy-color) !important;
				}
			}

			.fqdn {
				cursor: pointer;
				user-select: none;
				display: flex;

				.subdomains {
					display: none;
				}

				&.match-subdomains {
					.subdomains {
						display: inline;
					}
				}

				.first-label {
					color: var(--label-first);
				}

				.rest-label {
					color: var(--label-rest);
				}
			}

			.type {
				background-color: var(--type-background);
				color: var(--type-foreground);
				padding: 4px 8px;
				border-radius: 4px;
				margin-top: 2px;
				margin-bottom: 2px;
				width: min-content;
				font-weight: bold;
				font-size: 0.85em;
			}

			.value {
				cursor: pointer;
				user-select: none;
			}

			.separator {
				grid-column: 1 / -1;

				&:not(:last-child) {
					border-bottom: 1px solid var(--line-color-record);
				}
			}

		}

	}
}

#record-dialog {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 8px;
	align-items: center;

	.buttons {
		grid-column: 1 / -1;
		text-align: right;
	}

}

#settings-dialog {
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-gap: 6px 8px;
	align-items: center;

	.buttons {
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 8px;
	}
}