.field-checkbox,
.field-radio,
.field-switch {
	--field-checkbox-size: #{$field-checkbox-size};
	--field-checkbox-icon-size: #{$field-checkbox-size / 2};
	--var-bg-color: var(--info-color);

	&,
	> input[type="checkbox"],
	> input[type="radio"],
	.field-label {
		display: inline-flex;
		align-items: center;
	}

	> .field-label label {
		vertical-align: middle;
		cursor: pointer;
		font-weight: $font-weight-normal;
  	}
}

.field,
.field-select,
.field-select-multiple {
	--var-bg-color: #{$field-default-color};
	--var-text-color: var(--gray-700-color);
	--field-line-height: #{$field-line-height};
	--field-line-label-height: 0px;
	--field-line-helper-height: 0px;
	--field-icon-space: #{em($field-icon-space)};
	--field-icon-padding: #{em($field-icon-padding)};

	display: flex;
	flex-direction: column;
	position: relative;
	color: var(--var-bg-color);

	> .field-label {
		order: 1;
	}

	> .field-helper {
		order: 3;
		line-height: var(--field-line-helper-height);
		font-size: 14px;
	}

	> input,
	> textarea,
	> select {
		order: 2;

		&.round ~ .field-label,
		&.round ~ .field-helper {
			margin-left: var(--field-icon-padding);
			margin-right: var(--field-icon-padding);
		}
	}

	&.with-label {
		--field-line-label-height: var(--field-line-height);
	}

	&.with-helper {
		--field-line-helper-height: var(--field-line-height);
	}
}

.field,
.field-select {
	&.with-icon-right {
		> input,
		> select {
			padding-right: var(--field-icon-space) !important;
		}
		.icon-right {
			right: var(--field-icon-padding) !important;
		}
	}

	&.with-icon-left {
		> input,
		> select {
			padding-left: var(--field-icon-space) !important;
		}
		> .icon-left {
			left: var(--field-icon-padding) !important;
		}
	}

	&.with-icon-left .icon-left,
	&.with-icon-right .icon-right {
		position: absolute;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: inherit;
		top: calc(50% + var(--field-line-label-height) - var(--field-line-helper-height));
		transform: translateY(calc(-50% + (var(--field-line-helper-height) - var(--field-line-label-height)) / 2));
		z-index: 2;
	}
}

label {
	color: var(--gray-500-color);
	font-weight: var(--font-weight-title);
	line-height: var(--field-line-label-height);
}