@import "vars";
@import "helpers";

.panel {
	position: relative;
	margin: 16px 0 48px;
	padding: 8px;
	border-radius: 5px;

	@include surface;
	.panel {
		@include subsurface;
	}

	p {
		margin: 16px 8px;
	}

	> .icon:first-child {
		--icon-size: 24px;
		position: absolute;
		opacity: 0.2;
		top: 8px;
		left: 8px;
	}

	> h1, > h2, > h3, > h4, > h5, > h6 {
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		text-align: center;
		margin-top: 4px;

		font-size: 24px;
		line-height: 1;

		.icon {
			--icon-size: 24px;
			margin: 0 16px 0 0;
			opacity: 0.2;
		}

		&::after {
			content: "";
			flex: 1;
			margin: 0 16px;
			height: 0;
			border-bottom: 1px solid var(--on-surface);
			opacity: 0.2;
		}
	}
}