// Form variables
$form-background: #f1f5f9;

.ds-form {
  .form-group label {
    transition: all 0.1s ease-in-out;
  }

  .form-group:focus-within {
    label,
    input,
    select {
      color: #313747 !important;
    }
  }

  input,
  input:-webkit-autofill,
  select {
    background-color: $form-background;
    border-radius: 15px;
    border: 1.75px solid transparent;
    outline: 0;
    padding: 1rem !important;
    color: #757d94 !important;

    &:focus,
    &:active {
      background-color: $form-background;
      border: 1.75px solid #2962ff;
    }

    &:read-only {
      background-color: #eaebee;
      cursor: default;
      color: #9aa2b8;

      &:focus,
      &:active {
        border: 1.75px solid transparent;
        color: #757d94;
      }
    }
  }

  select {
    background-color: $form-background !important;
    appearance: none;
    cursor: pointer !important;
    border: none;
    outline: 0;

    background: url(./../../img_datasurvey/down-arrow.svg) no-repeat right;
    background-size: 3.5%;
    -webkit-appearance: none;
    background-position-x: 94%;

    &:focus,
    &:active {
      background-color: $form-background !important;
      border: 1.75px solid #2962ff !important;
    }

    option {
      background-color: #fff !important;
      color: #313747 !important;
      padding: 1rem !important;

      &:hover,
      &:focus,
      &:active {
        background-color: #efefef !important;
      }
    }
  }

  label {
    color: #757d94;
  }
}

input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: $form-background !important;
}