/**
 * @fileoverview
 * Component styles for GearTrain.
 * Ayu theme - Light and Mirage variants.
 */

/* ========================================
 * MARKDOWN VIEWER COMPONENT
 * ======================================== */

.markdown-viewer {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-size: var(--font-size-base);
	line-height: 1.6;

	&:not(.markdown-viewer--loaded) {
		min-height: 100px;
	}

	& h1,
	& h2,
	& h3,
	& h4,
	& h5,
	& h6 {
		margin-block-start: var(--space-6);
		margin-block-end: var(--space-3);
		font-weight: 600;
		line-height: 1.25;
	}

	& h1 {
		font-size: var(--font-size-2xl);
		padding-block-end: var(--space-2);
		border-block-end: var(--border-width-thick) solid var(--color-primary);
	}

	& h2 {
		font-size: var(--font-size-xl);
		padding-block-end: var(--space-2);
		border-block-end: var(--border-width) solid var(--color-border);
	}

	& h3 {
		font-size: var(--font-size-lg);
	}

	& p {
		margin-block: var(--space-4);
	}

	& a {
		color: var(--color-accent-ink);
		text-decoration: underline;

		&:hover {
			color: var(--color-accent-ink);
		}
	}

	& strong {
		font-weight: 600;
	}

	& em {
		font-style: italic;
	}

	& code {
		font-family: var(--font-mono);
		font-size: 0.9em;
		background-color: var(--color-surface);
		padding: var(--space-1) var(--space-2);
	}

	& pre {
		background-color: var(--color-surface);
		padding: var(--space-4);
		border: var(--border-width-thick) solid var(--color-border);
		overflow-x: auto;

		& code {
			background-color: transparent;
			padding: 0;
		}
	}

	& ul,
	& ol {
		padding-inline-start: var(--space-6);
		margin-block: var(--space-4);
	}

	& li {
		margin-block: var(--space-2);
	}

	& blockquote {
		padding: var(--space-3) var(--space-4);
		margin-block: var(--space-4);
		border-inline-start: var(--border-width-thick) solid var(--color-accent);
		background-color: var(--color-surface);
		color: var(--color-text-muted);
	}

	& table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);
		overflow: hidden;
		margin-block: var(--space-4);

		& th,
		& td {
			padding: var(--space-2) var(--space-3);
			border-bottom: var(--border-width) solid var(--color-border);
			border-right: var(--border-width) solid var(--color-border);
			text-align: left;
		}

		& th:last-child,
		& td:last-child {
			border-right: none;
		}

		& tr:last-child td {
			border-bottom: none;
		}

		& th {
			background-color: var(--color-surface);
			font-weight: 600;
		}
	}

	& hr {
		border: none;
		border-block-start: var(--border-width-thick) solid var(--color-border);
		margin-block: var(--space-6);
	}

	& .markdown-viewer__error {
		color: var(--color-error-ink);
		padding: var(--space-4);
		background-color: var(--color-surface);
		border: var(--border-width-thick) solid var(--color-error);
	}

	& .markdown-viewer__source {
		display: none;
	}
}

/* ========================================
 * BREADCRUMB COMPONENT
 * ======================================== */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-4);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);

	& a {
		color: var(--color-text-muted);

		&:hover {
			color: var(--color-text);
		}
	}

	& .breadcrumb__separator {
		opacity: 0.5;
	}

	& .breadcrumb__current {
		color: var(--color-text);
	}
}

/* ========================================
 * DIVIDER
 * ======================================== */

.divider {
	height: var(--border-width);
	background-color: var(--color-border);
	margin-block: var(--space-6);
}

/* ========================================
 * CARD COMPONENT
 * ======================================== */

.card {
	background-color: var(--color-surface);
	border: var(--border-width-thick) solid var(--color-border);
	border-radius: var(--radius);

	&.card-short {
		padding: var(--space-4);
	}

	&.card-blue {
		background-color: var(--color-card-blue);
		border-color: var(--color-primary);
	}

	&.card-accent {
		background-color: var(--color-card-accent);
		border-color: var(--color-accent);
	}
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-4);
	margin-block: var(--space-6);
}

/* ========================================
 * BADGE COMPONENT
 * ======================================== */

.badge {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--space-1);
	font-size: var(--font-size-xs);
	font-weight: 500;
	background-color: transparent;
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);

	&.badge-primary {
		color: var(--color-accent-ink);
		border-color: var(--color-primary);
	}

	&.badge-accent {
		color: var(--color-accent-ink);
		border-color: var(--color-accent);
	}

	&.badge-success {
		color: var(--color-success-ink);
		border-color: var(--color-success);
	}

	&.badge-error {
		color: var(--color-error-ink);
		border-color: var(--color-error);
	}

	&.badge-warning {
		color: var(--color-warning-ink);
		border-color: var(--color-warning);
	}
}

/* ========================================
 * TABLE COMPONENT
 * ======================================== */

.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--border-width-thick) solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--font-size-sm);

	& th,
	& td {
		padding: var(--space-2) var(--space-3);
		text-align: left;
		border-bottom: var(--border-width) solid var(--color-border);
		border-right: var(--border-width) solid var(--color-border);
	}

	& th {
		background-color: var(--color-surface);
		font-weight: 600;
	}

	& th:last-child,
	& td:last-child {
		border-right: none;
	}

	& tr:last-child td {
		border-bottom: none;
	}
}

/* ========================================
 * ALERT COMPONENT
 * ======================================== */

.alert {
	padding: var(--space-4);
	border: var(--border-width-thick) solid var(--color-border);
	border-radius: var(--radius);
	margin-block: var(--space-4);

	&.alert--error {
		border-color: var(--color-error);
		background-color: var(--color-surface);
	}

	&.alert--warning {
		border-color: var(--color-warning);
		background-color: var(--color-surface);
	}

	&.alert--success {
		border-color: var(--color-success);
		background-color: var(--color-surface);
	}
}

/* ========================================
 * FORM GROUP
 * ======================================== */

.form-group {
	margin-block-end: var(--space-4);

	& label {
		display: block;
		margin-block-end: var(--space-2);
		font-size: var(--font-size-sm);
		font-weight: 500;
		color: var(--color-text);
	}

	& input:not([type="radio"]):not([type="checkbox"]),
	& textarea,
	& select {
		width: 100%;
	}

	& textarea {
		max-width: 100%;
		font-family: var(--font-mono);
		resize: vertical;
	}
}

.form-helper {
	margin-block-start: var(--space-1);
	font-size: var(--font-size-xs);
	color: var(--color-text-muted);

	& code {
		background-color: var(--color-surface);
		padding: var(--space-1) var(--space-2);
	}
}

/* ========================================
 * BUTTON SIZE MODIFIER
 * ======================================== */

.btn-sm {
	padding: var(--space-1) var(--space-2);
	font-size: var(--font-size-xs);
}

/* ========================================
 * SEARCH COMPONENT
 * ======================================== */

.search-container {
	align-self: center;
	position: relative;
	margin-inline-start: auto;
	max-width: 400px;
}

.search-bar {
	display: flex;
	align-items: center;
	background-color: var(--color-surface);
	border: var(--border-width-thick) solid var(--color-border);
	border-radius: var(--radius);
	padding: var(--space-2);

	&:focus-within {
		border-color: var(--color-accent);
	}
}

.search-icon {
	font-size: var(--font-size-base);
	color: var(--color-text-muted);
	margin-inline-end: var(--space-2);
	pointer-events: none;
}

.search-input {
	width: 100%;
	background: transparent;
	border: none;
	padding: 0;
	color: var(--color-text);
	font-size: var(--font-size-sm);
	font-family: var(--font-base);

	&:focus {
		outline: none;
	}

	&::placeholder {
		color: var(--color-text-muted);
	}
}

.search-suggestions {
	position: absolute;
	top: 100%;
	inset-inline-start: -100px;
	width: 350px;
	max-height: 400px;
	overflow-y: auto;
	background-color: var(--color-surface);
	border: var(--border-width-thick) solid var(--color-border);
	margin-block-start: var(--space-1);
	display: none;

	&.is-visible {
		display: block;
	}
}

.search-result-item {
	padding: var(--space-3);
	cursor: pointer;
	border-block-end: var(--border-width) solid var(--color-border);

	&:last-child {
		border-block-end: none;
	}

	&:hover,
	&.is-selected {
		background-color: var(--color-surface-hover);
	}
}

.search-result-title {
	color: var(--color-text);
	font-weight: 500;
	font-size: var(--font-size-base);
	overflow-wrap: break-word;
	word-break: break-word;
}

.search-result-hierarchy {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	margin-block-start: var(--space-1);
	overflow-wrap: break-word;
	word-break: break-word;
}

.search-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-6);
	text-align: center;
	color: var(--color-text-muted);
	gap: var(--space-2);

	& .ph {
		font-size: var(--font-size-xl);
		opacity: 0.5;
	}

	& span {
		font-size: var(--font-size-sm);
	}
}