.state {
  @include border-radius($border-radius);
  text-transform: uppercase;
  font-size: 80%;
  font-weight: 600;
  border: 1px solid transparent;
  padding: 2px 5px;  
  width: 100%;
  display: inline-block;
  text-align: center;

  @each $state in $states {
    &.#{$state} {
      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 }
}