| 
				 | 
				
| Line 172: | 
Line 172: | 
 |    margin-bottom: var(--space-md);  |  |    margin-bottom: var(--space-md);  | 
 | }  |  | }  | 
 | 
  |  | 
 | /* Citizen Infoboxes */
  |  | 
 | .infobox {
  |  | 
 | 	margin-bottom: var(--space-md);
  |  | 
 | 	width: 100%;
  |  | 
 | 	max-width: 400px;
  |  | 
 | 	border: 1px solid var(--border-color-base);
  |  | 
 | 	border-radius: var(--border-radius-medium);
  |  | 
 | 	background-color: transparent;
  |  | 
 | 	font-size: var(--font-size-small);
  |  | 
 | 	line-height: var(--line-height-xx-small);
  |  | 
 | 	box-sizing: content-box;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox[open] {
  |  | 
 | 	background-color: var(--color-surface-1);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__content {
  |  | 
 | 	position: relative;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image {
  |  | 
 | 	position: relative;
  |  | 
 | 	margin-bottom: -2rem;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image::after {
  |  | 
 | 	content: '';
  |  | 
 | 	position: absolute;
  |  | 
 | 	left: 0;
  |  | 
 | 	right: 0;
  |  | 
 | 	bottom: 0;
  |  | 
 | 	height: 50%;
  |  | 
 | 	background-image: linear-gradient(
  |  | 
 | 		to bottom,
  |  | 
 | 		transparent,
  |  | 
 | 		var(--color-surface-1) 100%
  |  | 
 | 	);
  |  | 
 | 	pointer-events: none;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image,
  |  | 
 | .infobox__image::after,
  |  | 
 | .infobox__indicators {
  |  | 
 | 	transition-timing-function: var(--transition-timing-function-ease);
  |  | 
 | 	transition-duration: var(--transition-duration-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image {
  |  | 
 | 	transition-property: margin-bottom;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image::after {
  |  | 
 | 	transition-property: opacity, transform;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image:hover {
  |  | 
 | 	margin-bottom: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image:hover::after {
  |  | 
 | 	opacity: 0;
  |  | 
 | 	transform: translateY(2rem);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image:hover ~ .infobox__indicators {
  |  | 
 | 	opacity: 0;
  |  | 
 | 	transform: translateY(-2rem);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image img {
  |  | 
 | 	/* Prevent overflow */
  |  | 
 | 	max-width: 100%;
  |  | 
 | 	height: auto;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Provide background color for transparent SVGs */
  |  | 
 | .infobox__image img[src$='.svg'] {
  |  | 
 | 	background: #eaecf0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image-upload {
  |  | 
 | 	position: absolute;
  |  | 
 | 	bottom: var(--space-md);
  |  | 
 | 	left: 0;
  |  | 
 | 	right: 0;
  |  | 
 | 	z-index: 1;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image-upload > a {
  |  | 
 | 	display: flex;
  |  | 
 | 	margin: var(--space-md);
  |  | 
 | 	padding: var(--space-xs) var(--space-sm);
  |  | 
 | 	border-radius: var(--border-radius-base);
  |  | 
 | 	background: var(--color-surface-3);
  |  | 
 | 	color: var(--color-emphasized);
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | 	text-decoration: none;
  |  | 
 | 	justify-content: center;
  |  | 
 | 	align-items: center;
  |  | 
 | 	gap: var(--space-xs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image-upload > a .citizen-ui-icon {
  |  | 
 | 	width: 1rem;
  |  | 
 | 	height: 1rem;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image-upload > a:hover {
  |  | 
 | 	background: var(--color-surface-2--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__image-upload > a:active {
  |  | 
 | 	background: var(--color-surface-2--active);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__header {
  |  | 
 | 	/* Needed to stay on top of image fade */
  |  | 
 | 	position: relative;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__snippet,
  |  | 
 | .infobox__header,
  |  | 
 | .infobox__sectionHeader,
  |  | 
 | .infobox__sectionContent {
  |  | 
 | 	padding-left: var(--space-md);
  |  | 
 | 	padding-right: var(--space-md);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__snippet {
  |  | 
 | 	position: relative;
  |  | 
 | 	z-index: 1;
  |  | 
 | 	padding-top: var(--space-sm);
  |  | 
 | 	padding-bottom: var(--space-sm);
  |  | 
 | 	display: flex;
  |  | 
 | 	gap: var(--space-xs);
  |  | 
 | 	align-items: center;
  |  | 
 | 	white-space: nowrap;
  |  | 
 | 	cursor: pointer;
  |  | 
 | 	/* So that clicking the infobox summary won't highlight the text */
  |  | 
 | 	user-select: none;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__snippet:hover {
  |  | 
 | 	background-color: var(--background-color-button-quiet--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Might as well steal from skin */
  |  | 
 | .infobox__snippet .mw-ui-icon-wikimedia-collapse {
  |  | 
 | 	--transform-rotate-collapse: rotate3d(1, 0, 0, 180deg);
  |  | 
 | 	--size-icon: var(--font-size-small);
  |  | 
 | 	width: var(--font-size-small);
  |  | 
 | 	height: var(--font-size-small);
  |  | 
 | 	flex-shrink: 0;
  |  | 
 | 	transition: var(--transition-hover);
  |  | 
 | 	transition-property: transform;
  |  | 
 | 	transform: var(--transform-rotate-collapse);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox[open] .infobox__snippet .mw-ui-icon-wikimedia-collapse {
  |  | 
 | 	transform: none;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__snippet .infobox__desc {
  |  | 
 | 	max-width: 100%;
  |  | 
 | 	text-overflow: ellipsis;
  |  | 
 | 	overflow: hidden;
  |  | 
 | 	font-size: var(--font-size-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicators {
  |  | 
 | 	position: absolute;
  |  | 
 | 	top: 0;
  |  | 
 | 	right: 0;
  |  | 
 | 	display: flex;
  |  | 
 | 	justify-content: flex-end;
  |  | 
 | 	padding: var(--space-xs);
  |  | 
 | 	gap: var(--space-xxs);
  |  | 
 | 	transition-property: opacity, transform;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicator {
  |  | 
 | 	padding: var(--space-xxs) var(--space-xs);
  |  | 
 | 	background: var(--color-surface-2);
  |  | 
 | 	color: var(--color-base);
  |  | 
 | 	border-radius: var(--border-radius-base);
  |  | 
 | 	line-height: var(--line-height-xxx-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicator .infobox__data {
  |  | 
 | 	font-size: var(--font-size-x-small);
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* TODO: Add support for multiple badges */
  |  | 
 | .infobox__indicator.infobox__indicator--nopadding {
  |  | 
 | 	padding: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicator.infobox__indicator--red {
  |  | 
 | 	background-color: var(--background-color-destructive-subtle);
  |  | 
 | 	color: var(--color-destructive);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicator.infobox__indicator--yellow {
  |  | 
 | 	background-color: var(--background-color-warning-subtle);
  |  | 
 | 	color: var(--color-warning);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__indicator.infobox__indicator--green {
  |  | 
 | 	background-color: var(--background-color-success-subtle);
  |  | 
 | 	color: var(--color-success);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__header,
  |  | 
 | .infobox__sectionHeader {
  |  | 
 | 	line-height: var(--line-height-xxx-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__header {
  |  | 
 | 	margin-top: var(--space-md);
  |  | 
 | 	margin-bottom: var(--space-lg);
  |  | 
 | 	display: flex;
  |  | 
 | 	gap: var(--space-sm);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section,
  |  | 
 | .infobox__sectionHeader,
  |  | 
 | .infobox__sectionContent {
  |  | 
 | 	margin-top: var(--space-md);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__title,
  |  | 
 | .infobox__sectionTitle {
  |  | 
 | 	color: var(--color-emphasized);
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__title {
  |  | 
 | 	font-size: var(--font-size-x-large);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionSubtitle {
  |  | 
 | 	margin-top: 2px;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section + .infobox__section {
  |  | 
 | 	margin-top: var(--space-xl);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Use padding to prevent margin collapse when there is no footer */
  |  | 
 | .infobox__content > .infobox__section:last-child {
  |  | 
 | 	margin-bottom: 0;
  |  | 
 | 	padding-bottom: var(--space-md);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionTitle {
  |  | 
 | 	font-size: var(--font-size-medium);
  |  | 
 | 	display: flex;
  |  | 
 | 	align-items: center;
  |  | 
 | 	gap: var(--space-md);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionTitle:after {
  |  | 
 | 	content: '';
  |  | 
 | 	height: 1px;
  |  | 
 | 	flex-grow: 1;
  |  | 
 | 	background: var(--border-color-base);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionSubtitle {
  |  | 
 | 	color: var(--color-subtle);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionContent {
  |  | 
 | 	display: grid;
  |  | 
 | 	gap: var(--space-sm);
  |  | 
 | 	grid-template-columns: repeat(var(--infobox-grid-cols), minmax(0, 1fr));
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__sectionContent--has-cells {
  |  | 
 | 	gap: var(--space-xxs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item {
  |  | 
 | 	display: grid;
  |  | 
 | 	gap: 2px var(--space-xs);
  |  | 
 | 	grid-auto-rows: max-content;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-cell {
  |  | 
 | 	display: grid;
  |  | 
 | 	padding: var(--space-xs);
  |  | 
 | 	border: var(--border-base);
  |  | 
 | 	border-radius: var(--border-radius-base);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-cell.infobox__item--has-tooltip:hover {
  |  | 
 | 	background-color: var(--background-color-button-quiet--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-cell.infobox__item--positive {
  |  | 
 | 	background-color: var(--background-color-success-subtle);
  |  | 
 | 	color: var(--color-success);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-cell.infobox__item--negative {
  |  | 
 | 	background-color: var(--background-color-destructive-subtle);
  |  | 
 | 	color: var(--color-destructive);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-cell.infobox__item--null {
  |  | 
 | 	border-color: var(--border-color-subtle);
  |  | 
 | 	color: var(--color-subtle);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-range {
  |  | 
 | 	justify-content: space-between;
  |  | 
 | 	grid-template-areas:
  |  | 
 | 		'label data'
  |  | 
 | 		'bar   bar ';
  |  | 
 | 	gap: var(--space-xs);
  |  | 
 | 	grid-column: -1 / 1;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-range .infobox__label {
  |  | 
 | 	grid-area: label;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-range .infobox__data {
  |  | 
 | 	grid-area: data;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--is-range .infobox__bar {
  |  | 
 | 	grid-area: bar;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__item--hasIcon {
  |  | 
 | 	display: flex;
  |  | 
 | 	align-items: center;
  |  | 
 | 	column-gap: var(--space-sm);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__bar {
  |  | 
 | 	height: 4px;
  |  | 
 | 	border-radius: var(--border-radius-pill);
  |  | 
 | 	background-color: var(--color-surface-3);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__bar-item {
  |  | 
 | 	--infobox-bar-item-clip-path: polygon(
  |  | 
 | 		var(--infobox-bar-item-range-start) 0,
  |  | 
 | 		var(--infobox-bar-item-range-end) 0,
  |  | 
 | 		var(--infobox-bar-item-range-end) 100%,
  |  | 
 | 		var(--infobox-bar-item-range-start) 100%
  |  | 
 | 	);
  |  | 
 | 
  |  | 
 | 	height: 100%;
  |  | 
 | 	border-radius: var(--border-radius-pill);
  |  | 
 | 	background: linear-gradient(to right, transparent, var(--color-success));
  |  | 
 | 	clip-path: var(--infobox-bar-item-clip-path);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Should not be here, but it's a quick fix */
  |  | 
 | .infobox__item--is-range--temperature .infobox__bar-item {
  |  | 
 | 	background: linear-gradient(
  |  | 
 | 		to right,
  |  | 
 | 		var(--color-destructive),
  |  | 
 | 		var(--color-progressive)
  |  | 
 | 	);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__badge {
  |  | 
 | 	place-content: center;
  |  | 
 | 	text-align: center;
  |  | 
 | 	box-shadow: inset 0 0 0 1px var(--border-color-base);
  |  | 
 | 	border-radius: var(--border-radius-medium);
  |  | 
 | 	padding: var(--space-xs) var(--space-sm);
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | 	background-color: var(--color-surface-1);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__desc,
  |  | 
 | .infobox__label {
  |  | 
 | 	color: var(--color-subtle);
  |  | 
 | 	font-size: var(--font-size-x-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__label {
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--row .infobox__label,
  |  | 
 | .infobox__grid--row .infobox__desc {
  |  | 
 | 	font-size: var(--font-size-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__data {
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__icon img {
  |  | 
 | 	filter: var(--filter-invert);
  |  | 
 | 	opacity: var(--opacity-icon-base);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton {
  |  | 
 | 	position: relative;
  |  | 
 | 	padding: var(--space-sm) var(--space-md);
  |  | 
 | 	line-height: var(--line-height-xx-small);
  |  | 
 | 	gap: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton:hover {
  |  | 
 | 	background-color: var(--background-color-button-quiet--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton:hover .infobox__itemButtonArrow {
  |  | 
 | 	transform: rotate(90deg) translateY(-4px);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton:active {
  |  | 
 | 	background-color: var(--background-color-button-quiet--active);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton .infobox__text {
  |  | 
 | 	flex-grow: 1;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton .infobox__data {
  |  | 
 | 	color: var(--color-emphasized);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButtonLink a {
  |  | 
 | 	position: absolute;
  |  | 
 | 	inset: 0;
  |  | 
 | 	opacity: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton .infobox__icon {
  |  | 
 | 	margin-right: var(--space-sm);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButton .infobox__icon img {
  |  | 
 | 	width: 1.25rem;
  |  | 
 | 	height: 1.25rem;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__itemButtonArrow {
  |  | 
 | 	width: 1rem;
  |  | 
 | 	height: 1rem;
  |  | 
 | 	transition: var(--transition-hover);
  |  | 
 | 	transform: rotate(90deg);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__footer {
  |  | 
 | 	margin-top: var(--space-lg);
  |  | 
 | 	border-top: 1px solid var(--border-color-base);
  |  | 
 | 	background-color: var(--color-surface-1);
  |  | 
 | 	border-bottom-left-radius: var(--border-radius-medium);
  |  | 
 | 	border-bottom-right-radius: var(--border-radius-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__footer > .infobox__section {
  |  | 
 | 	margin: 0;
  |  | 
 | 	padding: var(--space-md);
  |  | 
 | 	display: grid;
  |  | 
 | 	gap: var(--space-xxs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__button {
  |  | 
 | 	position: relative;
  |  | 
 | 	border-bottom-left-radius: var(--border-radius-medium);
  |  | 
 | 	border-bottom-right-radius: var(--border-radius-medium);
  |  | 
 | 	padding: var(--space-sm) var(--space-md);
  |  | 
 | 	background-color: var(--color-progressive);
  |  | 
 | 	cursor: pointer;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__button:hover {
  |  | 
 | 	background-color: var(--color-progressive--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__buttonLabel {
  |  | 
 | 	display: flex;
  |  | 
 | 	justify-content: center;
  |  | 
 | 	align-items: center;
  |  | 
 | 	gap: var(--space-xs);
  |  | 
 | 	color: #fff;
  |  | 
 | 	font-weight: var(--font-weight-medium);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Fake button with link element */
  |  | 
 | .infobox__buttonLink {
  |  | 
 | 	position: absolute;
  |  | 
 | 	top: 0;
  |  | 
 | 	bottom: 0;
  |  | 
 | 	left: 0;
  |  | 
 | 	right: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__buttonLink a {
  |  | 
 | 	display: block;
  |  | 
 | 	height: 100%;
  |  | 
 | 	font-size: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__buttonCard {
  |  | 
 | 	position: absolute;
  |  | 
 | 	top: 100%;
  |  | 
 | 	left: 0;
  |  | 
 | 	right: 0;
  |  | 
 | 	z-index: -1;
  |  | 
 | 	border: 1px solid var(--border-color-base);
  |  | 
 | 	background-color: var(--color-surface-1);
  |  | 
 | 	border-radius: var(--border-radius-medium);
  |  | 
 | 	box-shadow: var(--box-shadow-drop-xx-large);
  |  | 
 | 	opacity: 0;
  |  | 
 | 	transition: var(--transition-menu);
  |  | 
 | 	transition-property: opacity, transform;
  |  | 
 | 	visibility: hidden;
  |  | 
 | 	transform: translateY(-20px);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__button:hover > .infobox__buttonCard {
  |  | 
 | 	z-index: 10;
  |  | 
 | 	opacity: 1;
  |  | 
 | 	visibility: visible;
  |  | 
 | 	transform: none;
  |  | 
 | 	cursor: auto;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__linkButton a {
  |  | 
 | 	padding: var(--space-xxs) var(--space-xs);
  |  | 
 | 	display: block;
  |  | 
 | 	border-radius: var(--border-radius-base);
  |  | 
 | 	text-decoration: none !important;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Hide external URL icon */
  |  | 
 | .infobox__linkButton a:after {
  |  | 
 | 	content: none;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__linkButton a:hover {
  |  | 
 | 	background-color: var(--background-color-button-quiet--hover);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__linkButton a:active {
  |  | 
 | 	background-color: var(--background-color-button-quiet--active);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--linkButtons > .infobox__sectionContent {
  |  | 
 | 	margin-bottom: var(--space-md);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--linkButtons .infobox__data {
  |  | 
 | 	margin-top: var(--space-xxs);
  |  | 
 | 	margin-left: -8px; /* negative space-xs */
  |  | 
 | 	margin-right: -8px; /* negative space-xs */
  |  | 
 | 	display: flex;
  |  | 
 | 	flex-wrap: wrap;
  |  | 
 | 	align-items: baseline;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__buttonLabel img[src$='.svg'] {
  |  | 
 | 	filter: invert(1);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | @media only screen and (max-width: 639px) {
  |  | 
 | 	.infobox {
  |  | 
 | 		margin-right: auto;
  |  | 
 | 		margin-left: auto;
  |  | 
 | 	}
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--actions .infobox__sectionContent {
  |  | 
 | 	padding-left: 0;
  |  | 
 | 	padding-right: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* TODO: Remove when footer is removed */
  |  | 
 | .infobox__section--hasBackground + .infobox__section--hasBackground,
  |  | 
 | .infobox__section--hasBackground + .infobox__footer {
  |  | 
 | 	margin-top: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--hasBackground .infobox__sectionContent {
  |  | 
 | 	margin: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--metadata .infobox__sectionContent {
  |  | 
 | 	padding: var(--space-md);
  |  | 
 | 	background: var(--color-surface-2);
  |  | 
 | 	line-height: var(--line-height-xxx-small);
  |  | 
 | 	gap: var(--space-xxs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--metadata .infobox__label,
  |  | 
 | .infobox__section--metadata .infobox__data {
  |  | 
 | 	font-size: var(--font-size-x-small);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--metadata .infobox__data {
  |  | 
 | 	word-break: break-word;
  |  | 
 | 	font-family: var(--font-family-monospace);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* CSS grid utility classes */
  |  | 
 | .infobox__grid--row {
  |  | 
 | 	--infobox-grid-cols: 1;
  |  | 
 | 	grid-auto-flow: column;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--cols-2 {
  |  | 
 | 	--infobox-grid-cols: 2;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--cols-3 {
  |  | 
 | 	--infobox-grid-cols: 3;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--cols-4 {
  |  | 
 | 	--infobox-grid-cols: 4;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--cols-5 {
  |  | 
 | 	--infobox-grid-cols: 5;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--cols-6 {
  |  | 
 | 	--infobox-grid-cols: 6;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--col-span-2 {
  |  | 
 | 	grid-column: span 2;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--col-span-3 {
  |  | 
 | 	grid-column: span 3;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--col-span-4 {
  |  | 
 | 	grid-column: span 4;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--col-span-5 {
  |  | 
 | 	grid-column: span 5;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--col-span-6 {
  |  | 
 | 	grid-column: span 6;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__grid--space-between {
  |  | 
 | 	justify-content: space-between;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* FloatingUI styles */
  |  | 
 | .infobox__indicator--nopadding .ext-floatingui-reference {
  |  | 
 | 	padding: var(--space-xxs) var(--space-xs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Tabber styles */
  |  | 
 | .infobox__section--tabber > .infobox__sectionHeader {
  |  | 
 | 	margin-bottom: var(--space-xxs);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--tabber > .infobox__sectionContent {
  |  | 
 | 	padding-left: 0;
  |  | 
 | 	padding-right: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Spacing is handled by tabber */
  |  | 
 | .infobox__section--tabber .infobox__sectionContent {
  |  | 
 | 	margin-top: 0;
  |  | 
 | 	margin-bottom: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--tabber .tabber .infobox__section {
  |  | 
 | 	margin-top: var(--space-sm);
  |  | 
 | 	margin-bottom: 0;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Increase top margin for nested tabber section */
  |  | 
 | .infobox__section--tabber .infobox__section.infobox__section--tabber {
  |  | 
 | 	margin-top: var(--space-xl);
  |  | 
 | }
  |  | 
 | 
  |  | 
 | .infobox__section--tabber .tabber__header {
  |  | 
 | 	margin-left: var(--space-xs);
  |  | 
 | 	margin-right: var(--space-xs);
  |  | 
 | 	box-shadow: none;
  |  | 
 | }
  |  | 
 | 
  |  | 
 | /* Match padding in the rest of the infobox */
  |  | 
 | .infobox__section--tabber .tabber__tab {
  |  | 
 | 	margin-left: var(--space-xs);
  |  | 
 | 	margin-right: var(--space-xs);
  |  | 
 | 	padding-left: 0;
  |  | 
 | 	padding-right: 0;
  |  | 
 | }
  |  | 
 | /* */
  |  |