.pk-state-tag {
  padding: $state-tag-padding;
  display: inline-block;
  vertical-align: middle;
  text-align: center;

  &.pk-error-tag {
    color: $state-error-color;
  }
  &.pk-normal-tag {
    color: $state-normal-color;
  }
  &.pk-close-tag {
    color: $state-close-color;
  }
  &.pk-success-tag {
    color: $state-success-color;
  }

  .pk-tag-dot,
  .pk-left-dot {
    display: inline-block;
    vertical-align: middle;
    width: $state-tag-size;
    height: $state-tag-size;
    border-radius: 100%;
  }

  .pk-tag-children {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
  }

  .pk-left-children {
    margin-left: $tag-dot-horizontal-margin;
  }
  .pk-right-children {
    margin-right: $tag-dot-horizontal-margin;
  }
  .pk-top-children {
    display: block;
    margin-top: $tag-dot-vertical-margin;
  }
  .pk-bottom-children {
    display: block;
    margin-bottom: $tag-dot-vertical-margin;
  }

  .pk-error-dot {
    background-color: $state-error-color;
  }

  .pk-normal-dot {
    background-color: $state-normal-color;
  }

  .pk-close-dot {
    background-color: $state-close-color;
  }

  .pk-success-dot {
    background-color: $state-success-color;
  }
}