@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
      opacity: 0;
    }
}

.stylepress-email-subscribe{

  min-height: 55px;
  position:relative;
  display:inline-block;

  .stylepress-email-status{
    font-size:14px;
  }
  &.submitting{
    .loading{
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      z-index:4;
      &:before{
        top: 9px;
        left: 41%;
        z-index:5;
        content:'';
        position:absolute;
        width: 40px;
        height: 40px;
        background-color: #333;
        border-radius: 100%;
        -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
        animation: sk-scaleout 1.0s infinite ease-in-out;
      }
    }
    input{
      opacity: 0.4;
    }
  }
  &.error{
    .stylepress-email-status{
      color:#FF0000;
    }
  }
  &.success{
    input{
      // todo: animate nicely
      display:none;
    }
  }
  input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea {
    color: #666666;
    background-color: #fafafa;
    border-color: #cccccc;
  }

  input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus {
    color: #666666;
    background-color: #ffffff;
    border-color: #bfbfbf;
  }

  button, input[type="button"], input[type="reset"], input[type="submit"], .button, .button:visited {
    color: #ffffff;
    background-color: #666666;
  }

  button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button:focus {
    color: #666666;
    background-color: #eaeaea;
  }
}