.context {

	position: absolute;
	display: grid;
	top: 0;
	left: 0;
	padding: math.div($gutter, 2) 0;
	min-width: 210px;
	background: rgba($context, .98);
	border-radius: $radius;
	transform: translate(var(--x), var(--y));
	z-index: 3;
	opacity: 0;
	pointer-events: none;

	@supports (backdrop-filter: blur(10px)) {
		background: $context;
		backdrop-filter: blur(10px);
	}

	@media (max-width: 800px) {
		font-size: .9em;
	}

	&--fixed {
		position: fixed;
	}

	&--tooltip {
		max-width: 300px;
	}

	&--floating {
		border-radius: 12px;
	}

	&.visible {
		opacity: 1;
		pointer-events: all;
	}

	&__content {
		margin: 0;
		padding: math.div($gutter, 3) $gutter*1.2;
		font-size: .9em;
	}

	&__button {
		padding: math.div($gutter, 3) $gutter*1.2;
		color: currentColor;
		text-align: left;
		transition: color .3s ease, background .2s ease;
		line-height: 1.4;
		outline: none;

		&.active {
			color: $white;
		}

		&:focus,
		&:hover {
			background: $dimmed;
		}
	}

	&--floating &__button {
		margin: 0 math.div($gutter, 2);
		padding: math.div($gutter, 2) math.div($gutter, 1.6);
		color: $white;
		border-radius: $innerRadius;

		&.active {
			color: $primary;
		}
	}

	&__head {
		display: grid;
		grid-auto-flow: column;
		gap: $gutter;
		align-items: center;
		justify-content: space-between;
	}

	&__label {
		max-width: 240px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__description {
		padding-right: $gutter;
		font-size: .86em;
		color: $light;
	}

	&__separator {
		height: 1px;
		background: $dimmed;
		margin: math.div($gutter, 2) 0;
	}

}