/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-timefly-block-timefly {
	border: 2px dashed #e0e0e0;
	border-radius: 4px;
	padding: 16px;
	margin: 16px 0;
	position: relative;
	
	&.mode-show_until {
		border-color: #8b5cf6;
	}
	
	&.mode-show_from {
		border-color: #3b82f6;
	}
	
	&.mode-show_between {
		border-color: #06b6d4;
	}
	
	// Status-based borders (override mode colors when needed)
	&.status-error {
		border-color: #cc1818;
	}
	
	&.status-warning {
		border-color: #dba617;
	}
}

.timefly-editor-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -16px -16px 12px -16px;
	padding: 8px 12px;
	border-radius: 3px 3px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	
	// Mode-based header backgrounds (subtle, always visible)
	.mode-show_until & {
		background: rgba(139, 92, 246, 0.08);
	}
	
	.mode-show_from & {
		background: rgba(59, 130, 246, 0.08);
	}
	
	.mode-show_between & {
		background: rgba(6, 182, 212, 0.08);
	}
	
	.timefly-icon {
		font-size: 14px;
	}
	
	.timefly-mode {
		// Existing mode label styling
	}
	
	.timefly-timezone {
		// No flex property - let it size naturally to content
		text-align: center;
		font-size: 0.8rem;
		color: #ffe8db;
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		font-style: italic;
		opacity: 0.85;
		background: #2963cf;
		border-radius: 5px;
		padding: 4px 12px;  // Add padding instead of margin
		margin-left: auto;  // Push to the right side
		margin-right: 8px;  // Small gap before status pill
	}
	
	.timefly-status {
		margin-left: 0; // Changed from auto since timezone takes flex: 1
		padding: 6px 12px 6px 80px; 
		border-radius: 1.5rem; 
		display: flex;
		align-items: center;
		gap: 6px;
		
		svg {
			display: block;
		}
		
		&.status-info {
			color: #00a32a;
			background: rgba(0, 163, 42, 0.15);
		}
		
		&.status-warning {
			color: #dba617;
			background: rgba(219, 166, 23, 0.15);
		}
		
		&.status-error {
			color: #cc1818;
			background: rgba(204, 24, 24, 0.15);
		}
	}
}

.timefly-content {
	min-height: 40px;
	
	.wp-block {
		margin: 0;
	}
}

/* Alternating content tabs styling */
.timefly-content-tabs {
	.components-tab-panel__tabs {
		display: flex;
		gap: 4px;
		margin-bottom: 16px;
		
		.components-button {
			flex: 1;
			justify-content: center;
			border-radius: 4px;
			border: 1px solid #e0e0e0;
			background: #f8f9fa;
			
			&.is-active {
				background: #007cba;
				border-color: #007cba;
				color: white;
			}
		}
		
		.content-a-tab.is-active {
			background: #ff6b6b;
			border-color: #ff6b6b;
		}
		
		.content-b-tab.is-active {
			background: #4ecdc4;
			border-color: #4ecdc4;
		}
	}
	
	.components-tab-panel__tab-content {
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		padding: 16px;
		min-height: 100px;
	}
}

.timefly-content-area {
	&.content-content_a {
		border-left: 4px solid #ff6b6b;
		padding-left: 12px;
	}
	
	&.content-content_b {
		border-left: 4px solid #4ecdc4;
		padding-left: 12px;
	}
}

/* Notice styling adjustments */
.components-notice {
	margin: 12px 0;
	
	.components-notice__content {
		font-size: 13px;
	}
}

/* Inspector control spacing */
.components-panel__body {
	.components-base-control + .components-base-control {
		margin-top: 16px;
	}
	
	.components-datetime {
		margin-top: 8px;
	}
}