.call-to-action {
  $block: unquote("#{&}");
  &__item {
    color: #fff;
    border-radius: 0;
    display: block;
    text-align: center;
    vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    @include for-size(tablet-landscape-up) {
      padding: $spacer-half $spacer-small;
    }
    @include for-size(desktop-up) {
      padding: $spacer-half $spacer-mid;
    }
    &--text {
      color: $color-pink-bright;
      display: inline-block;
      font-size: $font-x-medium;
      text-decoration: underline;
      text-underline-position: under;
      @include for-size(desktop-up) {
        margin: 1em;
      }
    }
    &--reveal {
      color: #000;
      text-transform: uppercase;
      font-size: $font-x-small;
      text-align: left;
      padding: $spacer-small 0 $spacer-mid;
    }
  }

  &__button {
    display: inline-block;
    font-size: $font-small;
    padding: $spacer-small $spacer-mid;
    overflow: hidden;
    text-decoration: none;
    vertical-align: middle;
    -webkit-transition: box-shadow ease-in-out 0.3s;
    -moz-transition: box-shadow ease-in-out 0.3s;
    transition: box-shadow ease-in-out 0.3s;

    @include for-size(phone-only) {
      padding: $spacer-half;
      margin: $spacer-small $spacer-mid $spacer-mid 0;
      box-shadow: 9px 9px 0 0 $color-yellow-gorse;
    }
    @include for-size(tablet-landscape-up) {
      padding: $spacer-small $spacer-mid;
      height: 40px;
    }
    &--primary,
    &--secondary,
    &--next,
    &--previous, {
      background-color: $color-pink-bright;
      color: #fff;
      -webkit-transition: box-shadow ease-in-out 0.3s;
      -moz-transition: box-shadow ease-in-out 0.3s;
      transition: box-shadow ease-in-out 0.3s;
      &:after {
        display: inline-block;
        border-top: 7px solid transparent;
        border-left: 15px solid #fff;
        border-bottom: 7px solid transparent;
        content: " ";
        height: 0;
        margin: 0 0 0 $spacer-small;
        position: inherit;
        top: 1px;
        width: 0;
      }
      &:active, &:hover, &:focus {
        box-shadow: none;
        color: $color-yellow-gorse;
        &:after {
          border-left-color: $color-yellow-gorse;
        }
      }
    }
    &--secondary {
      background-color: $color-cyan_shade1;
    }

    &--previous {
      #{$block}__item--text {
        vertical-align: bottom;
      }
      &:before {
        content: " ";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 5px solid transparent;
        margin: 0 $spacer-mid 0 0;
      }
      &:after {
        display: none;
        visibility: hidden;
      }
      &:active, &:hover, &:focus {
        box-shadow: none;
        color: $color-yellow-gorse;
        &:before {
          border-right-color: $color-yellow-gorse;
        }
      }
    }
  }
  &__report {
    padding-right: $spacer-mid;
    float: left;
  }

  &__response {
    color: $color-pink-bright;
    vertical-align: middle;
    float: left;
  }

  &__replies-counter {
    color:$color-pink-bright;
    margin: 0;
    vertical-align: middle;
    text-align: right;
    float: right;
  }

  &__read-more {
    color: #000000;
    font-size: $font-x-small;
    text-decoration: underline;
    text-underline-position: under;
    text-transform: capitalize;
  }
  &--group {
    padding: $spacer-mid 0 $spacer-mid;
  }
  &--backToTop {
    background: $color-pink-bright;
    border-radius: 5px;
    padding: 0;
    margin: $spacer-mid 0;
    text-align: center;
    width: 60%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    &:active, &:hover, &:focus {
      box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    }
  }

}
