.metric-chart-status {
  position: absolute;
  top: 0.5em;
  left: -4px;
  font-size: 12px;
  padding: 0.15em 0.5em;
  border-radius: 3px 4px 4px 0;

  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px 4px 4px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }

  &::after {
    content: "";
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-right-width: 2px;
    border-left-width: 2px;
  }

  &.no-data {
    color: #fff;
    background: @dark-color-info;

    &::after {
      border-top-color: darken(@dark-color-info, 10%);
      border-right-color: darken(@dark-color-info, 10%);
    }
  }

  &.error {
    color: #fff;
    background: @dark-color-error;

    &::after {
      border-top-color: darken(@dark-color-error, 10%);
      border-right-color: darken(@dark-color-error, 10%);
    }
  }

  &.config-incomplete {
    color: #a27033;
    background: @dark-color-warning;

    &::after {
      border-top-color: darken(@dark-color-warning, 35%);
      border-right-color: darken(@dark-color-warning, 35%);
    }
  }

  &.config-unlimit {
    color: #ff4d4f;
    background: @dark-color-gray;

    &::after {
      border-top-color: darken(@dark-color-gray, 35%);
      border-right-color: darken(@dark-color-gray, 35%);
    }
  }
}