////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel TextInput

// TextInput variables
$textinput-border-radius: $border-radius
$textinput-margin: 0 !default
$textinput-padding-vertical: .679em !default
$textinput-padding-horizontal: 14px !default

=textinput-theme($textinput-text-color)
	
	color: $textinput-text-color

	input
		@if $flat
			background: lighten($default-color, 15%)
			border: 1px solid $default-color
		@else
			background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
			border: 1px solid darken($default-color, 15%)
			//box-shadow: none
		border-radius: $textinput-border-radius
		
		@if $transitions-enable
		transition:
			duration: $transition-duration
			timing-function: $transition-timing
		
		&:focus
			@if $flat
				border: 1px solid $primary-color
				// background: lighten($primary-color, 25%)
			@else
				border: 1px solid darken($primary-color, 15%)
		
		//&:hover 

		&::placeholder, &:-ms-input-placeholder
			color: lighten($textinput-text-color, 15%)

		&[disabled]
			@if $flat
				background: $disabled-color
				border: 0px solid
			@else
				background: $disabled-color
				border: 1px solid $disabled-border-color
			box-shadow: none
			color: $disabled-font-color
			
			&::placeholder, &:-ms-input-placeholder
				color: $disabled-font-color

			+ i
				color: $disabled-font-color

.jewel
	&.textinput
		font:
			weight: $font-weight-normal


		@if $dark
			+textinput-theme($font-dark-color)
		@else
			+textinput-theme($font-light-color)

		input
			margin: $textinput-margin
			padding: $textinput-padding-vertical $textinput-padding-horizontal
			// font:
			// 	family: $font-stack
		&.icon
			input
				padding-left: $textinput-padding-horizontal + ($textinput-padding-horizontal*2)
				padding-right: $textinput-padding-horizontal

			i
				&.fonticon
					left: $textinput-padding-horizontal
					&.material-icons
						left: $textinput-padding-horizontal - 4

			&.right
				input
					padding-left: $textinput-padding-horizontal
					padding-right: $textinput-padding-horizontal + ($textinput-padding-horizontal*2)

				i
					&.fonticon 
						right: $textinput-padding-horizontal
						&.material-icons
							right: $textinput-padding-horizontal - 4

			&.truncate
			input
				
		&.errorBorder
			input
				border: 1px $error-color solid

// Jewel TextArea
$textarea-margin: 0 !default
$textarea-padding: .72em 1.12em !default

// TextArea variables
$textarea-border-radius: $border-radius

=textarea-theme($textarea-text-color)
	
	color: $textarea-text-color

	textarea
		margin: $textarea-margin
		padding: $textarea-padding

		@if $flat
			background: lighten($default-color, 15%)
			border: 1px solid $default-color
		@else
			background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%))
			border: 1px solid darken($default-color, 15%)
			//box-shadow: none
		border-radius: $textarea-border-radius
		
		@if $transitions-enable
		transition:
			duration: $transition-duration
			timing-function: $transition-timing
		
		&:focus
			@if $flat
				border: 1px solid $primary-color
				// background: lighten($primary-color, 25%)
			@else
				border: 1px solid darken($primary-color, 15%)
		
		//&:hover 

		&::placeholder, &:-ms-input-placeholder
			color: lighten($textarea-text-color, 15%)

		&[disabled]
			@if $flat
				background: $disabled-color
				border: 0px solid
			@else
				background: $disabled-color
				border: 1px solid $disabled-border-color
			box-shadow: none
			color: $disabled-font-color
			
			&::placeholder, &:-ms-input-placeholder
				color: $disabled-font-color

.jewel
	&.textarea
		font:
			weight: $font-weight-normal
		
		textarea
			// font:
			// 	family: $font-stack

		@if $dark
			+textarea-theme($font-dark-color)
		@else
			+textarea-theme($font-light-color)