// prevent body from scrolling when esu popup is visible
.js-esu-head-noscroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
}

//hide esu form initially
.block--cr-email-signup.block--cr-email-signup--head,
.block--cr-email-signup.block--cr-email-signup--head.block--cr-email-signup--error {
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  height: 100%;
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.5);

  @include breakpoint($screen-lg) {
    left: 0;
    right: 0;
  }

  .cc-banner--visible & {
    top: 68px;
  }

  .block--cr-email-signup__inner-wrapper {
    position: relative;
    overflow-y: auto;
    top: 0;
    right: 0;
    width: 100%;
    margin: 0 0 60px 0;
    padding: 35px;
    background-color: $colour-black;
    @include breakpoint($screen-md) {
      top: 78px;
      left: 25%;
      padding: 55px;
      width: 50%;
    }
    @include breakpoint($screen-lg) {
      top: 109px;
    }
    @include breakpoint($desktop-nav-breakpoint) {
      top: 109px;
    }

    a.close-button {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;

      .icon {
        position: relative;
        width: 30px;
        height: 30px;
        cursor: pointer;
        fill: $colour-white;
      }

      &:hover,
      &:focus {
        .icon {
          fill: $colour-jasper-grey;
        }
      }
    }
  }

  &.block--cr-email-signup--error.block--cr-email-signup {
    .esu-errors.messages.messages--error {
      position: relative;
      margin: 0 2px 10px;
      padding: 0 0 0 25px;
      max-width: 100%;
      background: $colour-black url($image-path + "error-icon.png") 0 top/1em no-repeat;
      text-align: left;
    }
  }
}

.ui-selectmenu-menu {
  z-index: 102;
}

.block--cr-email-signup.block--cr-email-signup--head.cr-header-email-signup-form {
  &.visible {
    display: block;
  }
  .cr-email-signup--messages {
    width: auto;
    height: 100%;
    margin: 0;

    @include breakpoint($screen-md) {
      max-width: initial;
    }
  }

  form {
    .form-item-email {
      margin: 0;
      width: 100%;

      label {
        @include visuallyhidden;
      }
      input {
        margin: 0 0 30px 0;
        padding: 15px;

        @include breakpoint($screen-md) {
          max-width: 500pxx;
        }
      }
    }
  }

  .js-form-type-select {
    margin: 0;
    input,
    .ui-selectmenu-button {
      float: left;
      max-width: 310px;
      padding-left: 22px;
      border-radius: 36px 0 0 36px;
    }
  }
  .js-form-type-select {
    margin-top: 25px;
  }

  input[type=submit].button {
    @extend .btn;
    margin-bottom: 40px;
  }

  .esu-title-message,
  .esu-initial-message,
  .esu-privacy-message,
  .esu-first-success-message,
  .esu-second-success-message {
    p {
      margin: 0 0 30px 0;
      text-align: left;
      color: $colour-white;
    }
  }
  .cr-email-signup--messages .esu-title-message p {
      @extend h2;
  }
  .esu-privacy-message p {
    margin-bottom: 0;
  }
  .esu-second-success-message {
    @include span(8);
    @include push(2);
  }
}