div {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-body);
  // sizing // md is default
  font-size: var(--typography-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body-md);
  letter-spacing: var(--letter-spacing-default);
  padding: var(--scale-100) var(--scale-200);
  gap: var(--scale-0);
  //default colors
  color: var(--color-text-body);
  border: var(--border-width-sm) solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  background: var(--color-surface-primary);
  user-select: none;

  &.sm {
    padding: var(--scale-50) var(--scale-150);
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
  }

  &.xs {
    padding: var(--scale-25) var(--scale-100);
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
  }

  &.success {
    background-color: var(--color-surface-success);
    border-color: var(--color-icon-succes);
    color: var(--color-text-success);
  }

  &.warning {
    background-color: var(--color-surface-warning);
    border-color: var(--color-icon-warning);
    color: var(--color-text-warning);
  }

  &.error {
    background-color: var(--color-surface-error);
    border-color: var(--color-icon-error);
    color: var(--color-text-error);
  }

  &.information {
    background-color: var(--color-surface-information);
    border-color: var(--color-icon-information);
    color: var(--color-text-information);
  }

  &.brand {
    background-color: var(--color-surface-action-solid-hover-light);
    border-color: var(--color-icon-action);
    color: var(--color-text-action);
  }

  &.disabled {
    background-color: var(--color-surface-disabled);
    border-color: var(--color-icon-disabled);
    color: var(--color-text-disabled-on);
  }
}