@use './mixins' as mix;

input, textarea {
	color: var(--font-color) !important;
	caret-color: var(--font-color) !important;

	&.mat-input-element {
		line-height: 20px;
		margin-top: 0 !important;
		font-size: 14px;

    @include mix.tablet {
      line-height: 22px;
      font-size: 15px;
    }
	}

	// DO NOT UNION STYLES BELOW IT WONT WORK
	&::placeholder {
		color: var(--placeholder-color) !important;
    font-size: 14px;

    @include mix.tablet {
      font-size: 15px;
    }
	}

	&::-ms-input-placeholder {
		color: var(--placeholder-color) !important;
    font-size: 14px;

    @include mix.tablet {
      font-size: 15px;
    }
	}

	&::-webkit-input-placeholder {
		color: var(--placeholder-color) !important;
    font-size: 14px;

    @include mix.tablet {
      font-size: 15px;
    }
	}

	&::-moz-placeholder {
		color: var(--placeholder-color) !important;
    font-size: 14px;

    @include mix.tablet {
      font-size: 15px;
    }
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-transition-delay: 111111s;
	-webkit-transition: color 11111s ease-out, background-color 111111s ease-out;
}