.state {
  text-transform: uppercase;
  font-size: 80%;
  font-weight: 600;

  &:before {
    content: '';
    position: relative;
    display: inline-block;
    margin-right: 3px;
    border-radius: $body-font-size/2;
    width: $body-font-size - 4px;
    height: $body-font-size - 4px;
  }

  @each $state in $states {
    &.#{$state}:before {
      background-color: get-value($states, $states-bg-colors, $state);

      // &, a {
      //   color: get-value($states, $states-text-colors, $state);
      // }
    }
  }
}

table tbody tr {
  &[class*="state"] td:first-child {
    border-left-width: 3px;
  }
  &.state-complete td:first-child { border-left-color: $color-success }
  &.state-cart     td:first-child { border-left-color: very-light($color-notice, 6) }
  &.state-canceled td:first-child { border-left-color: $color-error }
}