/**
 * EmptyState — styles.
 */

@import '../../scss/variables';

.rank-math-ai-visibility-empty-state {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	text-align:      center;
	gap:             16px;
	padding:         100px 0;

	&__icon {
		width:           60px;
		height:          60px;
		border-radius:   $empty-state-icon-radius;  // 40 px (rounded rect, not full circle)
		background:      $empty-state-icon-bg;      // rgba(57, 116, 198, 0.10)
		padding:         $empty-state-icon-padding; // 10 px inner padding around SVG
		display:         flex;
		align-items:     center;
		justify-content: center;
		flex-shrink:     0;
		box-sizing:      border-box;

		// Icon SVG / WordPress Icon fills this container.
		svg {
			width:  $empty-state-icon-svg;
			height: $empty-state-icon-svg;
			fill:   $color-btn-primary;
		}
	}

	// ---------------------------------------------------------------------------
	// Heading
	// ---------------------------------------------------------------------------

	.rank-math-ai-visibility-empty-state__heading {
		margin:      0 0 8px 0;
		font-size:   $empty-heading-size;         // 28 px
		font-weight: $empty-heading-weight;       // 500
		line-height: $empty-heading-line-height;  // 34 px
		color:       $empty-heading-color;        // #1e1e1e
	}

	// ---------------------------------------------------------------------------
	// Description
	// ---------------------------------------------------------------------------

	.rank-math-ai-visibility-empty-state__description {
		margin: 0 0 15px 0;
		font-size: 16px;
		font-weight: 300;
		line-height: 23px;
		color: #868686;
		max-width: 580px;
	}

	// CTA button — sizing comes from the shared Button component (Button.scss).
	// No local overrides needed; the .rank-math-ai-visibility-btn class handles it.
	.components-button.rank-math-ai-visibility-btn.rank-math-ai-visibility-empty-state__cta {
		font-weight: 300;
	}
}