/* ------------------------------------------------------------ *\
	Field
\* ------------------------------------------------------------ */

.carbon-field { padding: 10px 12px 16px; margin: 0; }
.carbon-field .help-text { padding-top: 3px; font-style: normal; font-size: 12px; color: #767a7f; }

.carbon-field label { padding: 0 0 8px; font-weight: 600; }
.carbon-field input[type="text"],
.carbon-field input[type="number"],
.carbon-field textarea { display: block; padding: 4px 5px 3px; width: 100%; resize: vertical; }
.carbon-field select { width: 100%; }

.carbon-field .multiple-groups { margin-top: 6px; }
.carbon-field .carbon-required { color: $color-state-error; }

.carbon-field .carbon-field-group { display: table; width: 100%; }
.carbon-field .carbon-field-group-input { display: table-cell; width: 100%; vertical-align: top; }
.carbon-field .carbon-field-group-button { display: table-cell; width: 1%; vertical-align: top; }
.carbon-field .carbon-field-group-button .button { height: 27px; line-height: 25px; margin: 1px 0; font-size: 11px; text-align: center; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Set and Radio list */

.carbon-field p label input[type="checkbox"],
.carbon-field p input[type="checkbox"],
.carbon-field p input[type="radio"],
.carbon-field > input[type="checkbox"] { float: left; margin: 2px 8px 0 0; }

.carbon-field .carbon-radio-list,
.carbon-field .carbon-set-list { padding-top: 6px; }

.carbon-field .carbon-radio-list li,
.carbon-field .carbon-set-list p { position: relative; overflow: hidden; padding: 0 0 8px; margin: 0; }

.carbon-field .carbon-set-list label,
.carbon-field .carbon-radio-list label { font-weight: normal; padding: 0; }

.carbon-field .carbon-description:after { content: ''; display: block; clear: both; width: 100%; }

/*  Right-to-Left  */

.rtl .carbon-field-group { display: flex; align-items: stretch; }
.rtl .carbon-field-group .carbon-field-group-input { flex: 1 1 auto; width: auto; order: 2; }
.rtl .carbon-field-group .carbon-field-group-button { flex: 0 0 auto; width: auto; order: 1; }


@media screen and (max-width: $breakpoint-mobile-max) {
	.carbon-field .icon-button { min-width: 40px; height: 40px; }

	.carbon-preview .carbon-file-remove,
	.carbon-field .icon-button:before { font-size: 32px; line-height: 40px; }

	.carbon-field input[type="text"],
	.carbon-field input[type="number"],
	.carbon-field textarea,
	.carbon-field select { padding: 6px 10px; font-size: 16px; }

	.carbon-field .carbon-field-group-button .button { height: 34px; line-height: 22px; }
	.carbon-field select.carbon-field-group-input + .carbon-field-group-button .button { height: 35px; }

	.carbon-radio-list label,
	.carbon-set-list label { padding: 6px 0; line-height: 2.3; }
}