@keyframes spinner {
  to {transform: rotate(360deg);}
}
@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity: 0;}
}

.admin {
  .petition-actions {
    margin-top: $gutter*2;

    .petition-action {
      display: block;
      padding: $gutter-two-thirds 0;
      border-top: 1px solid $border-colour;
      @extend %contain-floats;

      .saving::after {
        content: "";
        box-sizing: border-box;
        display: inline-block;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        margin-top: -10px;
        margin-left: 8px;
        border-radius: 50%;
        border: 2px solid rgba($caution, 0.5);
        border-top-color: $caution;
        background: rgba($caution, 0.5);
        animation: spinner .6s linear infinite;
        vertical-align: 3px;
      }

      .saved::after {
        background-color: $caution;
        border-radius: 6px;
        content: "";
        display: inline-block;
        height: 12px;
        margin-left: 8px;
        width: 12px;
        vertical-align: 3px;
        animation-name: fadeOut;
        animation-duration: 2s;
        animation-fill-mode: forwards;
      }
    }

    .petition-action-heading {
      @include bold-24;
      &:first-child {
        margin-top: 0;
      }
    }

    .present::after {
      background-color: $caution;
      border-radius: 5px;
      content: "";
      display: inline-block;
      height: 10px;
      margin-left: 8px;
      width: 10px;
      vertical-align: 3px;
    }

    .petition-action-subheading {
      @include bold-19;
      margin-top: 0;
    }
  }

  .back-link {
    display: inline-block;
    @include core-14;
    position: relative;
    margin: 0;
    padding-left: 14px;
    color: $black;
    border-bottom: 1px solid $black;

    &:before {
      display: block;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
      clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
      border-width: 5px 6px 5px 0;
      border-right-color: inherit;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }

  .back-link + h1 {
    margin-top: $gutter-two-thirds;
  }
}
