@import url("/reset.css");
@import url("/fonts/hd-colton/font.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Noto+Sans+Mono:wdth@75&display=swap");

:root {
	--font-family--locale--arabic: "Isep Misbah";
	--font-family--heading: var(--font-family--locale--arabic), "HD Colton", sans-serif;
	--font-family--body: var(--font-family--locale--arabic), "Noto Sans", sans-serif;
	--font-family--monospace: "Noto Sans Mono", monospace;
	--font--button--s: 600 0.875em var(--font-family--body);
	--font--button--m: 600 1em var(--font-family--body);
	--font--button--l: 600 1.125em var(--font-family--body);
	--font--chip: 0.875em var(--font-family--body);

	--transition-duration: 50ms;
	--dialog-transition-duration: 75ms;
}

:root {
	--text: hsl(244, 29%, 10%);
	--text-mute: hsl(244, 10%, 40%);
	--border: hsl(244, 10%, 40%);
	--border-mute: hsl(244, 10%, 70%);
	--background: hsl(240, 6%, 90%);
	--background-accent: hsl(240, 20%, 99%);
	--primary: hsl(212, 65%, 35%);
	--secondary: hsl(205, 65%, 80%);

	--link: var(--primary);

	--success: hsl(116, 84%, 29%);
	--error: hsl(0, 77%, 49%);

	--info: hsl(224, 85%, 32%);
	--important: hsl(266, 66%, 42%);
	--warning: hsl(34, 77%, 49%);
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--text: hsl(244, 29%, 90%);
		--text-mute: hsl(244, 10%, 60%);
		--border: hsl(244, 10%, 60%);
		--border-mute: hsl(244, 10%, 30%);
		--background: hsl(240, 6%, 1%);
		--background-accent: hsl(240, 5%, 15%);
		--primary: hsl(212, 50%, 65%);
		--secondary: hsl(205, 40%, 25%);

		--link: var(--primary);

		--success: hsl(116, 84%, 60%);
		--error: hsl(0, 77%, 55%);

		--info: hsl(224, 85%, 68%);
		--important: hsl(266, 66%, 58%);
		--warning: hsl(34, 77%, 51%);
	}

	#logo {
		filter: invert(96%) sepia(4%) saturate(2161%) hue-rotate(189deg) brightness(97%) contrast(90%);
	}
}

* {
	scroll-margin-top: calc(var(--top-navigation-height) + 1em);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family--body);
	background: var(--background);
	color: var(--text);
	height: 100%;
}

main {
	margin: auto;
	padding: 1em 1.5em;
	max-width: 700px;
}

span.material-symbols-outlined {
	font-size: 1.375em;
	user-select: none;
}

h1, h2, h3, h4, h5, h6 {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-family: var(--font-family--heading);
	font-weight: 500;
	font-stretch: extra-condensed;
} :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
	margin-top: 1em;
} :is(h1, h2, h3, h4, h5, h6):not(:last-child) {
	margin-bottom: 0.5em;
}

:is(h1, h2, h3, h4, h5, h6) span.material-symbols-outlined {
	font-size: 1.3125em;
}

:is(h1, h2, h3, h4, h5, h6) .link {
	position: absolute;
	display: flex;
	color: var(--text-mute);
	cursor: pointer;
	left: 0;
	text-decoration: none;
	border: none !important;
	opacity: 0;
	transition-property: rotate, scale, translate, opacity;
	transition-duration: var(--transition-duration);
	transition-timing-function: ease;
	translate: -90% 0;
} :is(h1, h2, h3, h4, h5, h6):hover .link {
	opacity: 1;
	translate: -100% 0;
} :is(h1, h2, h3, h4, h5, h6) .link:hover {
	rotate: -10deg;
	color: var(--primary);
} :is(h1, h2, h3, h4, h5, h6) .link:active {
	scale: 90%;
}

h1 {
	font-size: 2.441em;
}

h2 {
	font-size: 1.953em;
}

h3 {
	font-size: 1.563em;
}

h4 {
	font-size: 1.25em;
}

h5 {
	font-size: 1em;
}

h6 {
	font-size: 0.8em;
}

p {
	margin: 0;
	margin-bottom: 1em;
}

p, li {
	line-height: 175%;
}

a {
	color: var(--link);
	text-decoration: none;
}

hr {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border-mute);
  margin: 1em 0;
}

/** CODE */
code {
	font-family: var(--font-family--monospace);
	font-weight: 300;
}

/*- CODE BLOCK */
pre.code-block {
	padding: 0.5em 1em;
	background-color: transparent;
	border: 1px solid var(--border-mute);
	border-radius: 4px;
	overflow-x: auto;
	tab-size: 4;
}

/*- CODE SPAN */
code.code-span {
	padding: 0.15em 0.2em;
	border-radius: 0.25em;
	background-color: var(--background-accent);
}

/** BUTTONS */
button {
	display: inline-flex;
	align-items: center;
	border: none;
	margin: 0;
	gap: 4px;
	border-radius: 8px;
	cursor: pointer;
	transition-property: scale, rotate;
	transition-duration: var(--transition-duration);
	border: 1px solid var(--primary);

	/* MEDIUM */
	font: var(--font--button--m);
	padding: 0 16px;
	height: 40px;

	/* PRIMARY */
	background: var(--primary);
	color: var(--background);
}

button.secondary {
	background: transparent;
	color: var(--primary);
}

button.small {
	font: var(--font--button--s);
	padding: 0 12px;
	height: 32px;
}
button.large {
	font: var(--font--button--l);
	padding: 0 20px;
	height: 48px;
}

button span.material-symbols-outlined { font-size: 22px; }
button.small span.material-symbols-outlined { font-size: 19px; }
button.large span.material-symbols-outlined { font-size: 25px; }

button:enabled:focus-visible {
	outline: 2px dashed var(--primary) !important;
	border: 1px solid transparent;
}
button:enabled:hover { scale: 102%; }
button:enabled:active { scale: 98%; }

button.icon {
	justify-content: center;
	width: 40px;
}
button.icon.small { width: 32px; }
button.icon.large { width: 48px; }

button:disabled {
	filter: saturate(20%);
	cursor: not-allowed;
}

/*- FABS */
button.fab {
	position: absolute;
	width: 3.5em;
	height: 3.5em;
	border-radius: 1em;
	padding: 1em;
	box-shadow: 1px 0 8px 0 hsl(from var(--text) h s l / 20%);
	border-width: 0;
}

button.fab span.material-symbols-outlined {
	font-size: 1.5em;
}

/** CHIPS */
label.chip {
	display: inline-block;
	height: 24px;
	padding: 0 12px;
	border-radius: 8px;
	font: var(--font--chip);
	box-sizing: border-box;
	border: 1px solid var(--border);
	align-content: center;
	color: var(--text);
	transition:
		color var(--transition-duration),
		background-color var(--transition-duration),
		border-color var(--transition-duration),
		scale var(--transition-duration);
	user-select: none;
	cursor: pointer;
}

label.chip:has(input:checked) {
	border: 1px solid transparent;
	background: var(--secondary);
	color: var(--primary);
}

label.chip:hover { scale: 102%; }
label.chip:active { scale: 98%; }

/** SELECT INPUT */
label.select-input {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
label.select-input .label {
	font-size: small;
	color: var(--text-mute);
}
label.select-input select {
	padding: 0 12px;
	height: 32px;
	border-radius: 8px;
	background-color: transparent;
	border: 1px solid var(--border-mute);
	font: var(--font--chip);
} label.select-input select:hover {
	border: 1px solid var(--border);
}

/** INPUTS */
div.input-wrapper {
	display: flex;
	gap: .5em;
	align-items: center;
	border: 1px solid var(--border-mute);
	padding: .5em 1em;
	border-radius: 6px;
	position: relative;

	--error-message: "";
}

div.input-wrapper:has(.input-icon) {
	padding-left: 10px;
}

div.input-wrapper:has(input:focus),
div.input-wrapper:has(input:not(:placeholder-shown)),
div.input-wrapper:has(select) {
	background-color: var(--background-accent);
	border: 1px solid transparent;
	border-left: 1px solid var(--primary);
	border-radius: 0 6px 6px 0;
}

div.input-wrapper .input-icon,
div.input-wrapper .input-label {
	color: var(--text-mute);
}

div.input-wrapper label {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	user-select: none;
}

div.input-wrapper .input-label {
	position: absolute;
	transition-property: transform;
	transition-duration: 100ms;
	transform-origin: 0 50%;
}

div.input-wrapper label:has(:required) .input-label::after {
	content: '*';
	color: var(--error);
}

div.input-wrapper label:has(input:focus) .input-label,
div.input-wrapper label:has(input:not(:placeholder-shown)) .input-label,
div.input-wrapper label:has(select) .input-label {
	transform: translateY(-18px) scale(80%);
}

div.input-wrapper input {
	width: 100%;
}

div.input-wrapper:has(input:disabled) * {
	cursor: not-allowed;
	opacity: 80%;
}

div.input-wrapper::after {
	content: attr(data-error-message);
	color: var(--error);
	font-size: 0.8em;
	position: absolute;
	left: 0;
	bottom: -50%;
}

div.input-wrapper[data-error-message]:not([data-error-message=""]) {
	margin-bottom: 1.5em;
}

input {
	background-color: transparent;
	outline: none !important;
	border: none;
	padding: 0;
}

input::placeholder {
	color: transparent;
	opacity: 0;
}

select {
	background-color: transparent;
	border: none;
	width: 100%;
	padding: 0;
	outline: none !important;
}