/*
-------------------------------------------------------------------------------
Reset.
*/

* {
	background: none;
	border: 0;
	box-sizing: border-box;
	color: inherit;
	margin: 0;
}

/*
-------------------------------------------------------------------------------
Body.
*/

body, .dialog {
	background-attachment: fixed;
	background-image: linear-gradient(45deg, #8a96de 0%,#ddb1cf 50%,#fff5e1 100%);
	background-size: cover;
}

body {
	color: var(--color__body--fg);
	padding: var(--space__l);
}

main {
	background-color: #f3f3fd;
	border-radius: var(--border-radius__m);
	padding: var(--space__l);
}

/*
-------------------------------------------------------------------------------
Typography.
*/

body, button, input, select, textarea {
	font-family: var(--font-family__body);
	font-size: var(--font-size__body);
}

.textfield, .selectfield { font-family: var(--font-family__input); }
.textfield--rich { font-family: var(--font-family__body); }

h1, h2, h3 { font-family: var(--font-family__heading); }
h1 { font-size: var(--font-size__h1); }
h2 { font-size: var(--font-size__h2); }
h3 { font-size: var(--font-size__h3); }

h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child),
p:not(:last-child) { margin-bottom: var(--space__m); }

.ta--trailing { text-align: right; }

/*
-------------------------------------------------------------------------------
Stacks / Alignment.
*/

.hstack {
	display: flex;
	gap: var(--space__m);
}

.hstack--reverse { flex-direction: row-reverse; }

.wrap { flex-wrap: wrap; }

.ma--between { justify-content: space-between; }
.ma--center { justify-content: center; }
.ma--trailing { justify-content: flex-end; }

.ca--center { align-items: center; }

.scroll--x {
	overflow: hidden;
	overflow-x: auto;
}

/*
-------------------------------------------------------------------------------
Split View.
*/

@media screen and (min-width: 640px) {

	.splitview:not([hidden]) {
		display: grid;
		grid-gap: var(--space__m);
		grid-template-columns: 2fr 1fr;
	}
}

/*
-------------------------------------------------------------------------------
Menubar.
*/

.menubar {
	white-space: nowrap;
}

.menubar > *:not([hidden]) {
	display: block;
	padding: var(--space__m) var(--space__m);
}

.menubar > .selected {
	font-weight: bold;
	text-decoration: none;
}

/*
-------------------------------------------------------------------------------
Tabs.
*/

.tabs {
	background-color: #fff;
	border-radius: var(--border-radius__m);
	margin-bottom: var(--space__m);
}

/*
-------------------------------------------------------------------------------
Table.
*/

table {
	border-spacing: 0 var(--space__m);
	text-align: left;
	width: 100%;
}

th, td {
	padding: var(--space__m);
}

tbody tr {
	background-color: var(--color__body--bg);
	box-shadow: 0 1px 1px var(--color__shadow);
}

td.selected {
	background-color: var(--color__shadow);
}

/*
-------------------------------------------------------------------------------
Form.
*/

fieldset {
	border: 1px solid var(--color__border);
	border-radius: var(--border-radius__m);
	margin-bottom: var(--space__m);
	padding: var(--space__m);
}

.label {
	display: block;
	font-weight: bold;
}

.textfield, .selectfield {
	background-color: var(--color__input--bg);
	color: var(--color__input--fg);
	padding: var(--space__m);
}

.textfield {
	border: 1px solid var(--color__border);
	resize: vertical;
	width: 100%;
}

.textfield[size="2"] { width: 3rem; }

.selectfield {
	border: 1px solid var(--color__border);
	width: 100%;
}

/*
-------------------------------------------------------------------------------
Dialog.
*/

.dialog {
	bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
}

.dialog > * {
	background-color: #fff;
	border-radius: var(--border-radius__m);
	left: 50%;
	padding: var(--space__m);
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/*
-------------------------------------------------------------------------------
Button.
*/

.button {
	background-color: var(--color__button--bg);
	border-radius: var(--border-radius__m);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25);
	color: var(--color__button--fg);
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	padding: var(--space__m) var(--space__l);
	text-decoration: none;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .25);
	text-transform: uppercase;
}

.button:hover { text-shadow: 0 -2px 0 rgba(0, 0, 0, .25); }
.button:active { box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25); }

.button.good { background-color: var(--color__good); }
.button.bad { background-color: var(--color__bad); }

/*
-------------------------------------------------------------------------------
Notice.
*/

.notice {
	border-style: solid;
	border-width: 1px;
	border-radius: var(--border-radius__m);
	padding: var(--space__m);
}

.notice.good { color: var(--color__good); }
.notice.warn { color: var(--color__warn); }
.notice.bad { color: var(--color__bad); }

/*
-------------------------------------------------------------------------------
LWEdit.
*/

div[data-lwedit] {
	background-color: var(--color__input--bg);
	color: var(--color__input--fg);
	padding: var(--space__m);
}