// Widget Themes --------------------------------------------------
// Sucks that we have to do this at widget level but.. oh well


// DARK THEME
// -----------------------------------------------------------------------------
.Widget--dark
  color $bz-white
  background linear-gradient(bottom left, 65% $bz-grey--darker, $bz-grey--dark)

  // Widget Coloring
  .WidgetWindowBar
    background $bz-grey--dark
  .WidgetSearch
    background $bz-grey--darker
    border-color $bz-grey--dark
    &-btn
      border-color $bz-grey--dark
      &--text:hover
        color $bz-white
    // Dropdown Menu
    .DropdownMenu
      &-button:after
        color $bz-grey
  .Search-tag:after
    background $bz-grey--darker
  .Search
    color $bz-grey
    &-dropdown
      background $bz-grey--darker
    &-container
      border-color $bz-grey--dark
    input
      color $bz-white
      placeholderColor($bz-grey)
  .SearchResult
    border-color $bz-grey--dark
    &:not(.is-selected)
      color $bz-grey--light
    &:last-child
      &:after
        background rgba($bz-black, .6)


  // Feed
  .FeedStory,
  .feed-date
    border-color $bz-grey--dark
  .FeedStory-tag
    color $bz-grey

  // Dropdown Menu
  .DropdownMenu
    border-color $bz-grey--dark
    color $bz-grey
    &-button
      color $bz-white
    // No idea why this isnt working...
    // &.is-open &-button:after
    //   color $bz-white
    &.is-open
      .DropdownMenu-button:after
        color $bz-white

  // Security Widget
  .SecurityWidget
    .TabbedContent-tabs
      &:after
        border-bottom-color $bz-black
      button
        border-color $bz-black
        &:not(.is-selected)
          background $bz-black
          color $bz-grey--lightest
        &.is-selected
          color $bz-white
        &:after
          border-color $bz-black

  .KeyStat-row
    border-color $bz-grey--dark
  .SecurityContentOverview-keyStats
    border-color $bz-black

  .SecurityChart-filters
    color $bz-grey--light

  .FinancialTable tr:not(.FinancialTable-emptyRow)
    border-color $bz-grey--dark
  .FinancialTable th
    color $bz-white
    background $bz-grey--dark

  // Widget Modal
  .WidgetModal
    background rgba($bz-black, .6)
    &-box
      background $bz-black
    input
      border-color $bz-grey--dark
    &-radio input[type="radio"]
      & + label
        &:before
          border-color $bz-grey--dark
          box-shadow inset 0 0 0 0.4em $bz-black, inset 0 0 0 1em $bz-black
        &:hover:before
          box-shadow inset 0 0 0 0.5em $bz-black, inset 0 0 0 1em $bz-grey--dark
      &:checked + label:before
        box-shadow inset 0 0 0 0.4em $bz-black, inset 0 0 0 1em $bz-blue

  // Button
  .Button--text
    color $bz-grey--dark
    &:hover
      color $bz-white

  // Calendar Widget
  .CalendarDate
    &-display
      color $bz-white
      border-color $bz-grey--dark
    &-preset
      color $bz-grey--light
    &-picker
      background $bz-black
      &:before
        background-color $bz-black
      &:after
        background-color $bz-black

  .public_fixedDataTableRow_highlighted,.public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main
    background-color rgba($bz-grey--dark, .5)

  .public_fixedDataTableCell_main
    border-color $bz-grey--dark

  .CalendarDate-display
    border-color $bz-grey--dark

  .public_fixedDataTable_header,.public_fixedDataTable_header .public_fixedDataTableCell_main
    background-color #444e5c
    a
      color $bz-white

  .public_fixedDataTable_main,.public_fixedDataTable_header,.public_fixedDataTable_hasBottomBorder
    border-color $bz-grey--dark

  // Datepicker
  .DateRangePicker
    &__Month
      background-color $bz-black
    &__MonthHeader
      color $bz-white
    &__PaginationArrowIcon
      &--previous
        border-right-color $bz-white
      &--next
        border-left-color $bz-white
    &__MonthDates
      border-bottom-color $bz-white
    &__WeekdayHeading
      border-bottom-color $bz-grey
      color $bz-grey--lighter
      font-weight 400
    &__Date
      border-color $bz-grey--dark
      &--weekend
        background-color $bz-grey--darker

  // Loader
  .Loader
    border-color rgba($bz-white 0.3) $bz-white $bz-white





// LIGHT THEME
// --------------------------------------------------------------------------------------------------------------------------------------
// --------------------------------------------------------------------------------------------------------------------------------------
.Widget--light
  color $bz-black
  background linear-gradient(bottom left, 70% $bz-white, lighten($bz-grey--lighter, 7))

  // Widget coloring
  .WidgetWindowBar
    background $bz-grey--lighter

  .WidgetSearch
    background $bz-white
    border-color $bz-grey--light
    &-btn
      border-color $bz-grey--light
      &--text:hover
        color $bz-black
    .DropdownMenu
      color $bz-grey
      &-list
        background $bz-white
      &-button
        color $bz-black
        &:after
          color $bz-grey
      // No idea why this isnt working...
      // &.is-open &-button:after
      //   color $bz-black
      &.is-open
        .DropdownMenu-button:after
          color $bz-black
  .Search-tag:after
    background $bz-white
  .Search
    color $bz-grey
    &-dropdown
      background $bz-white
    &-container
      border-color $bz-grey--light
    input
      color $bz-black
      placeholderColor($bz-grey)
  .SearchResult
    border-color $bz-grey--light
    &:not(.is-selected)
      color $bz-grey--dark
    &:last-child
      &:after
        background rgba($bz-grey, .5)

  // Feed
  .FeedStory,
  .feed-date
    border-color $bz-grey--lighter
  .FeedStory-tag
    color $bz-grey

  // Dropdown Menu
  .DropdownMenu
    color $bz-grey
    border-color $bz-grey--light
    &-list
      background $bz-white
    &-button
      color $bz-white

  // Security Widget
  .SecurityWidget
    .TabbedContent-tabs
      &:after
        border-bottom-color $bz-grey--light
      button
        border-color $bz-grey--light
        &:not(.is-selected)
          background $bz-grey--light
          color $bz-grey--dark
        &.is-selected
          color $bz-black
        &:after
          border-color $bz-grey--light

  .KeyStat-row
    border-color $bz-grey--light
  .SecurityContentOverview-keyStats
    border-color $bz-grey--light
  .SecurityChart-filters
    color $bz-grey--dark

  .FinancialTable tr:not(.FinancialTable-emptyRow)
    border-color $bz-grey--light
  .FinancialTable th
    color $bz-black
    background $bz-grey--light

  // Watchlist Widget
  .Watchlist-data
    tr:nth-child(even)
      background rgba($bz-grey--lighter, .5)

  .WidgetModal
    background rgba($bz-grey, .5)
    &-header i
      &:hover
        color $bz-black
    &-box
      background $bz-white
    input
      border-color $bz-grey--light
    &-radio input[type="radio"]
      & + label
        &:before
          border-color $bz-grey--light
          box-shadow inset 0 0 0 0.4em $bz-white, inset 0 0 0 1em $bz-white
        &:hover:before
          box-shadow inset 0 0 0 0.5em $bz-white, inset 0 0 0 1em $bz-grey--light
      &:checked + label:before
        box-shadow inset 0 0 0 0.4em $bz-white, inset 0 0 0 1em $bz-blue
    .TabbedContent
      .Tab
        color $bz-grey--dark
        border-bottom-color $bz-grey--light
        &.is-selected
          color $bz-black
  .FilterTags-tags
    button
      background $bz-grey--light
      color $bz-grey--dark
      &:hover
        background $bz-grey--lightest

  .Button--text
    color $bz-grey
    &:hover
      color $bz-black

  // Calendar Widget
  .CalendarDate
    &-display
      color $bz-black
      border-color $bz-grey--light
    &-preset
      color $bz-grey--dark
    &-picker
      background $bz-white
      &:before
        background-color $bz-white
      &:after
        background-color $bz-white

  .public_fixedDataTableRow_highlighted,.public_fixedDataTableRow_highlighted .public_fixedDataTableCell_main
    background-color #e2e6ee

  .public_fixedDataTable_header,.public_fixedDataTable_header .public_fixedDataTableCell_main
    background-color #e2e6ee
    a
      color $bz-black

  .public_fixedDataTableCell_main
    border-color $bz-grey--light

  .public_fixedDataTable_main,.public_fixedDataTable_header,.public_fixedDataTable_hasBottomBorder
    border-color $bz-grey--light

  // Datepicker
  .DateRangePicker
    &__Month
      background-color $bz-white
    &__MonthDates
      border-bottom-color $bz-grey--lightest
    &__MonthHeader
      color $bz-black
    &__PaginationArrowIcon
      &--previous
        border-right-color $bz-grey--darker
      &--next
        border-left-color $bz-grey--darker
    &__WeekdayHeading
      border-bottom-color $bz-grey
      color $bz-grey--dark
      font-weight 400
    &__Date
      border-color $bz-grey--lightest
      &--weekend
        background-color $bz-grey--light

  // Loader
  .Loader
    border-color rgba($bz-black 0.3) $bz-black $bz-black