/**
 * @section Buttons
 */

@layer kelp.core {

	button,
	.btn,
	input:is(
		[type="button"],
		[type="reset"],
		[type="submit"]
	) {
		--background-color: var(--color-fill-vivid);
		--background-color-hover: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-hover));
		--background-color-active: color-mix(in oklab, var(--color-fill-vivid), var(--color-mix-active));

		--color: var(--color-on-vivid);
		--color-hover: var(--color-on-vivid);
		--color-active: var(--color-on-vivid);

		--border-color: transparent;
		--border-color-hover: transparent;
		--border-color-active: transparent;

		--gap: var(--size-4xs);
		--padding-block: var(--size-4xs);
		--padding-inline: var(--size-m);

		--decoration: none;
		--decoration-hover: none;

		background-color: var(--background-color);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius-s);
		color: var(--color);
		cursor: pointer;
		display: inline-flex;
		gap: var(--gap);
		align-items: center;
		font: inherit;
		font-size: var(--size-s);
		font-weight: 400;
		line-height: var(--line-height-xs);
		padding-block: var(--padding-block);
		padding-inline: var(--padding-inline);
		text-align: center;
		vertical-align: middle;
	}


	/**
	 * Buttons styled like links
	 * @deprecated .btn-link will be removed in the next major version of Kelp
	 */
	.btn-link,
	.link {
		--background-color: transparent;
		--background-color-hover: transparent;
		--background-color-active: transparent;

		--color: var(--color-text-link);
		--color-hover: var(--color-text-link-hover);
		--color-active: var(--color-text-link-hover);

		--font-weight: unset;
		--decoration: var(--decoration-text-link);
		--decoration-hover: var(--decoration-text-link-hover);

		text-decoration: var(--decoration);
		-webkit-text-decoration: var(--decoration);
	}

	/**
	 * Remove default button styles
	 */
	button,
	[type="submit"] {
	    appearance: none;
	}

}

@layer kelp.state {

	:where(
		button,
		.btn,
		input:is(
			[type="button"],
			[type="reset"],
			[type="submit"]
		)
	):hover {
		--background-color: var(--background-color-hover);
		--border-color: var(--border-color-hover);
		--color: var(--color-hover);
	}

	:where(
		button,
		.btn,
		input:is(
			[type="button"],
			[type="reset"],
			[type="submit"]
		)
	):is(:active, [data-active]) {
		--background-color: var(--background-color-active);
		--border-color: var(--border-color-active);
		--color: var(--color-active);
	}

	button[disabled],
	button[data-disabled],
	[data-submitting] button {
		--opacity: 0.7;
		box-shadow: none;
		cursor: not-allowed;
		opacity: var(--opacity);
		pointer-events: none;
	}

	/**
	 * @deprecated .btn-link will be removed in the next major version of Kelp
	 */
	.btn-link:hover,
	.link:hover {
		--decoration: var(--decoration-text-link-hover);
	}

}
