// Partials / Block Form

.block{
  &.dark{
    .form,
    .content form{
      input[type=text],
      input[type=email],
      textarea{
        background-color:rgba(63,159,254,0.15);
        border-color:transparent;
        color:$white;

        &::placeholder{
          color:#597ea5;
        }
      }

      .success-message{
        p{
          color:$white;
        }
      }
    }
  }

  .form,
  .content .form{
    background-color:transparent;
    box-shadow:none;

    input[type=text],
    input[type=email],
    textarea{
      transition-duration:0.2s;
      transition-property:border;
      display:flex;
      align-items:center;
      background-color:#e0e3e8;
      border:1px solid #d9dce0;
      color:$black;
      box-shadow:none;
      height:50px;
      padding:12px 15px;

      &::placeholder{
        color:#4a5669;
      }

      &:focus{
        border-color:$blue;
      }
    }

    .fields{
      display:flex;
      width:100%;

      .field{
        width:50%;

        &:first-child{
          padding-right:7px;
        }

        &:last-child{
          padding-left:7px;
        }
      }
    }

    .field{
      &.error{
        input[type=text],
        input[type=email],
        textarea{
          border-color:red;
        }
      }
    }

    .actions{
      display:flex;
      align-items:center;

      .error-message{
        color:red;
      }
    }

    .success-message{
      display:inline-flex;
      align-items:center;
      border:1px solid $blue;
      border-radius:3px;
      padding:5px 14px 3px 12px;

      .icon{
        position:relative;
        top:-2px;
        height:35px;
        margin-right:12px;
      }

      p{
        color:$blue-dark;
        margin-bottom:0;
        font-size:14px;
        line-height:17px;
        font-weight:500;
      }
    }
  }
}

@include breakpoint($tablet-landscape){
  .block{
    .form,
    .content .form{
      background-color:transparent;
      box-shadow:none;

      input[type=text],
      input[type=email],
      textarea{
        height:43px;
      }
    }
  }
}

@include breakpoint($tablet-portrait){
  .block{
    .form,
    .content .form{
      margin-top: 20px;

      input[type=text],
      input[type=email],
      textarea{
        height:37px;
      }
    }
  }
}

@include breakpoint($phone){
  .block{
    .form,
    .content .form{
      .fields{
        display:flex;
        flex-direction:column;

        .field{
          width:100%;

          &:first-child,
          &:last-child{
            padding-left:0;
            padding-right:0;
          }
        }
      }
    }
  }
}
