.interface-complementary-area__fill:has(.spspc-shortcode-portal) {
	display: flex;
	flex-direction: column;
}
.spspc-shortcode-portal {
	background: #fff;
	border-bottom: 1px solid #ccc;
	flex-shrink: 0;
}

.spspc-shortcode-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;

	.spspc-shortcode-panel__intro {
		margin: 0;
		font: 400 13px/20px Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		color: #3d434b;
	}

	.spspc-shortcode-panel__link {
		color: #1a74e4;
		font-weight: 500;
		text-decoration: underline;

		&:hover,
		&:focus {
			color: #1565c0;
			border: none;
			box-shadow: none;
		}
	}

	.spspc-shortcode-panel__chip {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 8px 16px;
		background: #e7dff0;
		border: 1px solid #e0d0f1;
		border-radius: 2px;
		color: #3d434b;
		font: 400 14px/20px Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		cursor: pointer;
		text-align: left;
		box-shadow: none;
		transition: all .3s ease-in-out;

		&:hover,
		&:focus {
			background: #e0d0f1;
			outline: none;
		}
	}

	.spspc-shortcode-panel__code {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.spspc-shortcode-panel__copy {
		display: inline-flex;
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		color: #3d434b;

		&-text {
			color: green;
		}
	}
}