@use 'mixins' as mixins;
@use 'variables' as *;

.sky-page-heading {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 34px;
}

.sky-section-heading {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 26px;
}

.sky-subsection-heading {
  @include mixins.sky-subsection-heading();
}

.sky-headline {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 600;
  font-size: 22px;
}

.sky-emphasized {
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
  font-weight: 600;
  font-size: 16px;
}

.sky-deemphasized {
  @include mixins.sky-deemphasized();
}

.sky-field-label {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 400;
  font-size: $sky-font-size-base;
}

// Status text
.sky-text-info {
  color: var(--sky-text-color-default);

  &:before {
    content: '\f06a';
    font-family: FontAwesome;
    margin-right: 5px;
    color: var(--sky-highlight-color-info);
  }
}

.sky-text-success {
  color: var(--sky-text-color-default);

  &:before {
    content: '\f00c';
    font-family: FontAwesome;
    margin-right: 5px;
    color: var(--sky-highlight-color-success);
  }
}

.sky-text-warning {
  color: var(--sky-text-color-default);

  &:before {
    content: '\f071';
    font-family: FontAwesome;
    margin-right: 5px;
    color: var(--sky-highlight-color-warning);
  }
}

.sky-text-danger {
  color: var(--sky-text-color-default);

  &:before {
    @include mixins.sky-danger;
  }
}

// Retconning modern theme classes

.sky-font-body-default {
  font-size: $sky-font-size-base;
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
}

.sky-font-body-sm {
  font-size: 13px;
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
}

.sky-font-body-lg {
  font-size: 16px;
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
}

.sky-font-field-label {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 400;
  font-size: $sky-font-size-base;
}

.sky-font-deemphasized {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 400;
  font-size: $sky-font-size-base;
  font-style: italic;
}

.sky-font-emphasized {
  font-weight: 600;
}

.sky-font-heading-1 {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 34px;
}

.sky-font-heading-2 {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 26px;
}

.sky-font-heading-3 {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 300;
  font-size: 19px;
}

.sky-font-heading-4 {
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
  font-weight: 600;
  font-size: 16px;
}

.sky-font-heading-5 {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 400;
  font-size: $sky-font-size-base;
}

.sky-paragraph {
  line-height: 1.5;
}

.sky-font-display-1 {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 34px;
}

.sky-font-display-2 {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 300;
  font-size: 26px;
}

.sky-font-display-3 {
  font-family: $sky-font-family-condensed;
  color: var(--sky-text-color-default);
  font-weight: 600;
  font-size: 22px;
}

.sky-font-display-4 {
  font-family: $sky-font-family;
  color: var(--sky-text-color-default);
  font-weight: 600;
  font-size: 16px;
}

.sky-screen-reader-only {
  @include mixins.sky-screen-reader-only;
}

.sky-font-data-label {
  font-family: $sky-font-family;
  color: var(--sky-text-color-deemphasized);
  font-weight: 400;
  font-size: $sky-font-size-base;
}
