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

@mixin aria-disabled {
	// important to reset menu button etc rules which are VERY specific
	// scss-lint:disable ImportantRule
	color: $wc-ui-color-disabled-fg; // NOTE do not set background-color here for your own sanity
	cursor: default !important;
	outline: none !important;
	text-decoration: none !important;
}

select,
%select { //placeholder just to make scss-lint stfu
	@include border($color: $wc-ui-color-border-form-control); // breaks firefox OS X quite nastily but it is better than the other options with all other browsers
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	max-width: 100%;

	&[aria-invalid='true'] {
		background-color: $wc-ui-color-error-bg;
	}
}

input,
textarea {
	@extend %select;
	padding: 1px;
}

[type='checkbox'],
[type='radio'] {
	border: 0 none;
}

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

[role='combobox'][aria-invalid='true'] > input {
	background-color: $wc-ui-color-error-bg;
}

// DISABLED
[aria-disabled='true'] {
	@include aria-disabled;
}

input,
select,
textarea {
	&[disabled] {
		@include aria-disabled;
		background-color: $wc-ui-color-disabled-bg;
		border-color: $wc-ui-color-disabled-border;
	}
}

// Read-only: box sizing is to make them the same as the editable element (input, textarea or select).
.wc_ro {
	@include border-box;
	display: inline-block;
	max-width: 100%;
	word-wrap: break-word;
}
/* end wc.common.form.scss */
