// remove ios default form styles
%disable-default {
  -webkit-appearance: none;
  border-radius: 0;
}

.app-link-block__wrapper {
  @include container();
   padding: 30px calc(4 * #{gutter()});

   @include breakpoint($screen-md) {
    padding: 30px gutter();
   }

   @include breakpoint($screen-lg) {
    padding: 30px 0;
   }
}

.app-link-block-outerwrapper {
  background-color: $colour-black;
  width: 100%;
}

.app-link-block__innerwrapper {
  @include span(12);

  @include breakpoint($screen-md) {
    @include span(10);
    @include push(1);
  }

  @include breakpoint($screen-lg) {
    @include span(6);
    @include push(3);
  }

  .app-link-block__form {
    @include span(12);
    position: relative;
    padding: 20px 0 30px;

    .app-link-block__label {
      @extend label;
      @include span(12);
      position: absolute;
      left: auto;
      right: auto;
      top: 0;
      text-align: center;
      font-family: $body-font;
      font-weight: 500;
      color: $colour-white;
    }

    .form-item {
      @include span(12 of 12 no-gutters);
      margin-bottom: 0;
      margin-top: 10px;

      @include breakpoint($screen-md) {
        @include span(7 of 12 0);
      }

      label {
        @extend .visuallyhidden;
      }
    }

    .form-tel {
      @extend %disable-default;
      @include font-size($p-small-font-size);
      @include placeholder ($colour-dark-blue-lighter, 18px, $body-font);
      max-width: 100%;
      height: 60px;
      padding: 12px 0 15px 20px;
      border: 0;
    }

    .form-submit {
      @extend %disable-default;
      @extend .btn;
      @extend .btn--ruby;
      @include span(12 of 12 no-gutters);
      padding: 21px; // Reduce l-r padding a little here to ensure copy is always centred on smaller breakpoints

      @include breakpoint($screen-md) {
        @include span(5 of 12 0);
        margin-top: 10px;
      }
      &:hover, &:focus {
        transform: translateY(0px);
      }
    }

    .phone-number-valid-message {
      padding-left: 10px;
      &:before {
        content: '';
        display: inline-block;
        font-size: inherit;
        position: relative;
        width: 20px;
        height: 20px;
        top: 2px;
        margin-right: 3px
      }
    }

    .phone-number-valid-message {
      @include font-size($p-small-font-size);
      @include span(12);
      position: relative;
      font-family: $body-font;
      color: $colour-white;
      text-align: center;
      top:20px;

      > div {
         display: inline-block;
       }
    }
  }

  .error {
    .form-tel {
        border: 3px solid $colour-ruby;
    }

    .phone-number-valid-message {
      &:before {
        background:url( $image-path + "error-red-cross.svg") -10px -8px no-repeat;
      }
    }
   }

   .valid {
     .form-tel {
       border: 3px solid $colour-green;
     }
     .phone-number-valid-message {
       &:before {
         content: "\2713";
         color:$colour-green;
         text-align: center;
       }
     }
   }

  .sr-app-link-success-message {
      display: none;
  }

  .success {
    .sr-app-link-success-message {
      display: block;
      font-family: $body-font;
      color: $colour-white;
      text-align: center;

      h3 {
        position:relative;
        color: $colour-white;

        &:before {
          content: '';
          position: absolute;
          display: inline-block;
          background:url( $image-path + "success-tick.svg") left center/28px no-repeat;
          width: 100%;
          height: 40px;
          top: -5px;
          margin-left: -35px;
        }
      }

      p {
        color: $colour-white;
       }
    }
  }

  .ajax-progress.ajax-progress-throbber {
    position: absolute;
    bottom: 29px;
    left: 7px;
    width: 100%;
    text-align: center;

    .message {
      color: $colour-white;
    }
  }
}

.app-link__download {
  @include span(12);
  text-align: center;

  a {
    display:inline-block;
    vertical-align: top;
  }

  img {
    width:135px;
    display: block;
  }
}