/**
 * Stylesheet to append custom properties to for the block editor
 */

.wp-block {
	/**
	* Tables.
	*/
	table {
		background-color: #fcfcfc;
		border: 10px solid #fcfcfc;
		border-collapse: collapse;
		border-radius: calc(var(--wp--custom--border--radius) * 2);
		color: var(--wp--preset--color--contrast);
		margin: var(--wp--preset--spacing--30) 0;
		max-width: 100%;
		overflow: hidden;
		width: 100%;
	}

	th,
	td {
		vertical-align: top;
	}

	thead th,
	thead td,
	tbody th {
		font-family: var(--wp--custom--heading--font-family);
		font-weight: var(--wp--custom--heading--font-weight);
		text-align: left;
		vertical-align: bottom;
	}

	tbody td {
		vertical-align: middle;
	}

	tbody tr th:first-child,
	tbody tr td:first-child {
		border-bottom-left-radius: calc(var(--wp--custom--border--radius) * 2);
		border-top-left-radius: calc(var(--wp--custom--border--radius) * 2);
	}

	tbody tr th:last-child,
	tbody tr td:last-child {
		border-top-right-radius: calc(var(--wp--custom--border--radius) * 2);
		border-bottom-right-radius: calc(var(--wp--custom--border--radius) * 2);
	}

	tbody tr:nth-child(odd) th,
	tbody tr:nth-child(odd) td {
		background-color: #f5f5f5;
	}

	/**
	* Forms.
	*/
	label {
		font-family: var(--wp--custom--heading--font-family);
		font-weight: var(--wp--custom--heading--font-weight);
	}

	fieldset {
		border-color: var(--wp--preset--color--contrast-lighter);
		border-radius: var(--wp--custom--border--radius);
		border-style: solid;
		border-width: 1px;
		margin: var(--wp--preset--spacing--20) 0;
	}

	legend {
		font-family: var(--wp--custom--heading--font-family);
		font-weight: var(--wp--custom--heading--font-weight);
	}

	[type="text"],
	[type="password"],
	[type="email"],
	[type="url"],
	[type="tel"],
	[type="number"] {
		background-color: var(--wp--preset--color--base);
		background-clip: padding-box;
		border: 1px solid var(--wp--preset--color--contrast-lighter);
		border-radius: var(--wp--custom--border--radius);
		box-sizing: border-box;
		font-size: var(--wp--preset--font-size--18);
		line-height: 1;
		padding: calc(var(--wp--preset--spacing--10) / 2);
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		width: 100%;
	}

	input:focus,
	input:focus-visible {
		border-color: #80bdff;
		box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
		outline: thin dotted;
	}

	select {
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--contrast-lighter);
		border-radius: var(--wp--custom--border--radius);
		box-sizing: border-box;
		color: var(--wp--preset--color--contrast);
		padding: calc(var(--wp--preset--spacing--10) / 2);
		margin: 0;
		width: 100%;
		font-family: inherit;
		font-size: var(--wp--preset--font-size--18);
		cursor: inherit;
		line-height: 1.6;
		z-index: 1;
		outline: none;
		background-repeat: no-repeat;
		background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%), linear-gradient(135deg, currentcolor 50%, transparent 50%);
		background-position: right 15px top 1.3rem, right 10px top 1.3rem;
		background-size: 5px 5px, 5px 5px;
	}

	select::-ms-expand {
		display: none;
	}

	select:focus {
		border: 1px solid #80bdff;
		box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
		outline: thin dotted;
	}

	[type="submit"] {
		background-color: var(--wp--preset--color--tertiary);
		border-radius: var(--wp--custom--border--radius);
		border-width: 0;
		color: var(--wp--preset--color--base);
		cursor: pointer;
		display: inline-block;
		font-family: var(--wp--custom--heading--font-family);
		font-size: var(--wp--preset--font-size--18);
		font-weight: var(--wp--custom--heading--font-weight);
		line-height: 1;
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
		text-decoration: none;
		transition: background-color 0.25s ease-in-out;
	}

	[type="submit"]:hover {
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--base);
	}

}