/* scss/Atoms/_Input.scss */
select {
		appearance: none;
	    -webkit-appearance: none;
	    -moz-appearance: none;
		border: 1px solid $tertiary-color-1;
		background: none;
		font-size: .8em;
		padding: .5em 0;
		text-indent: .5em;
		@include borderRadius(4px);

		&::after {
		    content:"\f107";
		    font-family: FontAwesome;
		    font-size: 11px;
		    color:#aaa;
		    right:8px; top:3px;
		    padding:0 0 1px;
		    position:absolute;
		    pointer-events:none;
		}

		&::before {
		    content:"\f107";
		    font-family: FontAwesome;
		    right:4px; top:0px;
		    width:20px; height:16px;
		    background:#fff;
		    position:absolute;
		    pointer-events:none;
		    display:block;
		}

	}

input, select, textarea {
		@include appearance(none);
		width: 100%;
		font-family: $primary-font-stack;
		outline: none;
		transition: all 0.25s ease-in-out;
}

/*input:read-only {
    border: none;
    &:focus {
      outline: none;
    }
  } */


  input,
  textarea {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    font-family: $primary-font-stack;
    outline: none;
    transition: all 0.25s ease-in-out;


   &:disabled,
    &[disabled] {
    	pointer-events: none;
    }

    &[type="text"] {
      border: 1px solid $tertiary-color-1;
      font-size: 0.8em;
      padding: 0.5em 0;
      text-indent: 0.75em;
      border-radius: 4px;

      &:active,
      &[active],
      &:focus {
        border-color: $link-active-color;
      }

      &:invalid,
      &[invalid] {
        border-color: $error-color;
      }

      &::placeholder {
      	color: rgba(0,0,0,0.3);
      }
    }
  }



 .read-only, [readonly] {
      border: none;
      pointer-events: none;

      &:focus, :active {
        outline: none;
        border: none;
        pointer-events: none;
      }
    }


.input-wrap {
	display: flex;
	flex-wrap: wrap;
	max-width: 95%;
	margin: 1em 0;

	&--inline {
		flex-wrap: nowrap !important;
		align-items: center;

		label {
			margin-right: .5em;
			line-height: 1;
			height: auto;

			span.icon, i.icon {
				font-size: 1rem;
			}
		}
	}

	label {
		font-size: .8em;
		color: $primary-text-color;
		padding-bottom: 0.3em;
	}

	input, select, textarea {
		@include appearance(none);
		width: 100%;
		font-family: $primary-font-stack;
		outline: none;
		transition: all 0.25s ease-in-out;


		&[type="text"]  {
			border: 1px solid $tertiary-color-1;
			font-size: .8em;
			padding: .5em 0;
			text-indent: .5em;
			@include borderRadius(4px);

			&:active, &[active], &:focus {
				border-color: $link-active-color;
			}

			 &:invalid, &[invalid] {
				border-color: $error-color;
			}

		}
	}

}



input,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="number"] {

 &.read-only, &[readonly] {
      border: none ;
      pointer-events: none;
      background: none;

      &:focus, :active {
        outline: none;
        border: none;
        pointer-events: none;
      }
    }
}

.input-wrap,
.input-wrap--inline,
.select-wrap,
.select-wrap--inline,
.custom-select {

	input,
	select,
	textarea,
	input[type="text"],
	input[type="email"],
	input[type="number"] {


	 &.read-only, &[readonly] {
	      border: none;
	      pointer-events: none;

	      &:focus, :active {
	        outline: none;
	        border: none;
	        pointer-events: none;
	      }
	    }
	}



		&.read-only, &[readonly] {
		 &::after {
				content: "";
				display: none;
			}

			&::before {
				content: "";
				display: none;
			}
 		}
}