@import '../../../_common/scss/main';

.OrderInformationModalForm {
	display: flex;
	flex-direction: column;
	margin: 0 $gutter-large;

	&__AddressAutoComplete {
		display: flex;
		flex-direction: column;
		max-height: 65px;

		&__label {
			text-align: left;
			line-height: normal;
			font-size: $font-size-small;
		}

		&__input {
			padding: 6px 8px 6px 30px;
		}

		&__results {
			top: calc(100% - 4px);

			&--error {
				top: calc(100% - #{$gutter});
			}
		}
	}

	&__Cancel {
		margin-top: $gutter-small;
	}

	&__ConfirmTitle {
		text-align: left;
		margin-bottom: $gutter;
	}

	&__error {
		text-align: left;
		color: $error-color;
		line-height: normal;
	}

	&__Instructions {
		display: flex;
		flex-direction: column;

		&__label {
			position: relative;
			top: $gutter-extra-small;
			line-height: normal;
		}
	}

	&__OrderTimeSelector {
		display: flex;
		flex-direction: row;

		&__Wrap {
			display: flex;
			flex: auto;
		}

		&__Day,
		&__Time {
			flex: auto;
		}
	}

	&__OrderTypeToggle {
		margin: $gutter-large 0;
	}

	&__Title {
		margin-bottom: 0;

		&__Container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}

	&__Unit {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		&__label {
			position: relative;
			top: $gutter-extra-small;
			line-height: normal;
		}

		&__input {
			width: 75%;
		}
	}
}

.OrderInformationModalForm__AddressAutoComplete > .AutocompleteInput {
	display: flex;
}