@import "../style/vars";
@import "../style/mixins";
@import "../style/variant";
@import "./input.mixin";
$ssv-input-focus-color: $ssv-secondary-color !default;
$ssv-input-disabled-color: rgba(0, 0, 0, 0.26) !default;
$ssv-input-transition: all 0.3s !default;
$ssv-input-border-color: $ssv-master-color !default;
$ssv-input-placeholder-color: lighten($ssv-input-border-color, 20%) !default;
$ssv-input-border: 1px solid $ssv-input-border-color !default;
$ssv-input-disabled-border: 1px dotted $ssv-input-disabled-color !default;

.ssv-input {
	display: block;
	position: relative;
	margin-top: 1rem;

	&[disabled] {
		.ssv-input__label {
			color: $ssv-input-disabled-color;
		}
	}

	::-webkit-input-placeholder {
		color: $ssv-input-placeholder-color;
	}

	@include element("label") {
		color: $ssv-input-border-color;
		position: absolute;
		top: 0.8rem;
		left: 0;
		font-size: 1rem;
		transition: 0.2s ease-out;

		@include modifier("active") {
			font-size: 0.8rem;
			transform: translateY(-140%);
		}
	}

	@include element("input") {
		border: none;
		background: transparent;
		outline: none;
		border-radius: 0;
		border-bottom: $ssv-input-border;
		width: 100%;
		height: 3rem;
		box-shadow: none;
		box-sizing: content-box;
		font-size: 1rem;
		margin: 0 0 20px;
		transition: $ssv-input-transition;

		&:disabled,
		&[readonly="readonly"] {
			color: $ssv-input-disabled-color;
			border-bottom: $ssv-input-disabled-border;
		}
	}

	@include element("help") {
		position: absolute;
		top: 54px;
		font-size: 0.75rem;
	}

	@include modifier("focused") {
		.ssv-input__label {
			color: $ssv-input-focus-color;
		}

		.ssv-input__input {
			border-bottom: 1px solid $ssv-input-focus-color;
			box-shadow: 0 1px 0 0 $ssv-input-focus-color;
		}
	}

	// variants
	@include modifier("primary") {
		@include ssv-input-variant($ssv-primary-variant);
	}

	@include modifier("accent") {
		@include ssv-input-variant($ssv-accent-variant);
	}

	@include modifier("danger") {
		@include ssv-input-variant($ssv-danger-variant);
	}

	@include modifier("warn") {
		@include ssv-input-variant($ssv-warn-variant);
	}

	@include modifier("success") {
		@include ssv-input-variant($ssv-success-variant);
	}

	@include modifier("info") {
		@include ssv-input-variant($ssv-info-variant);
	}
}