@import "src/assets/variables";

$input-focus-color: $secondary-color !default;
$input-border-color: $secondary-background-color !default;
$input-placeholder-color: $disabled-color !default;
$input-icon-color: $primary-color !default;
.muncher-input--div {
  .muncher-input-element {
    .muncher-icon {
      //background: $input-border-color;
      color: $input-icon-color;
      position: absolute;
      padding: .57rem;
    }
  }


  .muncher-input {
    height: 2rem;
    font-size: .9rem;
    padding-left: .5rem;
    border: 1px solid $input-border-color;
    width: 100%;
  }

  .muncher-input-icon {
    padding-left: 2rem;
    width: 90%;
  }

  .muncher-icon-hover {
    cursor: pointer;
  }

  .muncher-icon-hover:hover {
    opacity: .8;
  }

  ::-webkit-input-placeholder { /* Edge */
    color: $input-placeholder-color;
  }

  :-ms-input-placeholder { /* Internet Explorer */
    color: $input-placeholder-color;
  }

  ::placeholder {
    color: $input-placeholder-color;
  }

  .muncher-textarea {
    border: 1px solid $input-border-color;
    width: 100%;
    padding: .5rem;

    + p {
      margin: 0;
      font-size: .8rem;
      padding-left: .2rem;
    }
  }

  .muncher-input:focus, .muncher-textarea:focus {
    outline-color: $input-focus-color;
  }


  .muncher-checkbox, .muncher-radio {
    color: $primary-color;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    input {
      margin-right: .1rem;
    }

    label {
      cursor: pointer;
    }

    label:hover {
      opacity: .8;
    }
  }

  .muncher-input-error {
    border: 1px solid $danger-color;
  }

  .muncher-input-error-message {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: .8rem;
    color: $danger-color;
    margin: .4rem;
  }
}