/**
 * <stripe-card-element>
 */
[parasails-component='stripe-card-element'] {
  .card-element-wrapper {
    position: relative;
    .card-element {
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 30px;
      &.pseudofocused {
        // These should mimic your normal form inputs' :focus styles:
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
    }
    .status-indicator {
      font-size: 15px;
      position: absolute;
      right: 14px;
      top: 8px;
      &.hidden {
        display: none;
      }
      &.syncing {
        -webkit-animation: fa-spinner-rotate 1.5s infinite linear;
        animation: fa-spinner-rotate 1.5s infinite linear;
        @-webkit-keyframes fa-spinner-rotate {
          0% {
            -webkit-transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
          }
        }
        @keyframes rotate-clockwise {
          0% {
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
          }
          100% {
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
          }
        }
      }
    }
    &.secret-card-element-wrapper {
      opacity: 0;
      height: 1px;
    }
  }

  @media screen and (max-width: 450px) {
    .card-element-wrapper {
      .card-element {
        padding-right: 20px;
      }
      .status-indicator {
        right: 9px;
      }
    }
  }
}