@use '../abstracts' as *;
@use "../util/scaling" as scale;

section.enquiry-form {

  --translate: #{scale.sm-vw-px(42)}; // how wide the panels are after opening (205 + 10)

  background-color: var(--c-blue);
  height: calc(var(--vh, 1vh) * 100);
  max-height: var(--max-panel-height);
  position: relative;
  opacity: 1;
  min-height: var(--min-panel-height);
  max-height: var(--max-panel-height);
  z-index: 2;



  .container {
    padding: 0 0;
    height: 100%;

    display: flex;
    //justify-content: center;
  }

  .form {
    //padding: calc(var(--site-spacing) * 2.5) 0 0 0;
    padding: calc(var(--site-spacing) * 2) 0 0 0;
    width: scale.sm-vw-px(245.49);
    height: inherit;

  }

  // Gravity form tweaks
  .ginput_container.ginput_container_consent, .gform_body .business-enquiry
  {
      //padding: calc(var(--spacing-5) - var(--input-spacing)) 0 var(--spacing-5) 0;
      padding: calc(var(--spacing-3) - var(--input-spacing)) 0 var(--spacing-5) 0;
      justify-content: flex-start;
      display: flex;
  }
  .ginput_container.ginput_container_consent {
    padding-top: 0;
    width: scale.sm-vw-px(230); //216
    margin: -1.2em auto 0;
    cursor: pointer;
  }
  .gform_body .business-enquiry {
    padding-bottom: 0;
    margin: 0 auto;

      .gchoice {
        display: flex;
      }
  }

  .panels {
    display: grid;
    justify-items: center;
    align-items: baseline;
    min-height: 50vh;
    position: absolute;
    top: 0;

    h2 {
      padding: calc(var(--spacing-1) + 0.15em) 9vw;
      margin-top: calc(var(--site-spacing) - 0.2em);
      text-transform: capitalize;
      background: var(--c-blue);
      position: absolute;
      z-index: 11;
    }

    &:before, &:after {
      height: var(--panel-height); // set via JS
      //max-height: calc(var(--max-panel-height) + var(--max-panel-height-footer));
      background-color: var(--c-blue);
      transition-delay: 0s;
    }

    &:after {
      background-position-x: 103%;
      --door-translate: calc(-50vw + var(--translate));
    }
    &:before {
      background-position-x: 103%;
      --scalex: -1;
      --door-translate: calc(50vw - var(--translate));
    }
  }

//  Scrolled in event
  &[data-scroll="in"]{
    .panels {
      &:before, &:after {
        //animation: sliding-doors-form 2.3s var(--easing) 0s forwards;
        animation: sliding-doors-form 2.6s cubic-bezier(0.27, 1, 0.89, 1) 0s forwards;
      }

      &:after {
      }

      &:before {
      }
    }
  }

//  Form confirmation
  .gform_confirmation_wrapper{
    height: inherit;
    .gform_confirmation_message {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: var(--fs-body-large);
      font-family: var(--ff-title);
      font-weight: 300;
      text-align: center;
      max-width: 12em;
      margin: 0 auto;
    }
  }


  .ginput_recaptcha {
    height: 0;
    display: none;
  }
}

.submit-button {
  --glow-color: 169, 121, 77;
  width: auto;
  margin: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s var(--easing), transform 0.3s var(--ease-out-4);

  .submit-text {
    color: var(--c-gold);
    position: absolute;
    font-size: var(--fs-button);
    padding: 0.5rem 1rem;
    font-family: var(--ff-title);
    transform-origin: center;
    line-height: 1;
    text-transform: uppercase;
    transition: transform 0.3s var(--ease-out-4);

    span {
    }
  }

  &:hover {

    .submit-text {
      transform: scale(0.97);
      span {
        animation: glintShine 0.7s var(--easing-3);
        @for $i from 1 through 7 {
          &:nth-child(#{$i}) {
            //transition-delay: #{$i * 0.1}s;
            animation-delay: #{$i * 0.1}s;
          }
        }
      }
    }
  }

  &:focus {
    //&::after {
    //  transform: translatey(5%);
    //}
  }
}

.form input[type=submit] {
  color: transparent;
}


@keyframes sliding-doors-form {
  0% {
    transform: translateX(0) scaleX(var(--scalex, 1));
  }

  100% {
    transform: translateX(var(--door-translate)) scaleX(var(--scalex, 1));
  }
}

//International Tel codes plugin for Gravity Forms
.form {
  .iti__dropdown-content {
    background: var(--c-blue);
    font-family: var(--ff-body);
    font-size: var(--fs-input);
  }

  .iti__selected-dial-code {
    font-size: var(--fs-input);
    letter-spacing: var(--title-letter-spacing);
  }

  .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
    color: var(--c-gold);
  }
  .iti__arrow {
    border-top-color: var(--c-gold);
  }
  .iti__arrow--up {
    border-bottom-color: var(--c-gold);
  }

  .iti__country.iti__highlight {
    background-color: rgba(255,255, 255, .05);
  }

  .large.iti__tel-input {
    padding-left: 1rem !important;
  }

  .iti--separate-dial-code .iti__selected-flag {
    background-color: transparent;
    padding-top: 0.3em;
  }

  .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: transparent;
  }

  .iti__dropdown-content {
    border-color: rgba(255, 255, 255, 0.5);
  }

  .iti__divider {
    border-color: rgba(255, 255, 255, 0.5);
  }


  .active {
    .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
      color: #fff;
    }
    .iti__arrow {
      border-top-color: #fff;
    }
    .iti__arrow--up {
      border-bottom-color: #fff;
    }

  }


  //GP Advanced select
  .ts-control, .ts-wrapper.single.input-active .ts-control {
    //font-family: var(--ff-body);
    transition: all 0.3s var(--easing);
    transition-property: color, background-color, border-color;
    background: transparent;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;
  }
  .ts-dropdown, .ts-dropdown.form-control, .ts-dropdown.form-select {
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    top: 0.2em !important;
    border: solid 1px rgba(255, 255, 255, 0.5);
  }

  .ts-wrapper {
    min-height: unset !important;
  }

  .ts-control {
    justify-content: center;
    line-height: 1 !important;
    padding: 0.6em 1em 0.6em !important;
    font-size: var(--fs-input);
    height: 2.0rem;
    background-position: 96.7% 0.65rem !important;
    .item {
      text-align: center;
      font-size: var(--fs-label);


      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      justify-content: center;
    }

    >input, >.item {
      height: 1.4555em;

    }

    >input {
      position: absolute !important;
      width: 13em !important;
    }
  }
  // .input-active .ts-control .item {
  //   position: absolute;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   width: 100%;
  //   justify-content: center;
  //
  //}

  //Options
  .ts-dropdown .option, .ts-dropdown .optgroup-header, .ts-dropdown .no-results, .ts-dropdown .create {
    background: #132852;
    color: var(--c-gold);
    text-align: center;
    padding: 0.9em 1em;
    text-transform: uppercase;

    font-size: var(--fs-label);
    transition: all 0.3s var(--easing);
    letter-spacing: var(--title-letter-spacing);

    &:not(:last-child) {
      border-bottom: solid 1px rgba(255, 255, 255, 0.5);
    }

    &:hover {
      background: #2C3F64;
    }
  }

  //Dropdown inner container
  .ts-dropdown-content {
    max-height: 270px !important;
    padding: 0 !important;
  }


  .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.003' height='13.003' viewBox='0 0 13.003 13.003'%3E%3Cpath id='Path_4691' data-name='Path 4691' d='M-5478.115,2029.583v8.695h8.694' transform='translate(2438.834 -5302.597) rotate(-45)' fill='none' stroke='%23a9794d' stroke-width='1'/%3E%3C/svg%3E%0A");
    background-size: 12px;
  }

  .focus .ts-control {
    box-shadow: unset;
    background-color: var(--c-gold) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.003' height='13.003' viewBox='0 0 13.003 13.003'%3E%3Cpath id='Path_4691' data-name='Path 4691' d='M-5478.115,2029.583v8.695h8.694' transform='translate(2438.834 -5302.597) rotate(-45)' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E%0A") !important;

    color: #fff !important;
  }

  //Filled out
  .full .ts-control {
    color: var(--c-gold);
    text-transform: uppercase;
    background: transparent;

    font-size: var(--fs-label);
    letter-spacing: var(--title-letter-spacing);
  }
}



//
// Mobile only
//--------------------------------------------------------------------- */
@media (max-width: $medium-breakpoint) {

  section.enquiry-form {
      &:after {
        transform: translateX(1vw);
      }

      &:before {
        transform: scaleX(-1) translateX(1vw);
      }

    .large.iti__tel-input {
      padding-left: 5.2em !important;
      text-align: left !important;
    }

    .ts-wrapper {

      .ts-control {
        height: 3.4em;
      }
      &:not(.full) {
        #input_1_13-ts-control {
          height: 3em;
          caret-color: transparent;

          &::placeholder {
            max-width: 15em;
            padding-right:2em;
            padding-left: 1.5em;
            display: block;
            width: 100%;
            white-space: pre-line;
            //top: -30px;
            bottom: 0.6em;

            position: relative;
            //top: 50%;
            //transform: translateY(-50%);

          }
        }
      }
    } // ts-wrapper
    .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
      background-size: 14px;
      background-position: right calc(100% - 1.15em) !important

    }



    }



}


//
// Tablet
//--------------------------------------------------------------------- */
@media (min-width: $medium-breakpoint) {

  section.enquiry-form {
    --translate: #{scale.md-vw-px(205)}; // how wide the panels are after opening (205 + 10)

    //padding: calc(var(--site-spacing) / 2) var(--site-padding) var(--site-spacing);
    padding: calc(var(--site-spacing) / 1.4) var(--site-padding) var(--site-spacing);


    .form {
      width: scale.md-vw-px(359);
      //padding: calc(var(--site-spacing)) 0 0 0;
      padding: calc((var(--site-spacing) / 2)) 0 0 0;

      .ts-control {
        height: 2.98rem;

      }

      .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
        background-size: 9px;
        background-position: 96.7% calc(100% - 1.05rem) !important;

      }
    }


    .panels {
      h2 {
        padding: calc(var(--spacing-4) + 0.1em) 3.8vw;
        //margin-top: calc(var(--site-spacing) - 1em);
        margin-top: calc((var(--site-spacing) / 2) - 1em);

      }
      &:before, &:after {
        background-size: scale.md-vw-px(101);
        background-position-x: 101.8%;
      }

    }

    //  Scrolled in event
    &[data-scroll="in"] {
      .panels {
      }
    }

    .ginput_container {
      &.ginput_container_consent {
        width: scale.md-vw-px(190);
        margin: -1.8em auto 0;
      }
    }

    //  Form confirmation
    .gform_confirmation_wrapper{
      .gform_confirmation_message {
        max-width: 13.9em;
      }
    }
  }
}

//
// Desktop
//--------------------------------------------------------------------- */
@media (min-width: $large-breakpoint) {

  section.enquiry-form {
    --translate: #{scale.lg-vw-px(548)}; // 538 + 10

    //padding: calc(var(--site-spacing) / 2) var(--site-padding) var(--site-spacing);

    .form {
      padding: calc(var(--site-spacing) + 0.3em) var(--site-padding) 0 var(--site-padding);
      //padding: var(--site-spacing) var(--site-padding) 0 var(--site-padding);


      .ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
        background-size: 12px;
        background-position: 96.7% calc(100% - 0.75rem) !important;
        height: 2.0rem;


      }

        .ts-wrapper:not(.full) {
            #input_1_13-ts-control {
            &::placeholder {
              bottom: 0.5em;
            }
            }
        }

    }


    //.ginput_container.ginput_container_consent, .gform_body .business-enquiry
    //{
    //  padding: calc(var(--spacing-4) - var(--input-spacing)) 0 var(--spacing-5) 0;
    //}



    .panels {
      h2 {
        padding: var(--spacing-5) 2vw;
        //margin-top: calc(var(--site-spacing) - 0.5em);
        margin-top: calc((var(--site-spacing) / 2) - 0.5em);
      }
      &:before, &:after {
      background-position-x: 101%;
        background-position-y: top;
        background-size: scale.lg-vw-px(120);
        //height: calc(var(--vh, 1vh) * 202);
      }
      &:after {
        //right: -0.3vw;
      }
    }

    .ginput_container {
      &.ginput_container_consent {
        //width: scale.lg-vw-px(257);
        width: scale.lg-vw-px(289);
        margin: -0.4em auto 0;

        //padding: calc(var(--spacing-4) - var(--input-spacing)) 0 var(--spacing-5) 0;
        padding: 0 0 var(--spacing-5) 0;

      }
    }

    //  Scrolled in event
    &[data-scroll="in"], &[data-is-visible="true"] {
    }

    //  Form confirmation
    .gform_confirmation_wrapper{
      .gform_confirmation_message {
        max-width: 16em;
      }
    }

  }

}