/**
 * Styled Group Block CSS
 *
 * These styles are for the editor preview where Tailwind may not be available
 */

/* Base styles for all groups */
.styled-group {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 20px;
	margin-top: 20px;
	overflow: hidden;
}

.styled-group-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}

/* Editor indicator */
.block-editor-block-list__block .styled-group {
	border: 1px dashed #ccc;
}

.block-editor-block-list__block .styled-group:before {
	content: "Styled Group";
	position: absolute;
	top: 0;
	left: 0;
	background: #007cba;
	color: white;
	font-size: 11px;
	padding: 2px 8px;
	border-bottom-right-radius: 4px;
	z-index: 10;
}

/* Style variants */
.styled-group.style-light-1 {
	background-color: #f8f9fa;
	color: #212529;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.styled-group.style-light-1:before {
	content: "Styled Group: Light 1";
}

.styled-group.style-light-2 {
	background-color: #ffffff;
	color: #212529;
	border: 1px solid #e9ecef;
	border-radius: 12px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.styled-group.style-light-2:before {
	content: "Styled Group: Light 2";
}

.styled-group.style-dark-1 {
	background-color: #343a40;
	color: #f8f9fa;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.styled-group.style-dark-1:before {
	content: "Styled Group: Dark 1";
}

.styled-group.style-dark-2 {
	background-color: #212529;
	color: #f8f9fa;
	border-radius: 12px;
	border: 1px solid #495057;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.styled-group.style-dark-2:before {
	content: "Styled Group: Dark 2";
}

.styled-group.style-highlight {
	background-color: #cdeaff;
	color: #1e2b36;
	border-left: 4px solid #4c8dfd;
	border-radius: 4px;
}

.styled-group.style-highlight:before {
	content: "Styled Group: Highlight";
}

/* Basic heading colors for each style */
.styled-group.style-light-1 h1,
.styled-group.style-light-1 h2,
.styled-group.style-light-1 h3 {
	color: #007bff;
}

.styled-group.style-light-2 h1,
.styled-group.style-light-2 h2,
.styled-group.style-light-2 h3 {
	color: #0062cc;
}

.styled-group.style-dark-1 h1,
.styled-group.style-dark-1 h2,
.styled-group.style-dark-1 h3 {
	color: #6ea8fe;
}

.styled-group.style-dark-2 h1,
.styled-group.style-dark-2 h2,
.styled-group.style-dark-2 h3 {
	color: #8bb9fe;
}

.styled-group.style-highlight h1,
.styled-group.style-highlight h2,
.styled-group.style-highlight h3 {
	color: #856404;
}

/* Spacing variants */
.styled-group.spacing-top-none { padding-top: 0; }
.styled-group.spacing-top-small { padding-top: 1rem; }
.styled-group.spacing-top-medium { padding-top: 3rem; }
.styled-group.spacing-top-large { padding-top: 5rem; }
.styled-group.spacing-top-x-large { padding-top: 8rem; }

.styled-group.spacing-bottom-none { padding-bottom: 0; }
.styled-group.spacing-bottom-small { padding-bottom: 1rem; }
.styled-group.spacing-bottom-medium { padding-bottom: 3rem; }
.styled-group.spacing-bottom-large { padding-bottom: 5rem; }
.styled-group.spacing-bottom-x-large { padding-bottom: 8rem; }

/* Responsive spacing adjustment */
@media (max-width: 768px) {
	.styled-group.spacing-top-large { padding-top: 3rem; }
	.styled-group.spacing-top-x-large { padding-top: 5rem; }

	.styled-group.spacing-bottom-large { padding-bottom: 3rem; }
	.styled-group.spacing-bottom-x-large { padding-bottom: 5rem; }
}