@layer library {
	button {
		background-color: inherit;
		border: none;
		cursor: pointer;
	}

	.main-cta {
		background-color: var(--brand-600);
		border: 1px solid var(--brand-600);
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
	}

	.main-cta:hover {
		background-color: var(--brand-700);
		border: 1px solid var(--brand-900);
	}

	.secondary-cta {
		border: 1px solid var(--grey-300);
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		background-color: var(--white);
		color: var(--grey-700);
	}

	.secondary-cta:hover {
		border: 1px solid var(--grey-400);
		background-color: var(--grey-100);
	}

	.create-cta {
		background-color: var(--success-500);
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		display: flex;
		align-items: center;
		gap: 0.25rem;
		color: var(--grey-50);
	}

	.delete-cta {
		background-color: var(--error-600);
		padding: 0.5rem 1rem;
		border-radius: 0.5rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--white);
		gap: 0.5rem;

		svg {
			height: 1.25rem;
			width: 1.25rem;
		}
	}
}