/* 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%;

	&[disabled] {
		@include aria-disabled;
	}
}

input,
textarea {
	// Border on select breaks firefox OS X quite nastily so we only apply it to input and textarea.
	// If you want a disabled border color you may want to also apply this to select and live with Firefox's ugliness.
	@include border($color: $wc-ui-color-border-form-control);
	padding: 1px;
}

input {
	&[type='checkbox'],
	&[type='radio'] {
		@include border($width: 0);
	}
}

/// 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;
}

// This wrapper is handy for positioning lists
.wc_input_wrapper {
	display: inline-block;
}
