@import '~@blueprintjs/core/dist/variables'

$white: #FFFFFF
$white-grey: #FAFAFA
$off-white-block-background: rgb(250, 250, 250)
$black: #212B33 // #333333 // #1B1B1B  // #2a2d33
$red: #8E2323  // #C1392B  // #ff5a5f
$orange: #E67E22
$light-orange: #FFA600

// By layout
// Landing
$landing-light-background: $white
$landing-grey-background: #EBF2F6

// Project
$left-sidebar-grey: #313F4E
$left-sidebar-separator-grey: #CFCFCF // rgba($white, 0.3)
$right-sidebar-grey: #EBF2F6  // #CED9E0
$center-grey: $white // #EBF2F6

// UI
$ui-line-grey: #CFCFCF  // card borders, sidebar separators
$ui-deselected-grey: #EBF2F6  // deselected buttons
$ui-header-grey: #F5F8FA  // card header, table header
$ui-grey-font: #444444
$small-caps-grey: #666666 // sidebar categories
$regression-header-grey: #F6F6F6

// Accents
$primary-accent: #007BD7 // #5499D8
$primary-accent-hover: rgba(#5499D8, 0.5)
$secondary-accent: #004491

// Sizes
$navbar-top-logo-height: 48px
$top-bar-height: 55px
$left-sidebar-width: 110px
$right-sidebar-width: 280px
$center-pane-width: calc(100% - #{$left-sidebar-width} - #{$right-sidebar-width})
$page-width: ($left-sidebar-width + $right-sidebar-width + $right-sidebar-width)

// Media Query Sizes
$break-small: 320px
$break-large: 1200px

=workSans
  font-family: 'Work Sans', monospace
  font-feature-settings: 'tnum'        

=centerPaneWithSidebar
  max-width: $center-pane-width

=headerText
  color: $black
  font-size: 28px

=appHeaderText
  color: $black
  font-size: 16px

=RobotoCondensed
  font-family: 'Roboto Condensed', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif

=Montserrat
  font-family: 'Montserrat', 'Helvetica Neue, Helvetica, Arial', sans-serif

=cmu
  font-family: 'Computer Modern Serif', 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif

=raisedBox
  background-color: $white
  border: 1px solid $ui-line-grey
  border-radius: 2px
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.01), 0px 2px 2px 0px rgba(0, 0, 0, 0.058), 0px 1px 5px 0px rgba(0, 0, 0, 0.034)

=landingHeader
  +RobotoCondensed
  text-transform: uppercase
  text-align: center
  font-weight: 600
  font-size: 28px
  color: $black

=noSelect
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

=linkStyle($font-size)
  display: inline
  color: $primary-accent
  cursor: pointer
  text-decoration: none

  &:hover
    text-decoration: underline

=titleText
  $font-size: 16px
  color: $left-sidebar-grey
  font-size: $font-size
  a
    +linkStyle(font-size)

=regularText
  $font-size: 12px
  color: $black
  font-size: $font-size
  a
    +linkStyle($font-size)

=regularCopy
  $font-size: 16px
  line-height: 20px
  color: $black
  font-size: $font-size
  a
    +linkStyle($font-size)

=storyCopy
  $font-size: 16px
  color: $black
  font-size: $font-size
  a
    +linkStyle($font-size)

=greyHeading
  +noSelect
  font-size: 12px
  color: $small-caps-grey

=smallCaps
  +noSelect
  font-size: 12px
  text-transform: uppercase
  letter-spacing: 0.5px
  font-family: 'Roboto'
  color: $black
  // color: $small-caps-grey

=smallCapsBold
  +smallCaps
  font-weight: bold

=watermark
  +titleText
  font-family: 'Source Sans Pro'
  color: $small-caps-grey
  display: flex
  justify-content: center

=block
  padding: 11px
  margin: 0
  background-color: $off-white-block-background
  font-size: 14px
  text-align: center
  border-radius: 3px

  cursor: pointer
  outline: none

=heading($font-size, $line-height)
  color: $dark-gray1
  font-weight: 600
  font-size: $font-size
  line-height: $line-height

=h1
  +heading(40px, 0.8em)

=h2
  +heading(27px, 0.8em)

=h3
  +heading(24px, 0.8em)

=h4
  +heading(20px, 0.9em)

=h5
  +heading(17px, 0.9em)

=h6
  +heading(15px, 0.9em)

@keyframes move-bg
  from
    background-position-x: 0%
  to
    background-position-x: 100%

=move-bg-animation
  animation-name: move-bg
  animation-duration: 30s
  animation-direction: alternate
  animation-timing-function: easeInOutQuart
  animation-iteration-count: infinite

.headerControlRow
  display: flex
  flex-direction: row-reverse
  flex-grow: 1

  > div
    margin-left: 10px

.headerControl
  display: flex
  flex-direction: row
  align-items: center

  &.headerControlLong
    min-width: 160px

.sidebarDropdown
  margin-top: -1px

  > div > div:first-of-type
    margin-top: -1px
    border-color: $ui-line-grey
    background-color: transparent

    > div:first-child
      font-size: 12px

.fieldGroup
  &:first-child
    .fieldGroupHeader
      margin-top: 0
      display: flex
      flex-direction: row
      align-items: flex-end
      .fieldGroupLabel

      .fieldGroupAction
        +smallCaps
        cursor: pointer
        color: $primary-accent
        margin-left: auto

  .fieldGroupHeader
    display: flex
    align-items: center
    margin-top: 12px
    margin-bottom: 5px

    .fieldGroupLabel
      +smallCaps

    .generalTypeIcon
      margin-left: auto
