/*
	Configure the spacing between elements.
 */

/* Define spacing variables. */

:root {
	/* Size of spaces in the block direction (usually vertical). */
	--spacing-block: 8px;

	/* Size of gaps in the inline direction (usually horizontal). */
	--spacing-inline: calc(var(--spacing-block) * 1.5);

	/* Size of borders. */
	--spacing-border: 2px;

	/* Size of the border of flat active elements. */
	--spacing-border-active: 4px;

	/* Border radius of most elements with a border. */
	--radius-border: var(--spacing-block);
}

/* Reset everything. */

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

/* Setup the outline. */

*:focus-visible {
	outline-offset: var(--spacing-border);
	outline-width: calc(var(--spacing-border) * 2);
	outline-style: solid;
}

/* Apply spacing to the appropriate elements. */

body {
	margin: 0;
	padding: var(--spacing-block) var(--spacing-inline);
}

hr {
	margin-block: var(--spacing-block);

	border-width: 0;
	border-style: dotted;

	/* Prefer using block-start, as block-end does not show otherwise. */
	border-block-start-width: var(--spacing-border);
}

ul, ol {
	padding-inline-start: 2ch;
}

details > summary + * {
	margin-block-start: var(--spacing-block);
}

details > :last-child {
	margin-block-end: var(--spacing-block);
}

/* Apply default spacing to interactable controls. */

input, textarea, button, select {
	padding: var(--spacing-block) var(--spacing-inline);
	border-radius: var(--radius-border);
}

/* Tune borders of the various interactable controls. */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="color"],
input[type="file"] {
	border-width: var(--spacing-border);
	border-style: outset;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="color"]:active,
input[type="file"]:active {
	border-style: inset;
}

select:not([multiple]),
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
	border-block-end-width: var(--spacing-border);
	border-style: dashed;
}

input[type="checkbox"],
input[type="radio"] {
	border-width: var(--spacing-border);
	border-style: outset;

	padding: var(--spacing-block);
}

input[type="checkbox"]:active,
input[type="radio"]:active,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
	border-style: inset;
}

input[type="checkbox"] {
	border-radius: 0;
}

input[type="checkbox"]::after {
	border-radius: 0;
}

input[type="radio"] {
	border-radius: 100%;
}

input[type="radio"]::after {
	border-radius: 100%;
}

textarea,
select[multiple] {
	border-inline-start-width: var(--spacing-border);
	border-style: dashed;
}

/* Add spacing after certain elements. */

.spacing-inline-start-half {
	margin-inline-start: calc(var(--spacing-inline) / 2);
}

.spacing-inline-end-half {
	margin-inline-end: calc(var(--spacing-inline) / 2);
}

.spacing-block-start-auto {
	margin-block-start: auto;
}

/* Configure panel spacing. */

.panel {
	padding: var(--spacing-block) var(--spacing-inline);

	border-radius: var(--radius-border);

	gap: var(--spacing-block);
}

.box {
	border-width: var(--spacing-border);
	border-style: solid;
}

/* Configure generic container spacing. */

.row,
.column,
.masonry {
	/*
		Block spacing looks nicer than inline spacing here because direct children of the row are never text elements.
	*/
	gap: var(--spacing-block);
}

/* Configure avatar border radius. */

.avatar-person {
	border-radius: 100%;
}

.avatar-organization {
	border-radius: var(--radius-border);
}

/* Configure navbar items spacing. */

nav ul {
	column-gap: calc(var(--spacing-inline) * 2 + var(--spacing-border));
	column-rule-width: var(--spacing-border);
	column-rule-style: dotted;

	/*
		Make sure to have the same margin .panel has.
		Since margin-inline is later set to auto by the layout, we cannot set it here.
		We can use padding instead, since the list has no border nor background.
		This has the added bonus of removing the default padding-inline-start of ul.
	*/
	padding-inline: var(--spacing-inline);
}

nav li {
	padding-block: calc(var(--spacing-block) / 4);
}

/* Configure the main content container spacing. */

main {
	gap: var(--spacing-block);
}

/* Configure footer items spacing. */

footer ul {
	/* Same as nav ul. */
	padding-inline: var(--spacing-inline);
}

footer li {
	border-inline-end-width: var(--spacing-border);
	border-inline-end-style: dotted;

	padding-inline: var(--spacing-inline);
}

footer li:last-child {
	border-inline-end-width: 0;
}