{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/building-blocks/input/input-macros.njk" as input %}

{# ========================================================================== #}
{# :: Settings #}
{# ========================================================================== #}
{% set params = {
	isFullWidth: false,
	styleVendors: [],
	scriptVendors: [],
	order: 1,
	scope: "s-bp-input s-bp-input--inverted"
} %}

{# ========================================================================== #}
{# :: Info #}
{# ========================================================================== #}
{% set info %}

An input field similar to the default, the only thing that varies here are the
use of colors.

{% endset %}

{# ========================================================================== #}
{# :: Preview #}
{# ========================================================================== #}
{% set preview %}

	{{input.default("c-input--inverted", {
		label: { text: "Text input:" },
		id: "components-input-default-1",
		name: "components-input-default-1",
		input: { type: "text", placeholder: "placeholder" }
	})}}

	{{input.default("c-input--inverted", {
		label: { text: "E-mail input:" },
		id: "components-input-default-2",
		name: "components-input-default-2",
		input: { type: "email", placeholder: "placeholder" }
	})}}

	{{input.default("c-input--inverted", {
		label: { text: "Password input:" },
		id: "components-input-default-3",
		name: "components-input-default-3",
		input: { type: "text", placeholder: "placeholder" }
	})}}

	{{input.default("c-input--inverted", {
		label: { text: "Number input:" },
		id: "components-input-default-4",
		name: "components-input-default-4",
		input: { type: "number", min: "0", max: "10", step: "1", placeholder: "0" }
	})}}

	{{input.default("c-input--inverted", {
		label: { text: "Disabled input:" },
		isDisabled: true,
		id: "components-input-default-5",
		name: "components-input-default-5",
		input: { type: "text", placeholder: "placeholder" }
	})}}

{% endset %}

{# ========================================================================== #}
{# :: Code #}
{# ========================================================================== #}
{% set code %}

	{{input.default("c-input--inverted", {
		label: { text: "Text input" },
		id: "components-input-default-6",
		name: "components-input-default-6",
		input: { type: "text", placeholder: "placeholder" }
	})}}

{% endset %}