@use '../root' as *;

.form {
    &__group {
      span {
        color: $title-color;
        font-weight: 600;
        text-transform: capitalize;
      }
  
      input,
      textarea {
        border: 1.5px solid rgba(255, 255, 255, 0.14);
        background-color: $theme-color;
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;
        
        color: rgba(255, 255, 255, 0.70);
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
  
        &::placeholder {
          color: rgba(255, 255, 255, 0.70);
        }
      }
  
      textarea {
        padding-top: 18px;
        height: 200px;
        border-radius: 6px;
      }
      &--large textarea {
        height: 189px;
      }
      .form-ctrl {
        padding: 17px 90px 17px 30px;
      }
      select.form__select {
        border: 1.5px solid rgba(255, 255, 255, 0.14);
        background-color: $theme-color;
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;

        color: rgba(255, 255, 255, 0.70);
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        appearance: none; 
        background-image: none; 
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.70);
        }
      }
    }  
}

.form {
    &__group2 {
      span {
        color: $title-color;
        font-weight: 600;
        text-transform: capitalize;
      }
  
      input,
      textarea {
        border: 1.5px solid rgba(255, 255, 255, 0.14);
        background-color: $bg-color5;
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;
        
        color: $title-color;
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
  
        &::placeholder {
          color: $title-color;
          opacity: 0.6;
        }
      }
  
      textarea {
        padding-top: 18px;
        height: 200px;
        border-radius: 6px;
      }
      &--large textarea {
        height: 189px;
      }
      .form-ctrl {
        padding: 17px 90px 17px 30px;
      }
      select.form__select {
        border: 1.5px solid rgba(255, 255, 255, 0.14);
        background-color: $bg-color5;
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;

        color: $title-color;
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        appearance: none; 
        background-image: none; 
        
        option[disabled] {
          opacity: 0.6;
        }
      }
    }  
}


.form {
  &__group3 {
    span {
      color: $title-color;
      font-weight: 600;
      text-transform: capitalize;
    }

    input,
    textarea {
      border: 1px solid transparent;
      border-radius: 10px;
      background: $smoke2;
      padding: 15px 30px;
      width: 100%;
      outline: none;

      color: $gray2;
      font-family: $body-font;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; 

      &::placeholder {
        color: $gray2;
      }
    }
    select.form__select {
      border: 1px solid transparent;
      border-radius: 10px;
      background: $smoke2;
      padding: 15px 30px;
      width: 100%;
      outline: none;

      color: $gray2;
      font-family: $body-font;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;

      appearance: none; 
      background-image: none; 
      
      &::placeholder {
        color: $gray2;
      }
    }

    textarea {
      padding-top: 18px;
      height: 164px;
      border-radius: 10px;
    }
    &--large textarea {
      height: 189px;
    }
  }  
}

.form {
    &__group4 {
      span {
        color: $title-color;
        font-weight: 600;
        text-transform: capitalize;
      }
  
      input,
      textarea {
        border: 1px solid rgba(31, 31, 31, 0.10);
        background: rgba(255, 255, 255, 0.00);
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;
        
        color: $title-color;
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
  
        &::placeholder {
          color: $title-color;
          opacity: 0.6;
        }
      }
  
      textarea {
        padding-top: 18px;
        height: 200px;
        border-radius: 6px;
      }
      &--large textarea {
        height: 189px;
      }
      .form-ctrl {
        padding: 17px 90px 17px 30px;
      }
      select.form__select {
        border: 1.5px solid rgba(255, 255, 255, 0.14);
        background-color: $bg-color5;
        padding: 16px 20px;
        width: 100%;
        border-radius: 6px;
        outline: none;

        color: $title-color;
        font-family: $body-font;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        appearance: none; 
        background-image: none; 
        
        option[disabled] {
          opacity: 0.6;
        }
      }
    }  
}


.input-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  
  color: $gray2;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; 
  pointer-events: none;
}

.textarea-icon {
  top: 20px !important;
  transform: none !important;
}

