/* ==========================================================================
   Buttons
   ========================================================================== */

.wc-button {

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

	padding: .75rem 1.25rem;

	border: 1px solid transparent;
	border-radius: var(--wc-radius-md);

	background: transparent;

	font-size: .95rem;
	font-weight: 600;
	line-height: 1;

	text-decoration: none;
	white-space: nowrap;

	cursor: pointer;
	user-select: none;

	transition:
		background-color .2s ease,
		color .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		transform .1s ease,
		opacity .2s ease;

}

.wc-button:hover {

	text-decoration: none;

}

.wc-button:active {

	transform: translateY(1px);

}

.wc-button:focus-visible {

	outline: none;

	box-shadow: 0 0 0 3px var(--wc-focus-ring);

}

.wc-button:disabled,
.wc-button--disabled {

	opacity: .6;

	cursor: not-allowed;
	pointer-events: none;

}

.wc-button:disabled:hover,
.wc-button--disabled:hover {

	transform: none;
	filter: none;

}

/* ==========================================================================
   Variants
   ========================================================================== */

.wc-button--primary {

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

	color: #fff;

}

.wc-button--primary:hover {

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

}

.wc-button--secondary {

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

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

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

}

.wc-button--secondary:hover {

	background: #EEF2F7;

}

.wc-button--outline {

	background: transparent;

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

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

}

.wc-button--outline:hover {

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

}

.wc-button--success {

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

	color: #fff;

}

.wc-button--success:hover {

	filter: brightness(.95);

}

.wc-button--danger {

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

	color: #fff;

}

.wc-button--danger:hover {

	filter: brightness(.95);

}

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

.wc-button--sm {

	padding: .55rem 1rem;

	font-size: .85rem;

}

.wc-button--lg {

	padding: .95rem 1.6rem;

	font-size: 1rem;

}

/* ==========================================================================
   Full Width
   ========================================================================== */

.wc-button--block {

	display: flex;

	width: 100%;

}

/* ==========================================================================
   Icon
   ========================================================================== */

.wc-button__icon {

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

	flex-shrink: 0;

}

.wc-button__icon svg,
.wc-button__icon i {

	width: 18px;
	height: 18px;

}

/* ==========================================================================
   Loading
   ========================================================================== */

.wc-button--loading {

	position: relative;

	pointer-events: none;

	color: transparent !important;

}

.wc-button--loading::after {

	content: "";

	position: absolute;

	width: 16px;
	height: 16px;

	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;

	border-radius: 50%;

	animation: wc-button-spin .8s linear infinite;

}

@keyframes wc-button-spin {

	to {

		transform: rotate(360deg);

	}

}