/*
 * Citizen - Graph
 * https://starcitizen.tools
*/

.skin-citizen {
	.vega {
		background: var( --color-surface-0 );
	}

	/* responsive layout */
	.mw-graph {
		min-width: auto !important;
		max-width: 100%;
		overflow: auto;

		canvas {
			filter: var( --filter-invert );
		}
	}
}

.client-js {
	.mw-graph-interactable {
		&:hover {
			.mw-graph-layover {
				background-color: var( --background-color-backdrop-light );
			}

			.mw-graph-switch {
				&.mw-graph-loading {
					background-color: var( --color-surface-0 );
				}

				&:hover {
					background-color: var( --color-surface-0 );
				}
			}
		}
	}

	.mw-graph-hover-title {
		background-color: var( --color-surface-0 );
	}

	/* common button style */
	.mw-graph-switch {
		color: var( --color-base );
		background-color: var( --background-color-backdrop-light );
		border-color: var( --border-color-base );

		&:hover {
			color: var( --color-progressive );
			background-color: var( --color-surface-0 );
			border-color: var( --color-progressive );
		}

		&:active {
			color: var( --color-progressive );
			background-color: var( --color-surface-0 );
			border-color: var( --color-progressive--active );
		}

		&:focus {
			border-color: var( --color-progressive );
			box-shadow: inset 0 0 0 1px var( --color-surface-0 );
		}

		/* Loading button style */
		&.mw-graph-loading {
			color: var( --color-subtle );
			background-color: var( --color-surface-0 );
			border-color: var( --color-progressive--active );

			&:hover {
				border-color: var( --color-progressive );
			}
		}
	}
}