/* Generic styles */
input.button,
input.form-text,

select,
.ui-selectmenu-button {
  &:focus {
    // outline: none; bad for accessibility
    outline: $colour-red;
  }
}
// safari only hack
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
  ::-webkit-input-placeholder {
    opacity:  0.7;
  } 
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: $colour-jasper-grey;
  font-size: 18px;
  font-family: $body-font;
  opacity:  1;
  overflow: visible;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: $colour-black;
  font-size: 18px;
  font-family: $body-font;
  opacity:  0.7;
  overflow: visible;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: $colour-black;
  font-size: 18px;
  font-family: $body-font;
  opacity:  0.7;
  overflow: visible;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: $colour-jasper-grey;
  font-size: 18px;
  font-family: $body-font;
  opacity:  1;
  overflow: visible;
}

.button.form-submit:disabled {
  @include opacity(0.2);
}

/* General ESU styles */
.block--cr-email-signup {
  float: left;
  width: 100%;
  background: #fafafa; // change for variable

  label {
    @include visuallyhidden;
  }
  .ui-selectmenu-button,
  .form-text,
  input[type=select]
  input[type=text] {
    font-size: 18px;
    color: $colour-black;
    font-family: $body-font;
  }

  // Hide custom error container and all hidden fields
  .esu-errors.messages.messages--error,
  .ajax-progress,
  .esu-uuid,
  .esu-region,
  .esu-context-mapping,
  .esu-weight {
    display: none;
  }

  .block--cr-email-signup__inner-wrapper {
    width: calc(100% - (8 * #{gutter()}) );
    max-width: $max-width;
    @include clearfix;
    position: relative;
    margin: 20px auto;
    padding-top: 20px;
    padding-bottom: 20px;
    @include breakpoint($screen-md) {
      width: calc(100% - (4 * #{gutter()}) );
    }
  }

  .form-item {
    margin: 0;
    position: relative;
  }

  .cr-email-signup--messages {
    @include span(12);
    position: relative;
    height: 60px;
    > div {
      width: 100%;
    }
    .esu-title-message p,
    h3 {
      @extend h3;
      color: $colour-white!important;
    }
    .esu-title-message {
      margin-bottom: 26px;
    }
  }
  
  .esu-initial-message {
    display: block;
  }

  .esu-first-success-message,
  .esu-second-success-message {
    p {
      @extend h4;
    }
  }

  /* General field styling */
  .form-item-email,
  .form-item-school-phase {
    @include span(10);
    margin-right: 0;
  }

  .button.form-submit {
    @include border-radius(0);
    @include span(2 wide);
    height: 60px;
    padding: 0;
    margin-left: 0;
    cursor: pointer;
    color: #fff;
    border: 0;
    background-color: #5f5c59;
    font-size: 14px;
    font-weight: normal;
    -webkit-appearance: none;
    // iOS fix
    -webkit-tap-highlight-color: transparent;
    transition-property: background-color;
    transition-duration: 600ms;
    &:hover {
      background-color: #272727;
    }
  }

  .form-item-email,
  .form-item-firstname,
  .form-item-school-phase {
    .form-text,
    .form-item-email {
      width: 100%;
      height: 60px;
      margin-right: 0;
      padding: 15px 0 15px 20px;
      border: 0;

      &:focus {
        border: 1px solid #5f5c59;
      }
    }
  }

  .form-item-school-phase {
    select,
    .ui-selectmenu-button {
      width: 100% !important;
      height: 60px;
      margin-right: 0;
      padding: 18px 0 15px 20px;
    }
    .ui-selectmenu-button span.ui-selectmenu-text {
      padding: 0 10px;
    }
  }

  // Error state
  &.block--cr-email-signup--error {
    position: relative;
    .esu-errors.messages.messages--error {
      @include span(12);
      display: block;
      margin-top: 60px;
      margin-bottom: 10px;
      text-align: center;
      background: $colour-black url( $image-path + "error-red-cross.svg") 10px center no-repeat;
      color: $colour-white;
      border: none;
      font-size: 18px;
      box-shadow: none;
      @include border-radius(0);
      // backround-size breaks the background svg on IE, but is needed for chrome
      -webkit-background-size: 40px;
      padding: 20px 20px 20px 40px;
    }

    .form-item-email .form-text,
    .form-item-school-phase .ui-selectmenu-button {
      border: 2px solid $colour-black;
    }
  }


  /* Standard ESU */
  &.block--cr-email-signup--standard {
    background-color: $colour-red;

    &.error--email .form-item-email .form-text {
      border: 3px solid $colour-black;
    }

    input[type=submit].button {
      background: $colour-black url( $image-path + "arrow-right.svg") -4px center no-repeat;
      @include border-radius(0 30px 30px 0);
      text-indent: -9999px;
      max-width: 60px;
    }
    .ui-selectmenu-button,
    input[type=select],
    input[type=text] {
      @include border-radius(30px 0 0 30px);
      max-width: 100%;
    }
    .cr-email-signup--messages {
      @include span(12 no-gutter wide);
      height: auto;

      .esu-initial-message,
      .esu-first-success-message,
      .esu-second-success-message {
        position: relative;
        transform: translateY(0);
        width: 100%;
        
        p {
          // Override global colour-matching rules because... designers.
          color: $colour-white;
        }
      }
    }

    .block--cr-email-signup__inner-wrapper {
      .button.form-submit {
        margin-top: 0;
      }
      form {
        margin-top: 20px;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        float: left;

        @include breakpoint($screen-lg) {
          margin-top: 0;
        }
      }
    }
  }


  /* Workplace ESU */
  &.block--cr-email-signup--workplace {
    background-color: $colour-red;

    /* Errors */
    &.block--cr-email-signup--error {
      // Placeholder styles to make visible over RED background!
      &.error--firstname .form-item-firstname .form-text,
      &.error--email .form-item-email .form-text {
        border: 3px solid $colour-black;
      }
    }
    .cr-email-signup--messages {
      @include span(12 no-gutter wide);
      height: auto;
      h3 {
        color: $colour-white;
      }

      .esu-initial-message,
      .esu-first-success-message,
      .esu-second-success-message {
        position: relative;
        transform: translateY(0);
        @include span(12);
        
        p {
          margin-bottom: 0;
          // Override global colour-matching rules because... designers.
          color: $colour-white !important;
        }
      }
 
      .esu-initial-message {
        margin-left: 0;
      }

    }

    .block--cr-email-signup__inner-wrapper {
      &:after {
        content: none;
      }

      form {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        input[type="text"],
        input[type="submit"] {
          max-width: none;
        }

        .form-item-firstname,
        .form-item-email {
          margin-top: 26px;
          @include span(12);
          position: relative;
        }

        .form-submit {
          margin-top: 26px;
          padding: 12px 20px !important;
          @include span(12);
        }
      }
    }
  }


  /* Register Interest ESU */
  &.block--cr-email-signup--register-interest {
    background-color: $colour-purple;

    &.error--email .form-item-email .form-text {
      border: 3px solid $colour-black;
    }

    input[type=submit].button {
      background: $colour-black url( $image-path + "arrow-right.svg") -4px center no-repeat;
      @include border-radius(0 30px 30px 0);
      text-indent: -9999px;
      max-width: 60px;
    }

    .ui-selectmenu-button,
    input[type=select],
    input[type=text] {
      @include border-radius(30px 0 0 30px);
      max-width: 100%;
    }

    .cr-email-signup--messages {
      height: auto;
      text-align: left;
      @include span(12);

      h3 {
        color: $colour-pink;
      }

      .esu-initial-message,
      .esu-first-success-message {
        position: relative;
        transform: translateY(0);
        float: left;
        width: 100%;

        p {
          // Override global colour-matching rules because... designers.
          color: $colour-white;
        }
      }
    }

    .block--cr-email-signup__inner-wrapper {
      &:after {
        background: none;
        width: 0;
        height: 0;
        top: 0;
        left: 0;
        margin-left: 0;
      }

      form {
        margin-top: 10px;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        float: left;

        .form-item-email {
          @include span(10); 
          margin-right: 0;
          position: relative;
        }
      }
    }
  }
}


/* Medium breakpoint */
@include breakpoint($screen-md) {
  .block--cr-email-signup {
    .block--cr-email-signup__inner-wrapper {
      padding-top: 30px;
      padding-bottom: 30px;
    }
    .cr-email-signup--messages {
      @include span(4);
    }
    .form-item-email {
      @include span(4);
      margin-right: 0;
      margin-left: 0;
      
      .form-text {
        margin-right: 0;
        margin-left: 0;
      }
    }
    .button.form-submit {
      @include span(1 wide);
      margin-left: 0;
      margin-top: 0;
      margin-left: 0;
    }
    /*  Step 2 */
    &.block--cr-email-signup--step-2 {
      .form-item-school-phase {
        @include span(10);
        position: relative;
        margin-right: 0;

        select,
        .ui-selectmenu-button {
          width: 100% !important;
          margin-right: 0;
          margin-left: 0;
        }
      }
     .button.form-submit {
        margin-top: 0;
        @include span(2);
      }
    }

    &.block--cr-email-signup--step-3 {
      .cr-email-signup--messages {
        @include span(8);
      }
    }
    // Error state
    &.block--cr-email-signup--error {
      .block--cr-email-signup__inner-wrapper {
        padding-top: 75px;
        &:after {
          top: 80px;
        }
      }
      .esu-errors.messages.messages--error {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
        max-width: span(6);
      }
    }
    
    /* Standard ESU */
    &.block--cr-email-signup--standard {
      .block--cr-email-signup__inner-wrapper {
        form {
          @include span(8);

          .form-item-email {
            @include span(9);
            margin-right: 0;
          }
          .form-submit {
            @include span(2);
            margin-left: 0;
          }
        }
      }
    }

    /* Workplace ESU */
    &.block--cr-email-signup--workplace {
      .block--cr-email-signup__inner-wrapper {
        .cr-email-signup--messages {
          @include span(12 no-gutter wide);
          
          .esu-initial-message {
            margin-top: 0;
            margin-left: 0;
            margin-right: 0;
          }
        }

        form {
          position: relative;
          float: left;
          .form-item-firstname,
          .form-item-email {
            @include span(5);
          }

          .form-submit {
            @include span(2);
            position: relative;
            left: auto;
            top: auto;
            width: span(2)!important;
          }
        }
      }
      &.block--cr-email-signup--error  {
        .block--cr-email-signup__inner-wrapper {
          padding-top: 96px;
        }
      }
    }

    /* Register Interest ESU */
    &.block--cr-email-signup--register-interest {
      .block--cr-email-signup__inner-wrapper {
        &:after {
          position:absolute;
          content: "";
          width: 127px;
          height: 177px;
          top: 50%;
          left: 11%;
          margin-top: -88px;
        }

        form {
          width: 100%;
          margin-right: 0;
          margin-left: 0;
          float: left;

          .form-item-email {
            @include span(9);
            margin-right: 0;
            float: left;
          }

          .form-submit {
            @include span(4);
            margin-left: 0;
          }
        }
      }
    }
  }
}


/* Large breakpoint */
@include breakpoint($screen-lg) {
  .block--cr-email-signup {
    .cr-email-signup--messages {
      @include span(4);
      @include push(2);
    }

    .block--cr-email-signup__inner-wrapper {
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .form-item-email {
      @include span(3);
      margin-right: 0;
    }

    &.block--cr-email-signup--step-2 {
      .form-item-school-phase {
        @include span(10);
        margin-right: 0;
      }
    }

    // Error state
    &.block--cr-email-signup--error {
      .esu-errors.messages.messages--error {
        margin-top: 0;
        margin-bottom: 0;
        max-width: span(6);
      }
    }

    /* Standard ESU */
    &.block--cr-email-signup--standard {
      .block--cr-email-signup__inner-wrapper {
        .cr-email-signup--messages {
          @include span(7);
          text-align: left;
        }

        form {
          @include span(5);
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          .form-item-email {
            @include span(10);
            margin-right: 0;
          }
          .form-submit {
            @include span(2);
            margin-left: 0;
          }
          .form-text,
          .ui-selectmenu-button {
            max-width: 310px;
            float: right;
          }
        }
      }


      &.block--cr-email-signup--step-3 {
        .block--cr-email-signup__inner-wrapper {
          .cr-email-signup--messages {
            @include span(8);
            @include push(2);
          }
        }
      }
    }


    /* Workplace ESU */
    &.block--cr-email-signup--workplace {
      .cr-email-signup--messages {
        @include span(10);

        .esu-initial-message {
          @include span(8);
          margin-top: 26px;
        }
      }

      .block--cr-email-signup__inner-wrapper {
        form {
          @include span(10);
          margin-left: 0;
          padding-bottom: 0;
        }
      }
      
    }

    /* Register Interest ESU */
    &.block--cr-email-signup--register-interest {
      .cr-email-signup--messages {
        @include span(6);
        @include push(5);
      }

      &.block--cr-email-signup--error {
        .block--cr-email-signup__inner-wrapper {
          padding-top: 155px;
        }
      }

      .block--cr-email-signup__inner-wrapper {
        // Use image height and offset to set minimal height of container to ensure image is always 100% visible
        min-height: calc( 354px + 45px );

        &:after {
          background: url( $image-path + "fixedplaceholder-register-interest-bg-1x.png") no-repeat;
          width: 254px;
          height: 354px;
          top: 50%;
          left: 11%;
          margin-top: -177px;
        }

        form {
          margin-top: 10px;
          @include span(6);
          @include push(5);
          float: left;
          
          .form-item-email {
            @include span(8);
            position: relative;
            margin-right: 0;
          }

          .form-submit {
            padding: 12px 20px !important;
            @include span(4);
            margin-left: 0;
          }
        }
      }
    }
  }
}


/* Hide-show steps */
.block--cr-email-signup {
  // Step 1
  .form-item-email {
    display: block;
  }
  .button.step2,
  .form-item-school-phase,
  .esu-first-success-message,
  .esu-second-success-message {
    display: none;
  }
  // Step 2
  &.block--cr-email-signup--step-2 {
    .form-item-email,
    .button.step1,
    .esu-initial-message,
    .form-item-firstname {
      display: none !important;
    }
    .button.step2,
    .form-item-school-phase,
    .esu-first-success-message {
      display: block;
    }
  }
  
  // Step 3
  &.block--cr-email-signup--step-3 {
    .form-item-email,
    .form-item-school-phase,
    .button.form-submit,
    .esu-initial-message {
      display: none !important;
    }

    .esu-second-success-message {
      display: block;
    }
  }
}

// Privacy policy
.cr-email-signup-fundraise-form,
.cr-email-signup-register-interest-form,
.cr-email-signup-workplace-form,
.cr-email-signup-form {
  .esu-privacy-message p,
  .esu-initial-message p {
    color: $colour-white;
  }

  &.block--cr-email-signup--step-2, 
  &.block--cr-email-signup--step-3 {
    .esu-privacy-message {
      display: none;
    }
  }

  // ESU privacy message 
  .esu-privacy-message {
    margin-top: 26px;
    @include span(12);
    @include breakpoint($screen-lg) {
      @include span(8);
    }
  }
}

// ESU Workplace add margin top to privacy message on large screen
@include breakpoint($screen-lg) {
  .cr-email-signup-workplace-form {
    .esu-initial-message {
      margin-top: 0; 
    }
    .esu-privacy-message {
      @include span(8);
      margin-top: 26px;
    }
  }
}


// ESU Fundraise & Standard
.cr-email-signup-fundraise-form,
.cr-email-signup-form {
  &.block--cr-email-signup.block--cr-email-signup--standard .block--cr-email-signup__inner-wrapper form {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    float: left;
  }

  @include breakpoint($screen-lg) {
    &.block--cr-email-signup.block--cr-email-signup--standard .block--cr-email-signup__inner-wrapper form {
      @include span(6);
      @include push(3);
      top: 35%;
    }
  }
}

// ESU Interest
.cr-email-signup-register-interest-form {
  .esu-initial-message {
    margin-bottom: 16px;
  }
  .esu-privacy-message {
    @include span(12);
    @include breakpoint($screen-md){
    }
    @include breakpoint($screen-lg) {
      @include span(6);
      @include push(5);
    }
  }
}