/* wc.common.form.scss */
// This document contains general css styling for generic form components. Custom components have their own css files
@import 'mixins-common';

input,
select,
textarea {
	@include margin($size: 0);
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	max-width: 100%;

	@if ($wc-ui-color-error-bg != -1) {
		&[aria-invalid='true'] {
			background-color: $wc-ui-color-error-bg;
		}
	}

	&[disabled] {
		background-color: $wc-ui-color-disabled-bg;
	}
}

input,
textarea {
	// Border on select makes firefox OS X quite ugly but is better than any other option on all other UAs.
	@include border($color: $wc-ui-color-border-form-control);
	padding: 1px;
}

select {
	&[multiple],
	&[size] {
		@include border($color: $wc-ui-color-border-form-control);
	}
}

input {
	&[type='checkbox'],
	&[type='radio'] {
		@include border($width: 0);
		// NOTE: no need to remove the 1px padding.
	}
}

/// invalid
[aria-invalid='true'] {
	@include outline($color: $wc-ui-color-error-fg);
}

/// Disabled.
[disabled],
[aria-disabled='true'] {
	@include aria-disabled;
}

/// Read-only
/// Display and box sizing is to make them the more akin to the editable element (input, textarea or select).
.wc_ro {
	@include border-box;
	display: inline-block;
	max-width: 100%;
	word-wrap: break-word;
}
