.section {
	padding: var(--dev-panel-spacing-md) var(--dev-panel-spacing-lg);
	border-bottom: 1px solid var(--dev-panel-border-color);

	&:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
		transition: var(--dev-panel-transition);
		padding: var(--dev-panel-spacing-sm) 0;
		//margin-bottom: var(--dev-panel-spacing-md);
		border-radius: var(--dev-panel-border-radius-md);

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

		&:focus {
			outline: 2px solid var(--dev-panel-accent-color);
			outline-offset: 2px;
		}

		&:focus:not(:focus-visible) {
			outline: none;
		}

		.title {
			font-size: var(--dev-panel-font-size-sm);
			font-weight: var(--dev-panel-font-weight-bold);
			color: var(--dev-panel-text-color);
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.toggle {
			color: var(--dev-panel-text-color-muted);
			transition: var(--dev-panel-transition);

			> svg {
				display: block;
				width: 16px;
				height: 16px;
				transition: transform var(--dev-panel-transition);

				&.collapsed {
					transform: rotate(90deg);
				}

				path {
					fill: currentColor;
				}
			}

			&:hover {
				color: var(--dev-panel-text-color);
			}
		}
	}

	.content {
		position: relative;
		padding-left: var(--dev-panel-spacing-md);
		margin-top: var(--dev-panel-spacing-md);
		display: grid;
		grid-template-columns: 100%;
		gap: var(--dev-panel-spacing-md);
		transition: opacity var(--dev-panel-transition-slow);

		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 2px;
			background: var(--dev-panel-border-color);
			border-radius: var(--dev-panel-border-radius-full);
		}

		&.collapsed {
			opacity: var(--dev-panel-opacity-50);
		}
	}
}
