@import "../colors";
@import "../breakpoints";

label {
	color: $musare_color_primary_gray;
	display: block;
	margin-bottom: 16px;

	span {
		display: block;
		font-size: 12px;
		line-height: 16px;
		margin-left: 4px;
		margin-bottom: 5px;
	}

	input, textarea {
		display: block;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid $musare_color_primary_blue;
		font-size: 15px;
		line-height: 20px;
		padding: 10px;
		resize: none;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

		&.has-validation-errors {
			border-color: $musare_color_primary_red;
		}
	}

	ul {
		display: block;
		list-style-position: inside;
		color: $musare_color_primary_red;
		margin-top: 4px;
		font-size: 12px;
		line-height: 16px;
	}
}

@mixin forPlaceholder() {
	&::placeholder, &::-webkit-input-placeholder {
		@content;
	}

	&:-moz-placeholder, &::-moz-placeholder {
		@content;
	}

	&:-ms-input-placeholder, &::-ms-input-placeholder {
		@content;
	}
}