#subscriptions .state {
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  padding: 2px 5px;
  width: 100%;
  display: inline-block;
  text-align: center;

  &:before {
    display: none;
  }

  &.active {
    background-color: $spree-green;
    &,
    a {
      color: #ffffff;
    }
  }

  &.paused {
    background-color: #ff9300;
    &,
    a {
      color: #ffffff;
    }
  }

  &.canceled {
    background-color: #c60f13;
    &,
    a {
      color: #ffffff;
    }
  }

  &.ended {
    background-color: #7a7a7a;
    &,
    a {
      color: #ffffff;
    }
  }

  &.pending {
    background-color: #7a7a7a;
    &,
    a {
      color: #ffffff;
    }
  }
}