@import '../../../../../styles/variables';

@input_transition: .3s ease all;

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.apm-mui-input-group { 
  position: relative; 
  margin-bottom: 35px;

  input {
    font-size: 18px;
    padding: 10px 0 0;
    display: block;
    width: 100%;
    border: none;
    background: transparent;
    border-bottom: 1px solid @green-primary;

    &:focus { 
      outline: none;
      background: transparent;
    }
  }

  label {
    color: #999; 
    font-size: 18px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: @input_transition; 
    -moz-transition: @input_transition; 
    -webkit-transition: @input_transition;
  }


  input:focus ~ label, 
  input.not-empty ~ label, 
  input.error ~ label {
    top:-5px;
    left:0;
    font-size:15px;
    color:@green-primary;
  }

  input.error ~ label {
    color: @error;
  } 

  input.required ~ label {
    &:after {
      color: @error;
      content:'   *';
      margin-left: 1px;
      font-size: 15px;
    }
  }

  .apm-mui-bar  { position:relative; display:block; width:100%; }
  .apm-mui-bar:before, .apm-mui-bar:after   {
    content: '';
    height: 2px; 
    width: 0;
    bottom: 1px; 
    position: absolute;
    background: @green-primary; 
    transition: @input_transition; 
    -moz-transition: @input_transition; 
    -webkit-transition: @input_transition;
  }
  .apm-mui-bar:before {
    left:50%;
  }
  .apm-mui-bar:after {
    right:50%; 
  }

  input:focus ~ .apm-mui-bar:before, input:focus ~ .apm-mui-bar:after {
    width:50%;
  }

  input.error ~ .apm-mui-bar:before, input.error ~ .apm-mui-bar:after {
    background-color:  @error;
  }  
  .apm-mui-highlight {
    position:absolute;
    height:60%; 
    width:100%; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  input:focus ~ .apm-mui-highlight {
    -webkit-animation:inputHighlighter 0.03s ease;
    -moz-animation:inputHighlighter 0.03s ease;
    animation:inputHighlighter 0.03s ease;
  }
}

@-webkit-keyframes inputHighlighter {
  from { background:@green-primary; }
  to  { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background:@green-primary; }
  to  { width:0; background:transparent; }
}
@keyframes inputHighlighter {
  from { background:@green-primary; }
  to  { width:0; background:transparent; }
}

.apm-mui-dropdown {
  background-color: #fff;
  box-shadow: 1px 1px 2px 1px;
  border-radius: 3px;
  padding: 0;
  max-height: 100px;
  overflow: auto;
  
  ul {
    list-style: none;
    padding-left: 0;
    text-indent: 15px;


    li:hover {
      cursor: pointer;
      background-color: darken(@green-primary, 10%);
      color: #fff;
    }
  }
}