/**
 * @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);
	}
}