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

  &:before {
    content: "";
    position: relative;
    display: inline-block;
    margin-right: 3px;
    border-radius: $body-font-size * 0.5;
    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;
  }
}