@import "../css/colors"
@import "../css/vars"

:local(.titleContainer)
  flex-grow: 1
  display : flex
  flex-direction: column
  justify-content: center
  padding : 12px 20px
  height: 80px;
  box-sizing: border-box
  overflow: hidden
  background-color : $lightGray

:local(.titleContainer.secondary)
  background-color: $white
  border: solid 1px $borderGray
  height: 80px;

:local(.titleCaption)
  font-family : $sansserif
  font-size : 21px
  //font-style : italic
  //font-weight : 700
  color : $textGray
  display: flex //center the content & spinner

:local(.subTitle)
  font-family : $sansserif
  font-size : 16px
  color : $textGray
  position : relative
  margin-top: 2px
  margin-bottom : 4px

:local(.subTitle.secondary)
  margin: 0

:local(.subTitleHidden)
  display : none

:local(.emphasize)
  border-left-width : 3px
  border-left-style : solid

:local(.warning)
  border-color: $yellow

:local(.error)
  border-color: $taibikaRed

:local(.info)
  border-color: $blue

:local(.success)
  border-color: $taibikaGreen