/* ==========================================================================
   Empty State
   ========================================================================== */

.wc-empty-state {

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 4rem 2rem;

	text-align: center;

	background: var(--wc-color-surface);

	border: 2px dashed var(--wc-color-border);
	border-radius: var(--wc-radius-lg);

}

.wc-empty-state--compact{

	padding:2rem 1.5rem;

}

.wc-empty-state__icon {

	display: flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	margin-bottom: 1.5rem;

	border-radius: 50%;

	background: rgba(184, 144, 91, .08);

	color: var(--wc-color-primary);

	flex-shrink:0;

}

.wc-empty-state__icon svg,
.wc-empty-state__icon i {

	width: 32px;
	height: 32px;

}

.wc-empty-state__title {

	margin: 0 0 .75rem;

	font-size: 1.4rem;
	font-weight: 700;

	color: var(--wc-color-text);

}

.wc-empty-state__description {

	max-width: 520px;

	margin: 0 0 2rem;

	font-size: .95rem;
	line-height: 1.7;

	color: var(--wc-color-text-light);

}

.wc-empty-state__actions {

	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;

	flex-wrap: wrap;

}

.wc-empty-state__actions .wc-button{

	min-width:160px;

}

/* ==========================================================================
   Sizes
   ========================================================================== */

.wc-empty-state--sm{

	padding:2rem 1rem;

}

.wc-empty-state--lg{

	padding:6rem 2rem;

}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:768px){

	.wc-empty-state{

		padding:2.5rem 1.25rem;

	}

	.wc-empty-state__icon{

		width:60px;
		height:60px;

		margin-bottom:1.25rem;

	}

	.wc-empty-state__icon svg,
	.wc-empty-state__icon i{

		width:28px;
		height:28px;

	}

	.wc-empty-state__title{

		font-size:1.2rem;

	}

	.wc-empty-state__description{

		font-size:.9rem;

		margin-bottom:1.5rem;

	}

	.wc-empty-state__actions{

		flex-direction:column;
		width:100%;

	}

	.wc-empty-state__actions .wc-button{

		width:100%;

	}

}