.button {
  font-family: $body-font-family;
  font-weight: $font-weight-medium;

  &.round {
    border-radius: 1000px;
  }
}

.card {
  margin-bottom: var(--space-small);
  padding: var(--space-normal);
}

.button-wrapper .button.link.grey-btn {
  margin-left: var(--space-normal);
}

.tooltip {
  border-radius: $space-smaller;
  font-size: $font-size-mini;
  max-width: 15rem;
  padding: $space-smaller $space-small;
  z-index: 999;
}

code {
  border: 0;
  font-family: 'Monaco', Verdana;
  font-size: $font-size-mini;

  &.hljs {
    background: $color-background;
    border-radius: var(--border-radius-large);
    padding: $space-two;
  }
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-capitalize {
  text-transform: capitalize;
}

.cursor-pointer {
  cursor: pointer;
}

// remove when grid gutters are fixed
.columns.with-right-space {
  padding-right: var(--space-normal);
}

$badge-size: var(--space-normal);
$label-badge-size: var(--space-slab);

.badge {
  border-radius: var(--border-radius-normal);
  font-weight: var(--font-weight-bold);
  height: min-content;
  line-height: 1;

  &.small {
    font-size: var(--font-size-nano);
    min-width: var(--space-slab);
    padding: var(--space-micro);
  }

  &.rounded {
    border-radius: var(--space-mega);
  }


  &.secondary {
    background: var(--s-75);
    color: var(--s-500);
    font-weight: var(--font-weight-bold);
    min-width: unset;
  }
}

.badge--label,
.badge--icon {
  background: var(--s-100);
  border-radius: var(--border-radius-small);
  display: inline-flex;
  margin-right: var(--space-smaller);
}

.badge--icon {
  align-items: center;
  height: $badge-size;
  justify-content: center;
  min-width: $badge-size;

  .svg-icon {
    color: inherit;
  }
}

.badge--label {
  height: $label-badge-size;
  margin-left: var(--space-smaller);
  min-width: $label-badge-size;
}


.padding-right-small {
  padding-right: var(--space-one);
}

.margin-right-small {
  margin-right: var(--space-small);
}