// -------------------------------------------------------------------
// :: APPOINTMENT INPUT
// -------------------------------------------------------------------

.o-appointment-input {
	margin-bottom: 1.5em;

	.o-appointment-input__labels {

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		align-content: stretch;

		label {
			flex: 0 1 100%;
			align-self: auto;
		}

	}

	.o-appointment-input__field {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start;
		align-content: stretch;
		border: 1px solid darken($light, 10%);
		border-radius: 0.1875rem;
		padding-top: rem(4px);
		padding-bottom: rem(4px);
		box-shadow: $box-shadow;

		input {
			@extend %__input;
			flex: 0 1 100%;
			align-self: auto;
			border-radius: 0;
			border: none;
			background: transparent;
			padding-top: rem(6px);
			padding-bottom: rem(6px);
			box-shadow: none;

			&:first-child {
				border-right: 1px solid darken($light, 10%);
				border-top-left-radius: 0.1875rem;
				border-bottom-left-radius: 0.1875rem;
			}

			&:last-child {
				border-left: 1px solid darken($light, 10%);
				border-top-right-radius: 0.1875rem;
				border-bottom-right-radius: 0.1875rem;
			}
		}
	}

	.o-appointment-input__field--focus {
		border: 1px solid $border-color-active;

		input {
			border-color: $border-color-active !important;
		}
	}
}

.o-appointment-input__fields-holder {
	padding: rem(10px) 0;
}

.o-appointment-input__add-btn {
	display: block;
	text-decoration: none;

	color: $dark-extra;
	text-transform: uppercase;
	font-weight: bold;
	font-size: rem(14px);
	letter-spacing: 1px;
	margin: rem(10px) 0;

	span[class*="icon"] {
		margin-right: rem(10px);
	}
}

.o-appointment-input__field + .o-appointment-input__field {
	margin-top: rem(10px);
}