@import '../../variables';

.input-with-label {
	width:100%;
	color: $medium-grey;
	padding-bottom:20px;


	&-label {
		display:block;
		padding-bottom:15px;

		&-required {
			color: $orange;
			margin-left: 2px;
		}

		&-info {
			font-style: italic;
			margin-left: 5px;
			font-weight:200;
		}
	}

	&-input {
		border-radius: 5px;
		outline: 0;
		width: 100%;
		height: 4em;
		background-color: #f0f0f0;
		color: $medium-grey;
		font-size: 16px;
		padding: 8px 18px;
		display: inline-block;
		border: none;
		border-bottom: solid 3px #fff;
		margin: 0;
		box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		transition: border-color .15s linear,background .15s linear;

		&:focus {
			border-bottom: 3px solid $green !important;
			@include themify() {
				border-color: $theme-background !important;
			}
		}

		&.is-small {
			height: 2.6em;
		}

		&.is-error {
			border-bottom: 3px solid $red !important;
		}

		&::placeholder {
			color: $light-grey;
		}
	}
}
