@import '../../less/Global.less';

.r-Input {
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  .transition(all 200ms ease-in);
}

.r-Input *{
  .transition(all 200ms ease-in);
}

// sizes

// small

.r-Input.small,
.r-Input.small > .r-Input__container,
.r-Input.small > .r-Input__container > input{
  height: 26px;
}

.r-Input.small > .r-Input__container > small{
  top:5px;
}

.r-Input.small > .r-Input__container > small,
.r-Input.small > .r-Input__container > input
{
  font-size:12px;
}

.r-Input.small > .r-Input__container > small + small {
    left: 25px;
    pointer-events: none;
    top: 5px;
}

.r-Input.small.checked .r-Input__container>small {
    top: -3px !important;
    font-size: 9px;
    top: -2px!important;
    font-size: 9px;
    left: 7px;
}

.r-Input.small.checked .r-Input__container>input {
    padding-top: 7px;
}

// large

.r-Input.large,
.r-Input.large > .r-Input__container,
.r-Input.large > .r-Input__container > input{
  height: 40px;
}

.r-Input.large > .r-Input__container > small{
  top:12px;
}

// xlarge

.r-Input.xlarge,
.r-Input.xlarge > .r-Input__container,
.r-Input.xlarge > .r-Input__container > input{
  height: 62px;
}

.r-Input.xlarge > .r-Input__container > small{
  top:22px;
}

.r-Input.xlarge > .r-Input__container > small,
.r-Input.xlarge > .r-Input__container > input
{
  font-size:25px;
}

.r-Input.xlarge.checked .r-Input__container > small {
    top: 4px;
    font-size: 83%;
}

.r-Input.large.checked .r-Input__container > .writing {
    top: 20px;
}

.r-Input.xlarge.checked .r-Input__container > .writing {
    top: 38px;
}

.r-Input.small.checked .r-Input__container > .writing {
    font-size:95%;
}

.r-Input.xlarge > .r-Input__container > small + small {
    left: 35px;
    pointer-events: none;
    top: 23px ;
}

//

textarea {
  height: 22px;
  outline: 0;
  border: 0;
  width: 100%;
  font: inherit;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: hidden;
  background: #fff;
  cursor: pointer !important;
  border-radius: @input-border-radius;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 0 #1995ff;
  position: relative;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0.3, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1), border-color 0s linear 0.17s;
  transition: transform 0.3s cubic-bezier(0.2, 0.3, 0, 1), box-shadow 0.3s cubic-bezier(0.2, 0.3, 0, 1), border-color 0s linear 0.17s;
}

.r-Input__container{
  position:relative;
}

.r-Input__container input[type='text'],
.r-Input__container input[type='number'],
.r-Input__container input[type='password'],
.r-Input__container input[type="color"],
.r-Input__container input[type="date"],
.r-Input__container input[type="datetime"],
.r-Input__container input[type="datetime-local"],
.r-Input__container input[type="email"],
.r-Input__container input[type="month"],
.r-Input__container input[type="range"],
.r-Input__container input[type="week"],
.r-Input__container input[type="tel"],
.r-Input__container input[type="time"],
.r-Input__container input[type="url"] {
  border: 1px solid @input-border-color;
  width:100%;
  height: 100%;
  left:0;
  right:0;
    font-size: 13px;
    font-weight: 300;
}


.r-Input__container {
  position: relative;
  overflow: hidden;
  border-radius:@input-border-radius;
  height: @input-height;
  color: @input-color;
  background-color:@input-background;
}
.r-Input__container > small {
  position: absolute;
  top: 7px;
  left: 10px;
  z-index: 2;
  line-height: 18px;
  color: @input-color;
  font-size: 14px;
  pointer-events: none;
}

.r-Input__container.success > small {
  color: @success-background;
}

.r-Input.checked .r-Input__container > small i.fa {
  opacity: 0;
}

.r-Input.checked .r-Input__container > small {
    top: 0px;
    font-size: 60%;
    left: 7px;
    color: #555;
}
.r-Input__container > input {
  z-index: 1;
  padding-left: 5px;
  padding-top: 10px;
  color:@input-color;
  border-radius:@input-border-radius;
  font-size: 16px;
  border: 0;
  background-color:@input-background;
  /*background-color: @input-background;*/
  outline: 0;
  transition-duration: 0.6s;
}
.no-title.r-Input__container > input {
  opacity: 1;
  /*color:@input-color !important;*/
  padding-top:0;
}
.r-Input.checked .r-Input__container > input {
  opacity: 1;
  /*padding-top: 5px;*/
}

.r-Input.simple input {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    background: transparent;
    border-top: 1px solid transparent;
    border-radius: 1px solid transparent;
}

.r-Input__container .r-Selectable__border-gray {
  border: 1px solid transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.r-Input__container > small + small {
  left: 35px;
  pointer-events: none;
}

.r-Input.checked .r-Input__container > small + small {
  left: 7px;
}

@keyframes writing {
  0% {
    transform: translate(0px, 1px);
  }
  10% {
    transform: translate(2px, 1px);
  }
  20% {
    transform: translate(4px, -1px);
  }
  30% {
    transform: translate(6px, -1px);
  }
  40% {
    transform: translate(8px, 1px);
  }
  50% {
    transform: translate(10px, 1px);
  }
  60% {
    transform: translate(12px, -1px);
  }
  70% {
    transform: translate(14px, -1px);
  }
  80% {
    transform: translate(16px, 1px);
  }
  90% {
    transform: translate(18px, 1px);
  }
  100% {
    transform: translate(20px, -1px);
  }
}
@-webkit-keyframes writing {
  0% {
    transform: translate(0px, 1px);
  }
  10% {
    transform: translate(2px, 1px);
  }
  20% {
    transform: translate(4px, -1px);
  }
  30% {
    transform: translate(6px, -1px);
  }
  40% {
    transform: translate(8px, 1px);
  }
  50% {
    transform: translate(10px, 1px);
  }
  60% {
    transform: translate(12px, -1px);
  }
  70% {
    transform: translate(14px, -1px);
  }
  80% {
    transform: translate(16px, 1px);
  }
  90% {
    transform: translate(18px, 1px);
  }
  100% {
    transform: translate(20px, -1px);
  }
}
.writing {
  position: absolute;
  z-index: 3;
  opacity: 0;
  position: absolute;
  top: 14px;
  left: 5px;
  font-size: 12px !important;
}
.r-Input.checked .writing {
  animation: writing 0.8s infinite;
  -webkit-animation: writing 0.8s infinite;
  z-index: 3;
  opacity: 1;
}

textarea, 
input{
  /*font-size: 13px;*/
  background-clip: padding-box;
  -webkit-appearance: none;
}

.error-message{
  color:@error-background !important;
    font-size: 12px;
    margin-top: 10px;
    display: block;
}

.error-pane.e-open{
  position: absolute;
  top:0;
  left:0;
  z-index: 5;
}

.r-Toolbar.no-radius > .r-Input > .r-Input__container > input,
.r-Toolbar.no-radius > .r-Input > .r-Input__container,
.r-Toolbar.no-radius > .r-Input{
 border-radius: 0 !important;
}

.r-Toolbar.no-border > .r-Input > .r-Input__container > input,
.r-Toolbar.no-border > .r-Input > .r-Input__container,
.r-Toolbar.no-border > .r-Input{
 border-color: transparent !important;
}

.r-Input__container.e-required{
  border: 1px solid @error-background !important; 
  border-radius : @default-border-radius;
}



.r-Input__container.e-disabled{
    cursor: not-allowed;
    opacity: .50;
    filter: alpha(opacity=65);
    .box-shadow(0);
    pointer-events: none;
}

.r-Input.flex{
    flex:1;
}

.r-Input.text-center > input{
  text-align: center;
}

input::-webkit-input-placeholder { color: #888 !important; text-transform:capitalize !important; }
input::-moz-placeholder { color:#888 !important; text-transform:capitalize !important; } /* firefox 19+ */
input:-ms-input-placeholder { color:#888 !important; text-transform:capitalize !important; } /* ie */
input:-moz-placeholder { color:#888 !important; text-transform:capitalize !important; }



.r-Input__container.e-required > input{
    border: 2px solid transparent !important;
}


.r-Input__container input:focus{
    border:1px solid;
    .transition(all 50ms ease-in);
}


.r-Input__container.success input:focus{
  border:1px solid;
  border-color: @success-background;
  .transition(all 50ms ease-in);
}