@layer sitegraph {
    :root {
        --slsg-graph-bg-color: var(--slsg-graph-minimized-bg-color);
    }

    /* Ensures that override on specific element will still inherit proper accent/muted colors */
	.slsg-graph-component {
		--slsg-node-color-hover: var(--slsg-color-accent);
		--slsg-node-color-muted: var(--slsg-color-muted);

		--slsg-link-color-hover: var(--slsg-color-accent);
		--slsg-link-color-muted: var(--slsg-color-muted);

		--slsg-label-color: var(--slsg-text-color);
		--slsg-label-color-hover: var(--slsg-text-color-accent);
		--slsg-label-color-muted: var(--slsg-text-color-muted);
	}

	/* =================================== Graph Container Styling ============================================== */
	.slsg-graph-component {
		width: var(--slsg-graph-width);
		height: var(--slsg-graph-height);
	}

	.slsg-graph-container {
		position: relative;
		width: var(--slsg-graph-width);
		height: inherit;

		box-sizing: border-box;

		border-radius: 5px;
		background-color: var(--slsg-graph-bg-color);
		outline: 1px solid var(--slsg-graph-outline-color);

		canvas {
			width: inherit;
			height: inherit;
			border-radius: inherit;
		}
	}

	/* ========================================================================================================= */
	/* ====================================== Graph Stats Styling ============================================== */
	#slsg-graph-stats {
		position: fixed;
		bottom: 40px;
		right: 10px;
		z-index: 500;
		width: max(200px, 15vw, 15vh);
		height: max(100px, 6vh, 6vw);
		opacity: 0.6;
		user-select: none;
		cursor: pointer;
	}

	/* ========================================================================================================= */
	/* ====================================== Fullscreen Styling =============================================== */
	body[data-graph-blur='true'] {
		#starlight__sidebar {
			z-index: 0;
		}

		.header {
			z-index: 0;
		}

		.right-sidebar:not(:has(.slsg-is-fullscreen)) {
			z-index: 0;
		}
	}

	.slsg-background-blur {
		position: fixed;
		top: 0;
		left: 0;

		backdrop-filter: blur(4px);
        background-color: rgba(0, 0, 0, 0.1);

		width: 100%;
		height: 100%;

		z-index: 10;
	}

	.slsg-is-fullscreen {
		--slsg-graph-bg-color: var(--slsg-graph-maximized-bg-color);

		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1000;

		.slsg-graph-action-container svg {
			width: 24px;
			height: 24px;
		}
	}

	/* ========================================================================================================== */
	/* ====================================== Graph Action Styles =============================================== */
	.slsg-graph-action-container:not(:empty) {
		position: absolute;
		right: 0;

		display: flex;
		flex-direction: row;
		gap: 0.2rem;
		padding: 0.2rem 0.2rem 0.4rem 0.5rem;

		background-color: color-mix(in srgb, var(--slsg-graph-bg-color) 80%, transparent);
		border-radius: 0 4px 0 16px;
		backdrop-filter: blur(4px);
	}

	.slsg-graph-action-button.slsg-graph-action-button {
		display: flex;

		color: var(--slsg-graph-action-color);
		background-color: transparent;
		transition: background-color 0.3s ease, color 0.3s ease;

		border: unset;
		border-radius: 4px;

		margin-top: unset;

		padding: 0.2rem;
		opacity: 0.5;

		cursor: pointer;

		&:hover {
			color: var(--slsg-graph-action-color-hover);
			background-color: var(--slsg-graph-action-bg-color-hover);
		}

		svg {
			width: 16px;
			height: 16px;
		}
	}

	/* ========================================================================================================== */
	/* ======================================== Backlink Styling ================================================ */
	.slsg-backlinks {
		padding: 0;
		list-style: none;

		a.slsg-backlink {
			display: block;
			font-size: var(--slsg-text-xs);
			text-decoration: none;
			color: var(--slsg-text-color-accent);
			overflow-wrap: anywhere;

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

			--pad-inline: 0.5rem;
			border-radius: 0.25rem;
			padding-block: 0.25rem;
			padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
			line-height: 1.25;
		}
	}

	/* ========================================================================================================== */
	/* ====================================== Context Menu Styles =============================================== */
	.slsg-menu-container {
		position: fixed;
		z-index: 1000;
	}

	.slsg-menu {
		display: inline-flex;
		background-color: var(--slsg-context-menu-bg-color);
		border: 1px var(--slsg-context-menu-border-color) solid;
		border-radius: 10px;
		overflow: hidden;
		flex-direction: column;
		padding: 6px;
	}

	.slsg-menu-item {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 2px 4px;
		margin: 0 2px;
		border-radius: 4px;
		white-space: nowrap;
	}

	.slsg-menu-item:hover {
		background-color: var(--slsg-context-menu-bg-color-hover);
	}

	.slsg-menu-item-icon {
		display: flex;
	}

	.slsg-menu-item-icon svg {
		width: 20px;
		height: 20px;
	}

	.slsg-menu-item-title {
		font-weight: 600;
		font-size: var(--slsg-text-xs);
	}

	/* ========================================================================================================== */
	/* ======================================== Popup Menu Styling ============================================== */
	.slsg-popup-menu {
		position: fixed;
		z-index: 1000;
		right: 8px;
		top: 8px;

		background-color: color-mix(in srgb, var(--slsg-graph-bg-color) 90%, transparent);
		border: 1px solid var(--slsg-context-menu-border-color);
		border-radius: 8px;
		padding: 8px;

		overflow: hidden;

		backdrop-filter: blur(32px);

		.slsg-value-slider {
			display: flex;
			font-size: var(--slsg-text-xs);
			flex-wrap: wrap;

			.slsg-value-slider-text {
				display: flex;
				gap: 0.5rem;
			}

			.slsg-value-slider-label {
				font-weight: 900;
			}
		}
	}
}

.slsg-is-fullscreen {
    height: 90vh;
    width: 90vw;
}

@media (max-width: 1152px) {
    .slsg-is-fullscreen {
        height: 80vh;
        width: 80vw;
    }
}