@mixin form-group(
  $bg-color: #e2e2e2,
  $padding: $base-padding $base-padding,
  $radius: $base-btn-border-radius
) {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 1.4rem;
  position: relative;
  font-family: "br_firma", sans-serif;

  .form-label {
    align-self: flex-start;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
    color: #020202;
    text-transform: capitalize;
    width: 100%;
    display: flex;
    align-items: center;
    font-family: "br_firma", sans-serif;

    .label-span {
      margin-left: auto;
      cursor: pointer;
    }
  }

  .upload-group {
    position: relative;
    min-height: 10rem;
    overflow-y: scroll;
    width: 100%;

    &::-webkit-scrollbar:horizontal {
      display: none;
    }

    /* width */
    &::-webkit-scrollbar {
      width: 0.5rem;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: none !important;
      background-color: transparent !important;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #cccccc;
      border-radius: 30rem;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #cccccc;
    }

    label {
      position: absolute;
      top: 0;
      left: 0;
      height: 10rem;
      width: 100%;
      border: none;
      cursor: pointer;
      display: grid;
      place-items: center;

      & > *:nth-child(3) {
        span {
          display: none;
        }
      }

      .upload-text {
        text-align: center;
        //  width: 65%;
        color: #676767;

        span {
          font-weight: 700;
          // color: #0b8376;
        }
      }

      svg {
        display: none;
      }
    }
  }

  .display-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: max-height 0.5s linear-bezier(0, 1.05, 0, 1);
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    width: 100%;

    &::-webkit-scrollbar {
      display: none;
    }

    .display-box {
      display: flex;
      align-items: center;
      padding: 1.2rem;
      border-radius: 0.8rem;
      border: 0.1rem solid #cccccc;
      background-color: #ffffff;

      .img-box {
        flex: 0 0 10%;
        width: 4.5rem;
        height: 4.5rem;
        margin-right: 1rem;
        border-radius: 0.5rem;
        overflow: hidden;
        display: inline-block;

        .img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .text-box {
        margin-right: 1.5rem;

        .name {
          font-weight: 500;
          color: #020202;
          font-size: 1.3rem;
        }

        .size {
          color: #676767;
          font-size: 1.3rem;
        }
      }

      .cancel-box {
        width: 2.2rem;
        height: 2.2rem;
        border-radius: 50%;
        background-color: #ffdfdd;
        margin-left: auto;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.1);
        }

        .icon {
          fill: #ff0f00;
          width: 1.1rem;
          height: 1.1rem;
        }
      }
    }
  }

  .display-wrap-show{
    // margin: 1.5rem auto;
    max-height: 15rem;
    transition: max-height 0.5s linear-bezier(0, 1.05, 0, 1);
  }

  .input-submit {
    border: none;
    outline: none;
    padding: $base-padding * 1.6 $base-padding;
    width: 100%;
    border-radius: $base-border-radius;
    background-color: #0b8376;
    color: #ffffff;
    // text-transform: capitalize;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s;

    @media only screen and (max-width: 48em){
      min-height: 4.5rem;
    }

    &:active {
      border: none;
      outline: none;
    }

    &:focus {
      border: none;
      overflow: none;
    }

    &:hover {
      transform: translateY(-0.1rem);
    }
  }

  .form-input-calendar {
    // display: none ;
    background-color: #e2e2e2;
    border-radius: $base-border-radius;
    border: 0.1rem solid #cccccc;
    font-size: 1.4rem;
    font-family: inherit;
    color: #020202;
    display: flex;
    width: 100%;

    .form-control {
      border: none;
      outline: none;
      background-color: #f7f8f7;
      padding: 2.3rem 1.6rem !important;
      // flex: 1;
      // padding-left: 10% !important;
      width: calc(100% - 3rem);
      margin-left: auto;
      border-radius: $base-border-radius;
    }

    .open {
      background-color: #f7f8f7 !important;
      border-radius: $radius !important;

      .open {
        background-color: #f7f8f7 !important;
      }
    }

    .flag-dropdown {
      border: none;
      border-radius: $base-border-radius;
      // flex: 0 0 3rem;
      width: 3rem;
      // overflow: hidden;
      // border-right: .1rem solid red !important;

      .selected-flag {
        background-color: #f7f8f7;
        border-radius: $base-border-radius;

        &:hover {
          background-color: #f7f8f7;
        }
        .flag {
          img {
            border-radius: 50%;
          }
        }
      }

      .country-list {
        .country {
          .country-name {
            color: #020202;
          }
        }
      }
    }

    .open {
      background-color: #f7f8f7;

      .open {
        background-color: #f7f8f7;
      }
    }
  }

  .wrap {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    // background-color: red;

    .label-calendar {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 1.6rem;
      z-index: 10;

      .img-box {
        width: 2rem;
        height: 2rem;
        cursor: pointer;

        .img {
          object-fit: contain;
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .progress-text-box {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;

    .text {
      margin-left: auto;
      color: #676767;
      font-size: 1.25rem;
    }

    .progress-box {
      display: flex;
      align-items: center;
      flex: 0 0 55%;
      gap: 0.5rem;
    }
  }

  .form-input {
    border: none;
    outline: none;
    background-color: #f7f8f7;
    padding: 1.4rem 1.6rem;
    flex: 1;
    position: relative;
    display: inline-block;
    border-radius: $base-border-radius;
    border: 0.1rem solid #cccccc;
    font-size: 1.4rem;
    color: #020202;
    position: relative;
    font-family: "br_firma", sans-serif;
    z-index: 3;

    &::placeholder {
      color: #b3b3b3;
      // font-weight: 300;
    }
  }

  .form-textarea{
    font-size: 1.4rem;
    color: #020202;
    font-family: "br_firma", sans-serif;

    &::placeholder {
      color: #b3b3b3;
      // font-weight: 300;
    }
  }

  .focus-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: $base-border-radius;
    visibility: hidden;
    // border: .1rem solid red;
  }

  .form-input_search {
    padding-left: 0rem;
  }

  .error-text {
    color: #ff0f00;
    // visibility: hidden;
    margin-top: 0rem;
  }

  .react-select-class {
    text-align: left;

    & > *:nth-child(3) {
      background-color: #f7f8f7;
      border: 0.1rem solid #cccccc;
      border-radius: $base-border-radius;
      padding: 0.32rem 0.4rem;

      & > *:nth-child(1) {
        & > *:nth-child(1) {
          font-size: 1.4rem;
          color: #b3b3b3;
          // font-weight: 300;

          //   &::placeholder {
          //     color: #b3b3b3;
          //   }
        }
      }

      & > *:nth-child(2) {
        span {
          display: none;
        }
      }
    }

    & > *:nth-child(4) {
      // background-color: red;
      & > *:not(:last-child) {
        // border-bottom: 0.09rem solid #e5e6e6 !important;
      }
    }
  }

  .react-select-class-selected {
    & > *:nth-child(3) {
      & > *:nth-child(1) {
        & > *:nth-child(1) {
          font-size: 1.4rem;
          color: #020202;
        }
      }
    }
  }

  .input-group {
    background-color: #f7f8f7;
    border: 0.1rem solid #cccccc;
    display: flex;
    border-radius: $base-border-radius;
    overflow: hidden;
    position: relative;
    padding: 0.2rem;
    width: 100%;
    padding-right: 1.6rem;
    align-items: center;

    .focus-border {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      border-radius: $base-border-radius;
      visibility: hidden;
      // border: .1rem solid red;
    }

    .seach-box {
      display: grid;
      place-items: center;

      .img-box {
        width: 2rem;
        height: 2rem;
      }

      .img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .form-input {
      border: none;
      outline: none;
    }

    .show-hide {
      font-weight: 600;
      font-size: 1.3rem;
      cursor: pointer;
      color: currentColor;
      position: relative;
      z-index: 4;
    }
  }

  .input-group__search {
    padding-left: 1.6rem;
  }

  .input-group__phone {
    padding: 0.5rem 0.5rem 0.5rem 1.6rem;

    .form-input {
      padding: 0.9rem 1rem;
      position: relative;
      z-index: 3;
    }
 
    .phone-wrap {
      display: flex;
      align-self: stretch;
      align-items: center;
      gap: 0.7rem;
      border-right: 0.1rem solid #cccccc;
      padding-right: 1rem;
      // background-color: green;
      // display: none;

      .down-icon {
        fill: #020202;
        width: 1.2rem;
        height: 1.2rem;
        transform: translateY(0.2rem);
      }

      .img-box {
        width: 2rem;
        height: 2rem;

        .img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      span {
        display: inline-block;
      }
    }
  }

  .pin-group {
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    display: flex;
    flex-direction: column;

    .count-down-box {
      display: flex;
      align-items: center;
      margin-top: 1.5rem;
      gap: 1rem;

      .text {
        color: #676767;
        font-weight: 500;
      }

      & > *:last-child {
        color: #ff0f00;
        font-weight: 700;
        font-size: 1.3rem;
        background-color: #ffeceb;
        padding: 0.8rem 1.2rem;
        border-radius: 6.4rem;
      }
    }

    .pin_field_group {
      display: flex;
      align-items: center;
      // gap: 1.5rem;
      grid-column-gap: 1.5rem;
      justify-self: center;

      input {
        width: 100% !important;
      }

      @media only screen and (max-width: 42em) {
        grid-column-gap: 0rem;
      }
    }

    .pin_field {
      background-color: #f7f8f7;
      border-radius: $base-border-radius;
      border: 0.1rem solid #cccccc;
      font-size: 1.4rem;
      font-family: inherit;
      color: #020202;
      height: 4.6rem;
      width: unset !important;
      outline: none;
      text-align: center;
      transition-duration: 250ms;
      transition-property: background, color, border, box-shadow, transform;
      /* width: calc(100% / 6); */

      @media only screen and (max-width: 25em) {
        width: 11.5vw;
        margin-right: 1rem;
      }
    }

    .pin_field:focus {
      // border-color: var(--raven-black-color);
      outline: none;
      transform: scale(1.05);
    }

    .pin_field_completed {
      /* background-color: #cccccc; */
      background-color: rgba(40, 167, 69, 0.1);
      border: 0.1rem solid var(--raven-black-color);
    }

    .pin_field:invalid {
      animation: shake 3 linear 75ms;
      border-color: rgb(220, 53, 69);
      box-shadow: 0 0 0.25rem rgba(220, 53, 69, 0.5);
    }

    .pin_field:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    swd-pin-field[completed] .pin_field {
      // border-color: rgb(40, 167, 69);
      // background-color: rgba(40, 167, 69, 0.1);
    }
  }
}

@each $key, $val in $colors {



  .form-group__#{$key} {
    @include form-group;


    .input-calendar-#{$key}{
      .flatpickr-calendar{
        display: none !important;
      }
    }
   

    .pin_field:focus {
      border-color: $val;
      outline: none;
      transform: scale(1.05);
      caret-color: $val;
    }

    .input-submit {
      background-color: $val;
    }

    .input-submit_disabled {
      cursor: default;
      opacity: 0.2;

      &:hover {
        transform: unset;
      }
    }

    .input-submit-loading {
      cursor: default;

      &:hover {
        transform: unset;
      }
    }

    .input-group__phone {
      .form-input:focus ~ .focus-border {
        visibility: visible;
        border: 0.07rem solid $val;
      }
    }

    .form-input-calendar {
      .form-control {
        caret-color: $val;
      }

      .flag-dropdown {
        .country-list {
          .highlight {
            background-color: $val;
            .dial-code,
            .country-name {
              color: #ffffff;
            }
          }
        }
      }

     
    }

    .form-input {
      caret-color: $val ;

      &:focus:not(:valid) {
        outline: none;
        border: 0.1rem solid #ff0f00;
      }

      &:focus:valid {
        outline: none;
        border: 0.1rem solid $val;
      }

      &:focus:not(:valid) ~ .error-text {
        visibility: visible;
      }
    }

    // .form_input

    .input-calender {
      &:focus:not(:valid) {
        outline: none;
        border: 0.1rem solid #cccccc;
      }
    }

    .show-hide {
      // color: $val ;
    }
  }

  .input-group {
    // .show-hide {
    //   color: $val !important;
    // }
    .form-input {
      padding: 1.2rem;
      &:focus:not(:valid) {
        outline: none;
        border: none;
      }

      &:focus:valid {
        outline: none;
        border: none;
      }
    }
  }

  .input-group__#{$key} {
    //  .upload-group {
    //     label {
    //       .upload-text {
    //         span,
    //         .span-#{$key} {
    //           color: $val !important;
    //         }
    //       }
    //     }
    //   }

  

    .form-input {
      padding: 1.2rem;
      &:focus:not(:valid) {
        outline: none;
        border: none;
      }

      &:focus ~ .focus-border {
        visibility: visible;
        border: 0.09rem solid $val;
      }

      &:focus:valid {
        outline: none;
        border: none;
      }
    }

    .pin-group_#{$key} {
      .pin_field_group {
        input {
          width: 100% !important;
        }
      }

      .pin_field {
        color: #020202;
      }

      .pin_field_completed {
        /* background-color: #cccccc; */
        background-color: rgba($val, 0.1);
        border: 0.1rem solid red !important;
      }

      .pin_field:invalid {
        animation: shake 3 linear 75ms;
        border-color: #ff0f00;
        box-shadow: 0 0 0.25rem rgba(220, 53, 69, 0.2);
      }

      .pin_field:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      swd-pin-field[completed] .pin_field {
        background-color: rgba($val, 0.1);
        border: 0.1rem solid red !important;
      }
    }
  }

  .form-input_#{$key} {
    caret-color: $val;
  }

  // .pin_field_#{$key} input{
  //   caret-color: $val !important;
  // }

  // .pin_field_completed {
  //   /* background-color: #cccccc; */
  //   background-color: rgba(40, 167, 69, 0.1);
  // }

  .border-error {
    border: 0.1rem solid #ff0f00 !important;
    border-radius: $base-border-radius;
  }

  .show-hide_#{$key} {
    color: $val !important;
  }
}