@import '@/styles/colors.scss';

// This file was just renamed

textarea {
  border: 0px;
  border-radius: 0px;
  background-color: transparent;
  font-size: 16px !important;
  border-bottom: 1px solid $light-grey;
  padding: 0px 5px 5px;  
}

textarea:focus {
  border: 0px;
  outline: none !important;
  border-radius: 0px;
  font-size: 16px;  
  background-color: transparent;
  border-bottom: 2px solid $primary;

}

input::placeholder, textarea::placeholder {
  color: $light-grey;
  font-weight: 300;
}



.k-input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-shadow: 0px 0px 0px #e3e3e3;
}

// input.t-input {
//   border: none;
//   width: 100%;
//   padding: 0px 5px 5px;
//   display: block;
//   font-size: 16px;
//   background: transparent;
//   border-bottom: 1px solid #e3e3e3;
//   border-radius: 0px;

// }

// input.t-input:focus {
//   border: none;
//   outline: none;
//   border-bottom: 2px solid $primary;    
//   margin-bottom: -1px;
// }

.k-label {
  font-size: 12px;
  // padding-left: 5px;
  display: block;
}


.light > .k-label {
    color: rgba(0, 0, 0, 0.54);
}


.dark > .k-label {
    color: white;
}



.validation-errors {
  display: block;
  margin-top: 20px;
}

input + .validation-errors {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 12px;
  color: #dc3545;
}


.light > {
  .k-label {
    color: $mid-grey;
  }

  .k-input {
    color: $dark-grey;
  }

  input::placeholder {
  color: $light-grey;
  font-weight: 300;
}

}


.dark {
  &.k-label {
    color:white;
  }

  &.k-input {
    color:white;    
  }
}