/* Reset */

/* or make a link type that resets and then builds with decorated etc */
a {
	color: inherit;
	text-decoration: none;
}

a.underlined {
	text-decoration: underline;
}

input,
button,
textarea,
select {
	font: inherit;
}

.input {
	border: 0;
	padding: 0.3em 4px;

	&:focus {
		outline: 0;
	}

	&.block {
		display: block;
		width: 100%;
	}

	&.bare {
		border: none;
	}

	&.large {
		font-size: 1.4em;
	}


	&.loose {
		padding-left: 10px;
		padding-right: 10px;
	}
}

textarea.input {
	resize: vertical;
}

/* Components */

.input-error {
	display: block;
	width: 100;
	background-color: white;
	color: red;
	padding: 4px;
}

.plaintext {
	white-space: pre-wrap;
}

.panel {
	max-width: 40em;
	padding: 15px;
	margin: 0 auto;
}

/* ========== BUTTON BASE STYLES ========== */
.btn {
	/* Reset defaults */
	border: none;
	background: none;
	font-family: inherit;
	cursor: pointer;

	/* Display & Layout */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	/* Sizing */
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	border-radius: 6px;

	/* Transitions for smooth interactions */
	transition: all 0.2s ease-in-out;

	/* Prevent text selection */
	user-select: none;

	/* Focus & accessibility */
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.btn:focus-visible {
	outline: 2px solid #3498db;
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ========== PRIMARY VARIANT ========== */
.btn--primary {
	background-color: #3498db;
	color: white;
	box-shadow: 0 2px 4px rgba(52, 152, 219, 0.2);
}

.btn--primary:hover:not(:disabled) {
	background-color: #2980b9;
	box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
	transform: translateY(-1px);
}

.btn--primary:active:not(:disabled) {
	background-color: #2471a3;
	transform: translateY(0);
}

/* ========== SECONDARY VARIANT ========== */
.btn--secondary {
	background-color: #ecf0f1;
	color: #2c3e50;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	border: 1px solid #bdc3c7;
}

.btn--secondary:hover:not(:disabled) {
	background-color: #d5dbdb;
	border-color: #95a5a6;
	transform: translateY(-1px);
}

.btn--secondary:active:not(:disabled) {
	background-color: #bdc3c7;
	transform: translateY(0);
}

/* ========== DANGER/ERROR VARIANT ========== */
.btn--danger {
	background-color: #e74c3c;
	color: white;
	box-shadow: 0 2px 4px rgba(231, 76, 60, 0.2);
}

.btn--danger:hover:not(:disabled) {
	background-color: #c0392b;
	box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);
	transform: translateY(-1px);
}

.btn--danger:active:not(:disabled) {
	background-color: #a93226;
	transform: translateY(0);
}

/* ========== SUCCESS VARIANT ========== */
.btn--success {
	background-color: #27ae60;
	color: white;
	box-shadow: 0 2px 4px rgba(39, 174, 96, 0.2);
}

.btn--success:hover:not(:disabled) {
	background-color: #229954;
	box-shadow: 0 4px 8px rgba(39, 174, 96, 0.3);
	transform: translateY(-1px);
}

.btn--success:active:not(:disabled) {
	background-color: #1e8449;
	transform: translateY(0);
}

/* ========== GHOST VARIANT ========== */
.btn--ghost {
	background-color: transparent;
	color: #3498db;
	border: 1px solid #3498db;
}

.btn--ghost:hover:not(:disabled) {
	background-color: #ecf0f1;
	border-color: #2980b9;
	color: #2980b9;
}

.btn--ghost:active:not(:disabled) {
	background-color: #d5dbdb;
}

/* ========== SIZE MODIFIERS ========== */
.btn--sm {
	padding: 6px 12px;
	font-size: 12px;
	border-radius: 4px;
}

.btn--lg {
	padding: 14px 24px;
	font-size: 16px;
	border-radius: 8px;
}

/* ========== FULL-WIDTH MODIFIER ========== */
.btn--block {
	display: flex;
	width: 100%;
}


/* Make a badge component */
/* plain has no background */
/* .icon {
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;

	display: inline-block;
} */
.badge {
	display: inline-block;
	margin-inline: 1ch;
	padding: 0.25ch 0.5ch;
	text-align: center;
	border-radius: 5px;

	svg {
		width: 1em;
		height: 1em;
		vertical-align: -0.1em;
	}

	&.plain {
		background: #ccc;
		color: white;
	}
}

/* svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  display: inline-block;
} */


/* layout in blocks */

.max-w-medium {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 32em;
}

.max-w-large {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 40em;
}

.center {
	text-align: center;
}

.note {
	background-color: white;
	border: 1px solid #aeaeae;
	border-radius: 10px;
	padding: 16px;
	margin: 20px 0;

	&>* {
		margin-bottom: 0.5rem;
		/* space between children */
	}

	&>*:last-child {
		margin-bottom: 0;
		/* avoid extra space at the end */
	}
}

/* Demo components */
.story-container {
	width: 600px;
	height: 100px;
	border: 1px solid red;
	overflow: auto;
	resize: both;

	.red {
		background-color: lightcoral;
	}

	.green {
		background-color: lightseagreen;
	}

	.blue {
		background-color: skyblue;
	}
}



/* theme */

:root {
	font-family: "Gill Sans", "Calibri", "Trebuchet MS", sans-serif;
	font-size: 16px;
}