@import 'variables';

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  color: $text-primary;
  font-family: $font-family-header;
}

h1,
.h1 {
  font-size: 36px;
  font-weight: $font-weight-header-regular;
  line-height: 34px;
}

h2,
.h2 {
  font-size: 26px;
  font-weight: $font-weight-header-bold;
  line-height: 34px;
}

h3,
.h3 {
  font-size: 20px;
  font-weight: $font-weight-header-bold;
  line-height: 34px;
}

body {
  color: $text-primary;
  font-family: $font-family-body;
  font-size: 14px;
  font-weight: $font-weight-body-regular;
}

.title-1,
.title-2,
.title-3,
.subtitle-1,
.subtitle-2,
.subtitle-3,
.body-1,
.body-2,
.body-3,
.body-secondary-3,
.body-placeholder,
.body-link,
.caption {
  font-family: $font-family-body;
}

.title-1 {
  font-size: 20px;
  font-weight: $font-weight-body-bold;
  line-height: 28px;
}

.title-2 {
  font-size: 16px;
  font-weight: $font-weight-body-bold;
  line-height: 1.42857;
}

.title-3 {
  color: $text-secondary;
  font-size: 14px;
  font-weight: $font-weight-body-bold;
  line-height: 1.42857;
}

.subtitle-1 {
  font-size: 20px;
  font-weight: $font-weight-body-semi-bold;
  line-height: 28px;
}

.subtitle-2 {
  font-size: 16px;
  font-weight: $font-weight-body-semi-bold;
}

.subtitle-3 {
  font-size: 14px;
  font-weight: $font-weight-body-semi-bold;
}

.body-1 {
  font-size: 20px;
  font-weight: $font-weight-body-regular;
  line-height: 20px;
}

.body-2 {
  font-size: 16px;
  font-weight: $font-weight-body-regular;
  line-height: 20px;
}

.body-3 {
  font-size: 14px;
  font-weight: $font-weight-body-regular;
}

.body-secondary-3 {
  color: $text-secondary;
  font-size: 14px;
  font-weight: $font-weight-body-regular;
}

.body-placeholder {
  color: $text-placeholder;
  font-size: 14px;
  font-weight: $font-weight-body-regular;
}

.body-link {
  color: $brand-color-4;
  font-size: 14px;
}

.caption {
  color: $text-secondary;
  font-size: 13px;
  font-weight: $font-weight-body-bold;
}

.column-name {
  color: $column-name-color;
  font-family: $font-family-body;
  font-size: 14px;
  font-weight: $font-weight-body-bold;
  line-height: 18px;
}

.resource-type {
  color: $text-placeholder;
  font-family: $font-family-monospace;
  font-size: 13px;
}

.helper-text {
  color: $text-secondary;
  font-family: $font-family-body;
  font-size: 12px;
}

.text-placeholder {
  color: $text-placeholder;
}

.text-secondary {
  color: $text-secondary;
}

.text-primary {
  color: $text-primary;
}

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

// Text for Screen Readers only
// Reference: Bootstrap 4 codebase
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
