/* **************************************************
	VERSION: 1.0.0
	DESCRIPTION: Starlight Engine Tokens Sheet
***************************************************/

/* 
**************************************************
	IMPORTANT: Tokens
**************************************************
*/

/* =================FONT=================== */

:root, input, button {
	color: var(--canvas-surface-text);
	font-size: calc(var(--base-font-size) * 1);
	font-family: Segoe UI Variable Text, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media (min-width: 768px) {
	:root {
		--base-font-size: 16px;
	}
}

@media (max-width: 767px) {
	:root {
		--base-font-size: 16px;
	}
}

body, p, h1, h2, h3 {
	margin: 0;
	color: var(--canvas-surface-text);
	opacity: 1;
}

html {
	overflow-y: auto;
}

html, body {
	height: 100vh;
	background: var(--canvas-surface);
}

[hidden] {
	display: none !important;
}
[visible] {
	display: block !important;
}

/* =================CANVAS TOKENS=================== */
/* ---------- Eclipse (Default) ---------- */
[dataTheme="eclipse"] {
	--canvas-surface: #000000;
	--canvas-main: #0F0F0F;
	--canvas-panel: #191919;
	--canvas-card: #232323;

	--canvas-surface-border: #050505;
	--canvas-panel-border: #0A0A0A;
	--canvas-card-border: #121212;

	--canvas-surface-text: #B9B9B9;
	--canvas-panel-text: #B4B4B4;
	--canvas-card-text: #AFAFAF;

	--canvas-surface-text-muted: #969696;
	--canvas-panel-text-muted: #919191;
	--canvas-card-text-muted: #8C8C8C;
}

/* ---------- Twilight ---------- */
[dataTheme="twilight"] {
	--canvas-surface: #202020;
	--canvas-main: #272727;
	--canvas-panel: #2C2C2C;
	--canvas-card: #343434;

	--canvas-surface-border: #1D1D1D;
	--canvas-panel-border: #3B3B3B;
	--canvas-card-border: #232323;

	--canvas-surface-text: #E8E8E8;
	--canvas-panel-text: #DCDCDC;
	--canvas-card-text: #D0D0D0;

	--canvas-surface-text-muted: #C2C2C2;
	--canvas-panel-text-muted: #B8B8B8;
	--canvas-card-text-muted: #AFAFAF;
}

/* ---------- Radiance ---------- */
[dataTheme="radiance"] {
	--canvas-surface: #F0F0F0;
	--canvas-main: #FAFAFA;
	--canvas-panel: #F3F3F3;
	--canvas-card: #F8F8F8;

	--canvas-surface-border: #E1E1E1;
	--canvas-panel-border: #EBEBEB;
	--canvas-card-border: #F0F0F0;

	--canvas-surface-text: #0D0D0D;
	--canvas-panel-text: #121212;
	--canvas-card-text: #0D0D0D;

	--canvas-surface-text-muted: #898989;
	--canvas-panel-text-muted: #898989;
	--canvas-card-text-muted: #B0B0B0;
}

/* =================COMPONENT TOKENS=================== */
/* ---------- Elevation ---------- */
/* Depth and Shadow */
:root {
	--shadow-small: 0 0.10rem 0.15rem rgba(0, 0, 0, 0.25);
	--shadow-medium: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.25);
	--shadow-large: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);

	--shadow-inset-small: inset 0 0.05rem 0.20rem rgba(0, 0, 0, 0.2);
	--shadow-inset-medium: inset 0 0.1rem 0.25rem rgba(0, 0, 0, 0.25);
	--shadow-inset-large: inset 0 0.3rem 0.8rem rgba(0, 0, 0, 0.35);
}

/* ---------- Geometry ---------- */
/* ---Corner Radius --- */
:root {
	--radius-object: 4px;
	--radius-object-split-left: 4px 0 0 4px;
	--radius-object-split-right: 0 4px 4px 0;
	--radius-card: 8px;
	--radius-card-split-top: 8px 8px 0 0;
	--radius-card-split-bottom: 0 0 8px 8px;
	--radius-surface: 12px;

	--radius-surface-main-right: 12px 0 0 0;
	--radius-surface-main-left: 0 12px 0 0;
}

/* ---------- Controls ---------- */
/* --- Buttons --- */
:root {
	--button-radius: var(--radius-object);
}

[dataTheme="eclipse"]:root {
	/* Standard Button */
	--button-standard-fill: rgba(45, 45, 45, 1);
	--button-standard-fill-hover: rgba(55, 55, 55, 1);
	--button-standard-fill-active: rgba(50, 50, 50, 0.5);
	--button-standard-text: var(--canvas-surface-text);
	--button-standard-border: 1px solid rgba(20, 20, 20, 0.8);
	--button-standard-border-facet: 2px solid rgba(30, 30, 30, 0.9);
	--button-standard-border-hover: 1px solid rgba(20, 20, 20, 1);
	--button-standard-border-facet-hover: 2px solid rgba(30, 30, 30, 1);
	--button-standard-border-active: 1px solid rgba(20, 20, 20, 0.8);
	--button-standard-border-facet-active: 2px solid rgba(30, 30, 30, 0.2);

    --ripple-fill-neutral: rgba(65, 65, 65, 0.8);
    --ripple-fill-primary: rgba(45, 45, 45, 1);
	
	/* Subtle Button */
	--button-subtle-fill: rgba(25, 25, 25, 0);
	--button-subtle-fill-hover: rgba(35, 35, 35, 0.6);
	--button-subtle-fill-active: rgba(20, 20, 20, 0.3);
	--button-subtle-text: var(--canvas-surface-text);
	--button-subtle-border: 1px solid rgba(65, 65, 65, 0.5);

	--button-subtle-invert-fill: #181818;
	--button-subtle-invert-fill-hover: #282828;
	--button-subtle-invert-fill-active: var(--canvas-surface);
	--button-subtle-invert-text: var(--canvas-surface-text);
	--button-subtle-invert-border: 1px solid rgba(65, 65, 65, 0);

	/* Special Button */
	--button-special-fill: #004F99;
	--button-special-fill-hover: #0059AD;
	--button-special-fill-active: #0064C1;
	--button-special-text: var(--canvas-surface-text);
	--button-special-border: 0.04rem solid #105999;
	--button-special-border-facet: 0.04rem solid #0D4677;

	--ripple-special-fill-neutral: rgba(67, 147, 178, 1);
	--ripple-special-fill-primary: rgba(77, 168, 204, 1);

	/* Inputs / Text Fields */
	--input-radius: var(--radius-object);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: var(--canvas-surface);
	--input-fill-hover: #333333;
	--input-fill-active: #4C4C4C;
	--input-text: var(--canvas-surface-text);
	--input-placeholder: color-mix(in srgb, var(--canvas-surface-text) 50%, transparent);
	--input-border: 0.04rem solid #191919;
	--input-border-facet: 0.2rem solid #323232;
	--input-border-facet-hover: 0.2rem solid #0059AD;
	--input-border-facet-focus: 0.2rem solid #0064C1;

	/* Scrollbar */
	--canvas-scrollbar-thumb: #1E1E1E;
	--canvas-scrollbar-thumb-hover: #282828;
	--canvas-scrollbar-thumb-active: #141414;
}

[dataTheme="twilight"]:root {
    /* Standard Button */
	--button-standard-fill: rgba(60, 60, 60, 1);
	--button-standard-fill-hover: rgba(66, 66, 66, 1);
	--button-standard-fill-active: rgba(60, 60, 60, 0.5);
	--button-standard-text: var(--canvas-surface-text);
	--button-standard-border: 1px solid rgba(50, 50, 50, 0.8);
	--button-standard-border-facet: 2px solid rgba(65, 65, 65, 0.9);
	--button-standard-border-hover: 1px solid rgba(50, 50, 50, 1);
	--button-standard-border-facet-hover: 2px solid rgba(65, 65, 65, 1);
	--button-standard-border-active: 1px solid rgba(50, 50, 50, 0.4);
	--button-standard-border-facet-active: 2px solid rgba(65, 65, 65, 0.1);

	--ripple-fill-neutral: rgba(90, 90, 90, 0.8);
	--ripple-fill-primary: rgba(40, 40, 40, 1);
	
	/* Subtle Button */
	--button-subtle-fill: rgba(60, 60, 60, 0);
	--button-subtle-fill-hover: rgba(66, 66, 66, 0.6);
	--button-subtle-fill-active: rgba(60, 60, 60, 0.3);
	--button-subtle-text: var(--canvas-surface-text);
	--button-subtle-border: 1px solid rgba(65, 65, 65, 1);

	--button-subtle-invert-fill: #181818;
	--button-subtle-invert-fill-hover: #282828;
	--button-subtle-invert-fill-active: var(--canvas-surface);
	--button-subtle-invert-text: var(--canvas-surface-text);
	--button-subtle-invert-border: 1px solid rgba(85, 85, 85, 1);

	/* Special Button */
	--button-special-fill: #005FB8;
	--button-special-fill-hover: #0069CC;
	--button-special-fill-active: #0073E0;
	--button-special-text: var(--canvas-surface-text);
	--button-special-border: 0.04rem solid #146CBE;
	--button-special-border-facet: 0.04rem solid #0C4983;

    --ripple-special-fill-neutral: rgba(77, 168, 204, 1);
    --ripple-special-fill-primary: rgba(96, 205, 255, 1);

	/* Inputs / Text Fields */
	--input-radius: var(--radius-object);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: var(--canvas-surface);
	--input-fill-hover: #333333;
	--input-fill-active: #4C4C4C;
	--input-text: var(--canvas-surface-text);
	--input-placeholder: color-mix(in srgb, var(--canvas-surface-text) 50%, transparent);
	--input-border: 0.04rem solid #464646;
	--input-border-facet: 0.2rem solid #5A5A5A;
	--input-border-facet-hover: 0.2rem solid #0069CC;
	--input-border-facet-focus: 0.2rem solid #0073E0;

	/* Scrollbar */
	--canvas-scrollbar-thumb: #505050;
	--canvas-scrollbar-thumb-hover: #5A5A5A;
	--canvas-scrollbar-thumb-active: #464646;
	
}

[dataTheme="radiance"]:root {
	/* Standard Button */
	--button-standard-fill: rgba(245, 245, 245, 1);
	--button-standard-fill-hover: rgba(225, 225, 225, 1);
	--button-standard-fill-active: rgba(245, 245, 245, 1);
	--button-standard-text: var(--canvas-surface-text);
	--button-standard-border: 1px solid rgba(220, 220, 220, 0.8);
	--button-standard-border-facet: 2px solid rgba(200, 200, 200, 0.9);
	--button-standard-border-hover: 1px solid rgba(220, 220, 220, 1);
	--button-standard-border-facet-hover: 2px solid rgba(200, 200, 200, 1);
	--button-standard-border-active: 1px solid rgba(220, 220, 220, 0.8);
	--button-standard-border-facet-active: 2px solid rgba(200, 200, 200, 0.4);

	--ripple-fill-neutral: rgba(200, 200, 200, 0.8);
	--ripple-fill-primary: rgba(150, 150, 150, 1);
	
	/* Subtle Button */
	--button-subtle-fill: rgba(245, 245, 245, 0);
	--button-subtle-fill-hover: rgba(210, 210, 210, 0.5);
	--button-subtle-fill-active: rgba(200, 200, 200, 0.5);
	--button-subtle-text: var(--canvas-surface-text);
	--button-subtle-border: 1px solid rgba(220, 220, 220, 1);

	--button-subtle-invert-fill: #181818;
	--button-subtle-invert-fill-hover: #282828;
	--button-subtle-invert-fill-active: var(--canvas-surface);
	--button-subtle-invert-text: var(--canvas-surface-text);
	--button-subtle-border: 1px solid rgba(220, 220, 220, 0);

	/* Special Button */
	--button-special-fill: #005FB8;
	--button-special-fill-hover: #0069CC;
	--button-special-fill-active: #0073E0;
	--button-special-text: #EBEBEB;
	--button-special-border: 0.04rem solid #146CBE;

	--ripple-special-fill-neutral: rgba(77, 168, 204, 1);
	--ripple-special-fill-primary: rgba(96, 205, 255, 1);

	/* Inputs / Text Fields */
	--input-radius: var(--radius-object);
	--input-shadow: inset 0.10rem 0.10rem 0.20rem rgba(0,0,0,0.25);
	--input-fill: var(--canvas-surface);
	--input-fill-hover: #333333;
	--input-fill-active: #4C4C4C;
	--input-text: var(--canvas-surface-text);
	--input-placeholder: color-mix(in srgb, var(--canvas-surface-text) 50%, transparent);
	--input-border: 0.04rem solid #D5D5D5;
	--input-border-facet: 0.2rem solid #C1C1C1;
	--input-border-facet-hover: 0.2rem solid #0069CC;
	--input-border-facet-focus: 0.2rem solid #0073E0;

	/* Scrollbar */
	--canvas-scrollbar-thumb: #A0A0A0;
	--canvas-scrollbar-thumb-hover: #8C8C8C;
	--canvas-scrollbar-thumb-active: #C8C8C8;
}

/*  Ripple */
:root {
	--ripple-duration: 600ms;
}

/* =================USABILITY TOKENS=================== */

/* --- Acessibility --- */

[dataTheme="eclipse"] {
	--focus-ring: 0 0 0 2px #0082FF;
	--hover-accent: #60CDFF;
	--focus-accent: #005FB8;
}

[dataTheme="twilight"] {
	--focus-ring: 0 0 0 2px #0082FF;
	--hover-accent: #60CDFF;
	--focus-accent: #005FB8;
}

[dataTheme="radiance"] {
	--focus-ring: 0 0 0 2px #0082FF;
	--hover-accent: #005FB8;
	--focus-accent: #0046B7;
}

/* 
**************************************************
   IMPORTANT: COMMON COMPONENTS
**************************************************
*/

/* =================INPUTS================= */

input {
	width: -webkit-fill-available;
	width: -moz-available;
	padding: 0.5rem 0.5rem;
	margin: 0.25rem 0;
	position: relative;
	background: var(--input-fill);
	color: var(--canvas-surface-text);
	font-size: calc(var(--base-font-size) * 0.80);
	border: var(--input-border);
	border-bottom: var(--input-border-facet);
	border-radius: var(--radius-object);
	transition: background 0.2s ease, border 0.2s ease;
}

input:hover {
	border-bottom: var(--input-border-facet-hover);
	outline: none;
}

input:focus {
	/* background: var(--input-bg-active); */
	border-bottom: var(--input-border-facet-focus);
	outline: none;
}

input:autofill {
	background: var(--input-fill-active);
	background-color: none !important;
	border-bottom: 0.2rem solid var(--focus-accent);
	outline: none;
}

/* =================INPUTS================= */

select {
	padding: 10px;
	min-width: 125px;

	text-align: center;
	color: var(--canvas-panel-text);
	border: var(--button-subtle-border);
	border-radius: var(--radius-object);
	background-color: var(--button-standard-fill);

	box-shadow: var(--shadow-small);
	transition: 
		background-color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

select:hover {
	background-color: var(--button-standard-fill-hover);
}

/* Base checkbox container */
input[type="checkbox"] {
	width: 20px;
	height: 20px;
	position: relative;
	display: inline-block;
	background-color: var(--button-standard-fill);
	border: var(--button-standard-border);
	border-radius: 4px;
	box-shadow: var(--shadow-small);
	vertical-align: middle;
	cursor: pointer;
	accent-color: transparent;
	appearance: none;
	transition: all 0.15s ease-in-out;
}

/* Hover state */
input[type="checkbox"]:hover {
	background-color: var(--button-standard-fill-hover);
}

/* Focus outline */
input[type="checkbox"]:focus {
	outline-offset: 2px;
}

/* Checked state */
input[type="checkbox"]:checked {
	background-color: #357EC7;
}

/* Checkmark using pseudo-element */
input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border-right: 1px solid #D6D6D6;
	border-bottom: 1px solid #D6D6D6;
	transform: rotate(45deg);
}

/* Disabled state */
input[type="checkbox"]:disabled {
	opacity: 0.5;
	cursor: default;
}

/* =================BUTTONS================= */
/* Standard Button */
button[standard] {
	width: fit-content;
	min-width: 9rem;
	margin-top: 0.5rem;
	padding: 0.4rem 0.4rem;
	position: relative;
	background-color: var(--button-standard-fill);
	color: var(--canvas-surface-text);
	font-size: calc(var(--base-font-size) * 1);
	border-radius: var(--button-radius);
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out;
}

[dataTheme="eclipse"] button[standard], [dataTheme="twilight"] button[standard] {
	border: var(--button-standard-border);
	border-top: var(--button-standard-border-facet);
}

[dataTheme="radiance"] button[standard] {
	border: var(--button-standard-border);
	border-bottom: var(--button-standard-border-facet);
}

[dataTheme="eclipse"] button[standard]:hover, [dataTheme="twilight"] button[standard]:hover {
	background-color: var(--button-standard-fill-hover);
	border: var(--button-standard-border-hover);
	border-top: var(--button-standard-border-facet-hover);
}

[dataTheme="radiance"] button[standard]:hover {
	background-color: var(--button-standard-fill-hover);
	border: var(--button-standard-border-hover);
	border-bottom: var(--button-standard-border-facet-hover);
}

[dataTheme="eclipse"] button[standard]:active, [dataTheme="twilight"] button[standard]:active {
	color: color-mix(in srgb, var(--canvas-surface-text) 45%, transparent);
    background-color: var(--button-standard-fill-active);
	border: var(--button-standard-border-active);
	border-top: var(--button-standard-border-facet-active);
}

[dataTheme="radiance"] button[standard]:active {
	color: color-mix(in srgb, var(--canvas-surface-text) 45%, transparent);
	background-color: var(--button-standard-fill-active);
	border: var(--button-standard-border-active);
	border-bottom: var(--button-standard-border-facet-active);
}

button[standard].primary {
	background-color: var(--button-standard-fill);
	color: var(--canvas-surface-text);
}

button[standard].primary:hover {
	background-color: var(--button-standard-fill-hover);
}

button[standard].primary:active {
	background-color: var(--button-standard-fill-active);
}

/* Subtle Button */
button[subtle] {
	width: fit-content;
	min-width: 2rem;
	margin-top: 0.5rem;
	padding: 0.4rem 0.4rem;
	position: relative;
	background-color: var(--button-subtle-fill);
	border: none;
	border-radius: var(--button-radius);
	cursor: pointer;
	isolation: isolate;
	overflow: hidden;
	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out;
}

[dataTheme="eclipse"] button[subtle], [dataTheme="twilight"] button[subtle] {
	border: 1px solid transparent;
}

[dataTheme="radiance"] button[subtle] {
	border: 1px solid transparent;
}

[dataTheme="eclipse"] button[subtle]:hover, [dataTheme="twilight"] button[subtle]:hover {
	background-color: var(--button-subtle-fill-hover);
	border: var(--button-subtle-border);
}

[dataTheme="radiance"] button[subtle]:hover {
	background-color: var(--button-subtle-fill-hover);
	border: var(--button-subtle-border);
}

[dataTheme="eclipse"] button[subtle]:active, [dataTheme="twilight"] button[subtle]:active {
	color: color-mix(in srgb, var(--canvas-surface-text) 45%, transparent);
	background-color: var(--button-subtle-fill-active);
	border: var(--button-subtle-border);
}

[dataTheme="radiance"] button[subtle]:active {
	color: color-mix(in srgb, var(--canvas-surface-text) 45%, transparent);
    background-color: var(--button-subtle-fill-active);
	border: var(--button-subtle-border);
}

button[subtle].primary {
	background-color: var(--button-subtle-fill);
	color: color-mix(in srgb, var(--canvas-surface-text) 100%, transparent);
}

button[subtle].primary:hover {
	background-color: var(--button-subtle-fill-hover);
}

/* Special Button */
button[special] {
	width: fit-content;
	min-width: 9rem;
	margin-top: 0.5rem;
	padding: 0.4rem 0.4rem;
	position: relative;
	color: var(--button-special-text);
	font-size: calc(var(--base-font-size) * 1);
	background-color: var(--button-special-fill);
	border-radius: var(--button-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	isolation: isolate;
	overflow: hidden;
}

[dataTheme="eclipse"] button[special], [dataTheme="twilight"] button[special] {
	border: var(--button-special-border);
	border-top: var(--button-special-border-facet);
}

[dataTheme="radiance"] button[special] {
	border: var(--button-special-border);
	border-bottom: var(--button-special-border-facet);
}

button[special]:hover {
	background-color: var(--button-special-fill-hover);
}

button[special]:active {
	background-color: var(--button-special-fill-active);
}

button[special].primary {
	background-color: var(--button-special-fill);
	color: var(--canvas-surface-text);
}

button[special].primary:hover {
	background-color: var(--button-special-fill-hover);
}

button[special].primary:active {
	background-color: var(--button-special-fill-active);
}

/* =================BUTTON RIPPLE================= */

button[standard] .ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	pointer-events: none;
	background-color: var(--ripple-fill-neutral);
	animation: ripple-animation var(--ripple-duration) linear;
}

button[standard].primary .ripple {
	background-color: var(--ripple-fill-primary);
}

button[special] .ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	pointer-events: none;
	background-color: var(--ripple-special-fill-neutral);
	animation: ripple-animation var(--ripple-duration) linear;
}

button[special].primary .ripple {
	background-color: var(--ripple-special-fill-primary);
}

@keyframes ripple-animation {
	to {
		transform: scale(4);
		opacity: 0;
	}
}

/* 
**************************************************
   IMPORTANT: Scrollbar
**************************************************
*/

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	border: 4px solid transparent;
	border-radius: 6px;
	background-color: var(--canvas-scrollbar-thumb);
	background-clip: content-box;
	transition: background-color 0.2s, transform 0.2s;
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--canvas-scrollbar-thumb-hover);
}

::-webkit-scrollbar-thumb:active {
	background-color: var(--canvas-scrollbar-thumb-active);
	outline: none;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/* 
**************************************************
	IMPORTANT: Background
**************************************************
*/

/* ---------- Hyperlinks ---------- */

a[standard] {
	color: var(--canvas-surface-text);
	font-weight: 500;
	text-decoration: none;
	position: relative;
	transition: color 0.3s ease;
}

a[standard]:hover,
a[standard]:focus {
	color: var(--button-special-fill-hover);
}

a[standard]:active {
	color: var(--button-special-fill-active);
	transform: scale(0.94);
}

a[standard]::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 0.1rem;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}

a[standard]:hover::after,
a[standard]:focus::after {
	transform: scaleX(1);
}

/* 
**************************************************
	IMPORTANT: Card Boxes
**************************************************
*/

/* ---------- Standard CardBox ---------- */

.objectHomelinkCardBoxSectionTitle {
	margin: 0 0 5px 2px;
	font-size: calc(var(--base-font-size) * 0.85);
	font-weight: bold;
}

.objectHomelinkCardBoxSectionTitle:not(:first-child) {
	margin-top: 2rem;
}

.objectHomelinkCardBox {
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background-color: var(--canvas-card);
	border: 2px solid var(--canvas-card-border);
	border-radius: var(--radius-object);
}

.objectHomelinkCardBox:not(:last-child) {
	margin-bottom: 0.15rem;
}

.objectHomelinkCardBoxTitleIcon {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.objectHomelinkCardBoxTitleContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.objectHomelinkCardBoxTitle {
	font-size: calc(var(--base-font-size) * 1);
	font-weight: bold;
}

.objectHomelinkCardBoxSubtitle {
	font-size: calc(var(--base-font-size) * 0.75);
}

.objectHomelinkCardBoxIcon {
	padding: 0 1rem 0 0;
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position-y: center;
}

/* ---------- CardBox's Disabled for Mobile ---------- */

@media (max-width: 767px) {
	#objectHomelinkCardBoxSectionTitlePageLayout, #objectHomelinkCardBoxPageLayout {
		display: none;
	}
}

/* ---------- CardBox Icons ---------- */

html[dataTheme="eclipse"] #objectHomelinkCardBoxThemeIcon, html[dataTheme="twilight"] #objectHomelinkCardBoxThemeIcon {
	background-image: url('../icons/iconThemeDropdownDark.png');
}

html[dataTheme="radiance"] #objectHomelinkCardBoxThemeIcon {
	background-image: url('../icons/iconThemeDropdownLight.png');
}

html[dataTheme="eclipse"] #moduleBodyFramework[right] #objectHomelinkCardBoxLayoutIcon,
html[dataTheme="twilight"] #moduleBodyFramework[right] #objectHomelinkCardBoxLayoutIcon {
	background-image: url('../icons/iconSidebarRightDark.png');
}

html[dataTheme="radiance"] #moduleBodyFramework[right] #objectHomelinkCardBoxLayoutIcon {
	background-image: url('../icons/iconSidebarRightLight.png');
}

html[dataTheme="eclipse"] #moduleBodyFramework[left] #objectHomelinkCardBoxLayoutIcon,
html[dataTheme="twilight"] #moduleBodyFramework[left] #objectHomelinkCardBoxLayoutIcon {
	background-image: url('../icons/iconSidebarLeftDark.png');
}

html[dataTheme="radiance"] #moduleBodyFramework[left] #objectHomelinkCardBoxLayoutIcon {
	background-image: url('../icons/iconSidebarLeftLight.png');
}

/* ---------- StreamShare's CardBox Icons ---------- */

html[dataTheme="eclipse"] #objectHomelinkCardBoxStreamSharePitchSyncIcon, html[dataTheme="twilight"] #objectHomelinkCardBoxStreamSharePitchSyncIcon {
	background-image: url('../icons/iconStreamShareAudioTapeDark.png');
}

html[dataTheme="radiance"] #objectHomelinkCardBoxStreamSharePitchSyncIcon {
	background-image: url('../icons/iconStreamShareAudioTapeLight.png');
}