@layer components {
	.btn,
	.button,
	.wp-element-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-xs);
		padding: var(--space-xs) var(--space-md);
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		font-weight: var(--fw-medium);
		line-height: 1;
		border-radius: var(--radius-md);
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		transition:
			background-color .2s ease,
			color .2s ease,
			border-color .2s ease,
			opacity .2s ease;
	}

	.btn:focus-visible,
	.button:focus-visible,
	.wp-element-button:focus-visible {
		outline-style: solid;
		outline-width: 2px;
		outline-offset: 2px;
	}

	.btn:disabled,
	.btn[aria-disabled="true"] {
		cursor: not-allowed;
		opacity: .6;
		pointer-events: none;
	}

	.btn[aria-busy="true"] {
		cursor: wait;
		pointer-events: none;
	}

	.btn[aria-busy="true"]::after {
		content: "";
		width: 1em;
		height: 1em;
		border-width: 2px;
		border-style: solid;
		border-radius: 50%;
		border-top-color: transparent;
		flex-shrink: 0;
		animation: spin .8s linear infinite;
	}

	.btn-outline {
		border-width: 1px;
		border-style: solid;
	}

	.btn-sm {
		padding: var(--space-xxs) var(--space-sm);
		font-size: var(--text-small-size);
	}

	.btn-lg {
		padding: var(--space-sm) var(--space-lg);
		font-size: var(--text-lead-size);
	}

	.btn-block {
		width: 100%;
	}

	.btn-loading {
		pointer-events: none;
		opacity: .8;
	}

	.btn-icon {
		padding: var(--space-xs);
		aspect-ratio: 1 / 1;
	}

	.btn-icon svg,
	.btn-icon i {
		width: 1em;
		height: 1em;
	}

	.btn-group {
		display: inline-flex;
	}

	.btn-group .btn {
		border-radius: 0;
	}

	.btn-group .btn:first-child {
		border-top-left-radius: var(--radius-md);
		border-bottom-left-radius: var(--radius-md);
	}

	.btn-group .btn:last-child {
		border-top-right-radius: var(--radius-md);
		border-bottom-right-radius: var(--radius-md);
	}
}