// Defined in the CHM Style Guide
// @extend where needed in SASS
// These use the sg- prefix (for style guide) to avoid collisions

$primary-orange:   #fe8a16
$hover-orange:     #f67502
$dark-steel-blue:  #22292d
$steel-blue:       #303b41
$light-steel-blue: #9da5aa
$bright-blue:      #4892bc
$dark-grey:        #4b4b48
$medium-grey:      #878782
$light-grey:       #cecec8
$dark-warm-grey:   #c6c6bc
$medium-warm-grey: #e2e2da
$light-warm-grey:  #f1f1eb

=header-font
  font-family: $header-font
  font-weight: normal

=bold-header-font
  font-family: $header-font-bold
  font-weight: normal

.sg-heading-1
  +header-font
  font-size: 32px
  line-height: 36px
  color: $steel-blue

.sg-heading-2
  +header-font
  font-size: 20px
  line-height: 28px
  color: $steel-blue

.sg-heading-3
  @extend .sg-heading-2
  color: $bright-blue

.sg-heading-4
  @extend .sg-heading-2
  color: $medium-grey

.sg-main-body
  font-size: 14px
  line-height: 24px
  font-weight: normal
  color: $dark-grey

.sg-secondary-body
  font-size: 12px
  line-height: 18px
  font-weight: normal
  color: $medium-grey

.sg-text-link-1
  font-weight: normal
  color: $primary-orange
  text-decoration: none
  &:hover
    color: $hover-orange

.sg-posted-dates
  font-size: 10px
  line-height: 16px
  font-weight: normal
  color: #cecec8

.sg-quote
  font-size: 18px
  line-height: 24px
  font-weight: normal
  color: #4892bc

.sg-numbers
  @extend .sg-text-link-1
  font-size: 14px
  +bold-header-font

.sg-filters
  font-size: 14px
  +bold-header-font
  color: white
  a
    @extend .sg-text-link-1
    text-decoration: none
    &:hover, &:active
      color: white

.sg-search-results
  font-size: 16px
  font-weight: normal
  color: white

.sg-story-hover
  font-size: 12px
  font-weight: normal
  color: $primary-orange

.sg-body-1
  font-size: 12px
  line-height: 16px
  font-weight: normal
  color: white

.sg-link-heading-1
  @extend .sg-text-link-1
  +bold-header-font
  font-size: 18px
  line-height: 22px

.sg-link-heading-2
  @extend .sg-link-heading-1
  font-size: 16px
  line-height: 20px
  &:active, &:hover
    color: white

.sg-link-heading-3
  @extend .sg-link-heading-2
  font-size: 14px
  line-height: 18px

.sg-path
  font-size: 10px
  line-height: 14px
  font-weight: normal
  color: #808b90

.sg-labels
  font-family: $header-font
  font-weight: normal
  font-size: 12px
  //line-height: 24px
  text-transform: uppercase
  letter-spacing: 2px
  color: #808b90
  //&:hover
  //  color: white

.sg-show-all
  @extend .sg-text-link-1
  font-family: $header-font
  font-weight: normal
  font-size: 12px
  text-transform: uppercase

.sg-homepage-intro-header
  +header-font
  font-size: 22px
  line-height: 28px
  color: white

.sg-homepage-intro-text
  font-family: $header-font
  font-size: 16px
  line-height: 24px
  color: $light-steel-blue

.sg-homepage-intro-thread
  @extend .sg-heading-2
  font-size: 18px
  line-height: 20px
  a
    @extend .sg-text-link-1

.sg-homepage-content-header
  font-size: 12px
  line-height: 18px
  font-weight: normal
  font-family: $header-font-bold
  text-transform: uppercase
  color: $medium-grey

.sg-homepage-featured-header
  font-size: 14px
  line-height: 18px
  font-weight: normal
  font-family: $header-font-bold
  text-transform: uppercase