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

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

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

	--copy-color: #d48700;

	--header-line: #d0d0d0;

	--record-A: #89a02c;
	--record-AAAA: #2f4858;
	--record-CNAME: #f6ae2d;
	--record-FWD: #f26419;
	--record-TXT: #86bbd8;
	--record-NXDOMAIN: #aa0000;
	--record-other: #888;

	--record-hover: #fffff8;
}

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;
			padding-top: 8px;
			padding-bottom: 8px;

			margin-left: 10px;

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

			.header {
				font-weight: bold;
				font-size: 0.75em;
				background: #eee;
				padding: 2px 8px;
				border-left: 1px solid var(--header-line);
				border-top: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);

				&:first-child {
					grid-column: 1 / 3;
					border-top-left-radius: 4px;
				}

				&.last {
					border-right: 1px solid var(--header-line);
					border-top-right-radius: 4px;
				}
			}

			&>:not(.header) {
				height: 40px;
			}

			&>.record-icon {
				border-left: 1px solid var(--header-line);
				align-content: center;
				padding-left: 8px;
				border-bottom: 1px solid var(--header-line);

				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;
				padding: 0 16px 0 8px;
				border-bottom: 1px solid var(--header-line);
				height: 100%;
				align-items: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}

				&.created {
					* {
						color: #44aa00 !important;
						font-weight: bold;
					}
				}

				.subdomains {
					display: none;
				}

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

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

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

			.type {
				padding: 2px 8px;
				border-bottom: 1px solid var(--header-line);
				border-left: 1px solid var(--header-line);
				align-content: center;
				cursor: pointer;

				&.mouse-over {
					background-color: var(--record-hover);
				}

				div {
					background-color: var(--record-other);
					color: #fff;

					padding: 4px 8px;
					border-radius: 4px;
					width: min-content;
					height: min-content;
					font-weight: bold;
					font-size: 0.85em;
				}

				&.A div {
					background-color: var(--record-A);
				}

				&.AAAA div {
					background-color: var(--record-AAAA);
				}

				&.CNAME div {
					background-color: var(--record-CNAME);
					color: #000;
				}

				&.FWD div {
					background-color: var(--record-FWD);
				}

				&.TXT div {
					background-color: var(--record-TXT);
					color: #000;
				}

				&.NXDOMAIN div {
					background-color: var(--record-NXDOMAIN);
				}
			}

			.value {
				cursor: pointer;
				user-select: none;
				border-left: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);
				padding: 0px 8px;
				height: 100%;
				align-content: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}
			}

			.ttl {
				cursor: pointer;
				border-left: 1px solid var(--header-line);
				border-right: 1px solid var(--header-line);
				border-bottom: 1px solid var(--header-line);
				padding: 0px 8px;
				height: 100%;
				align-content: center;

				&.mouse-over {
					background-color: var(--record-hover);
				}
			}
		}

	}
}

#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;
	}
}