@import './tokens.css';

@layer w1c.native {
	button,
	input,
	select,
	textarea {
		font: var(
			--w1c-control-font,
			var(--w1c-font-size-2, 13px) / var(--w1c-line-tight, 1.2) var(--w1c-font-ui, 'MS Sans Serif', Tahoma, sans-serif)
		);
	}

	button {
		color: var(--w1c-control-text);
		background: var(--w1c-control-background);
		border: var(--w1c-border-width-1) solid var(--w1c-control-dark-shadow);
		border-block-start-color: var(--w1c-control-highlight);
		border-inline-start-color: var(--w1c-control-highlight);
		box-shadow: var(--w1c-shadow-raised);
	}

	input,
	select,
	textarea {
		color: var(--w1c-control-text);
		background: var(--w1c-window-content-background);
		border: var(--w1c-border-width-1) solid var(--w1c-control-shadow);
		box-shadow: var(--w1c-shadow-sunken);
	}

	:focus-visible {
		outline: var(--w1c-border-width-1) dotted var(--w1c-focus-ring);
		outline-offset: 2px;
	}
}