@import "common/var.css";

@component-namespace kant {
  @component badge {
    color: var(--color-white);
    text-align: center;
    display: inline-block;

    @when primary {
      background-color: var(--color-primary);
    }

    @when success {
      background-color: var(--color-success);
    }

    @when error {
      background-color: var(--color-error);
    }

    @when warning {
      background-color: var(--color-warning);
    }

    @when size-normal {
      border-radius: 12px;
      font-size: 15px;
      padding: 2px 8px;
    }

    @when size-small {
      border-radius: 8px;
      font-size: 12px;
      padding: 2px 6px;
    }

    @when size-large {
      border-radius: 14px;
      font-size: 18px;
      padding: 2px 10px;
    }
  }
}