@import '../date-input/date-input.less';
@import '../date-time-zone-picker/date-time-zone-picker.less';
@import '../dropdown/dropdown.less';
@import '../tag-input/tag-input.less';
@import '../less/variables/colors.less';
@import '../less/variables/typography.less';

// ^ Import the needed sub-component styles so consumers don't have to be aware
// of them. It's expected that all less object styles are available, though.

// Bootstrap override, of course
input.c-metadata-form__bulk-radio {
	&:not(:first-child) {
		margin-left: 10px;
	}
}

label.c-metadata-form__bulk-radio__label {
	cursor: pointer;
	font-family: @font-stack-main;
	font-weight: @font-weight-regular;
}

.c-metadata-form__add-or-remove__link {
	&.is-disabled {
		pointer-events: none;
	}
}

.c-metadata-form__add-or-remove__wrapper {
	&.is-disabled {
		cursor: not-allowed;
	}
}

.c-metadata-form__date-input {
	max-width: 260px;
	position: relative;
}

.c-metadata-form__array-row {
	align-items: center;
	display: flex;
	margin-bottom: 5px;
}

.c-metadata-form__array-row__input {
	flex-grow: 1;
}

.c-metadata-form__remove {
	padding: 0 10px;
	transition: color 0.25s;

	&:hover {
		color: @color-danger;
	}

	&.is-disabled {
		pointer-events: none;
	}
}

.c-metadata-form__array-row__remove {
	flex-grow: 0;
}

.c-metadata-form__object-group__remove {
	align-items: center;
	border-left: 1px dotted @color-gray-x-light;
	display: flex;
	margin-left: 10px;
}

.c-metadata-form__object {
	display: flex;
	flex-wrap: wrap;
}

.c-metadata-form__object-group {
	display: flex;
	flex-basis: 100%;
	margin-bottom: 20px;
}

@metadata-form-object-bottom-margin: 5px;

.c-metadata-form__object__labels {
	display: flex;
	flex-direction: column;
}

.c-metadata-form__object__label {
	align-items: center;
	display: flex;
	height: 34px;
	margin-right: 10px;

	&:not(:last-child) {
		margin-bottom: @metadata-form-object-bottom-margin;
	}
}

.c-metadata-form__object__values {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.c-metadata-form__object__value {
	position: relative;

	&:not(:last-child) {
		margin-bottom: @metadata-form-object-bottom-margin;
	}

	// Special positioning for "required" tags in object fields, since they're
	// stacked. We're not worried about overlap since required only appears if
	// the field is empty. If we support number/url fields we should create a
	// more specific solution here because they have other types of validation.
	& .o-text-validation {
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}

	& select + .o-text-validation {
		right: 25px;
	}

	&.is-unit-list {
		display: inline-block;
		width: 80px;
	}

	&.is-unit-list .o-text-validation {
		right: -156px;
	}

	&.is-unit-list::after {
		content: attr(data-after-content);
		position: absolute;
		right: -22px;
		top: 6px;
	}
}

.c-metadata-form__spinner {
	color: @color-gray-medium;
	position: absolute;
	right: 10px;
	top: 36px;
}