/** Form response attribute element styles. */

.i-amphtml-story-page-attachment-form-submission-status {
    align-items: center !important;
    background: var(--i-amphtml-draggable-drawer-background-color) !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    display: flex !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    height: 54px !important;
    margin: 16px 0px !important;
    width: 100% !important;
    --i-amphtml-story-page-attachment-form-submission-status-icon-height: 26px !important;
  }

  [theme="dark"] .i-amphtml-story-page-attachment-form-submission-status {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  [submit-success] .i-amphtml-story-page-attachment-form-submission-status {
    color: #0F8514 !important;
  }

  [theme="dark"] [submit-success] .i-amphtml-story-page-attachment-form-submission-status {
    color: #8BDC8F !important;
  }

  [submit-error] .i-amphtml-story-page-attachment-form-submission-status {
    color: #DE3333 !important;
  }

  [theme="dark"] [submit-error] .i-amphtml-story-page-attachment-form-submission-status {
    color: #FF5C5C !important;
  }

  @keyframes submission-status-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  [submitting] .i-amphtml-story-page-attachment-form-submission-status,
  .i-amphtml-story-page-attachment-form-submission-status div {
    /* The entire [submitting] div will fade in along with its border, after which only the contents
    of the [submit-success] and [submit-error] divs will fade in. */
    animation: submission-status-fade-in 0.2s cubic-bezier(0.0, 0.0, 0.2, 1) !important;
  }

  .i-amphtml-story-page-attachment-form-submission-status-icon {
    height: var(--i-amphtml-story-page-attachment-form-submission-status-icon-height) !important;
    margin: 0px 14px !important;
    width: var(--i-amphtml-story-page-attachment-form-submission-status-icon-height) !important;
  }

  [submit-success] .i-amphtml-story-page-attachment-form-submission-status-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="none"><rect x="-14" y="-14" width="328" height="54" rx="12"/><circle cx="13" cy="13" r="13" fill="#8BDC8F"/><path d="m5.8 13.9 5 5 9.4-9.6" stroke="#000" stroke-width="2.5"/></svg>') !important;
  }

  [submit-error] .i-amphtml-story-page-attachment-form-submission-status-icon {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="26" height="26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 0a13 13 0 1 0 0 26 13 13 0 0 0 0-26Zm1.3 13c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3V7.8c0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3V13Zm0 5.2c0 .7-.6 1.3-1.3 1.3-.7 0-1.3-.6-1.3-1.3 0-.7.6-1.3 1.3-1.3.7 0 1.3.6 1.3 1.3Z" fill="#FF5252"/></svg>') !important;
  }

  .i-amphtml-story-page-attachment-form-submission-status .i-amphtml-story-spinner {
    height: var(--i-amphtml-story-page-attachment-form-submission-status-icon-height) !important;
    margin: 0 auto !important;
    position: relative !important;
    width: var(--i-amphtml-story-page-attachment-form-submission-status-icon-height) !important;

    /* Overriding default spinner values. */
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .i-amphtml-story-page-attachment-form-submission-status .i-amphtml-story-spinner-layer {
    color: var(--i-amphtml-draggable-drawer-text-color) !important;

    /* Overriding default spinner values. */
    filter: none !important;
  }
