@charset "UTF-8";

input,
select,
textarea {
  padding: 1rem;
  border: 1px solid $secondary_color;
  border-bottom: 3px solid $primary_color;

}

input,
select {
  display: inline-block;
  margin-bottom:10px;
  margin-left:5px;
}

textarea {
  width: 100%;
  border-left: 3px solid $primary_color;
}

select,
option {
  // delete default display
  -webkit-appearance : none;
  -moz-appearance : none;

  background: none;
  border-radius: 0;

  background-color: transparent;
  background-image: url("./assets/img/fleche_bas.svg");
  padding-right:1.5rem;

  background-repeat: no-repeat;
  background-size: 9px 8px;
  background-position: right 1rem center;

  background-clip: border-box;

  // TODO -> check what angular can do
}

label {
  &[for] {
    cursor: pointer;
  }

  &:not([for]) {
    color: $dusty-orange;

    &:before {
      content: "ce label n'a pas d'attribut for, c'est mal.";
      color: $violet;
    }
  }
}