/* 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 {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	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;
	}
}

@if ($wc-ui-color-border-form-control != -1) {
	input,
	select,
	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);
		@if ($wc-input-padding != -1) {
			@include border-box;
			padding: $wc-input-padding;
		}
	}

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

/// 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-break: break-all;
}

@import 'wc.common.buttons';
@import 'wc.common.label';
@import 'wc.common.fieldset';
