.SecurityWidget
  overflow-y auto
  & > .TabbedContent
    height calc(100% - 115px)

// Main search for security widget
.SecuritySearch
  line-height 40px
  background $bz-white
  border-bottom 1px solid $bz-grey--light
  // this should always be transparent
  // the container should decide the color
  .Search_input
    background transparent

// Header for security widget
.SecurityHeader
  display flex
  justify-content space-between
  white-space nowrap
  padding 10px 20px
  &-info
    display flex
    align-items center



// Security Overview Content
// --------------------------------------------------
.SecurityContentOverview
  display flex
  flex-wrap wrap
  box-sizing border-box
  &-main,
  &-keyStats
    padding 20px 20px 0 20px
  &-main
    flex 2
    display flex
    flex-direction column
    min-width 500px
    box-sizing border-box
  &-keyStats
    flex 1
    min-width 350px
    border-left-width 1px
    border-left-style solid
  &-calendar
    flex-basis 100%

.SecurityInfo,
.SecurityPrice
  display inline-block

.SecurityInfo
  &-name
    font-size 23px
    margin-right .5em
    text-transform capitalize
  &-index
    font-size 18px
    font-weight 300
    text-transform uppercase

.SecurityPrice
  margin-left 2em
  &-price
    font-size 23px
    margin-right .25em
  &-percent
    font-size 18px

.SecurityChart
  margin-bottom 20px
  &-filters
    text-align right
    button
      font-size 12px
      border 0
      background 0
      outline 0
      color inherit
      cursor pointer
      padding 0
      simpleTransition(color)
      & + button
        margin-left 1em
      &.is-active
        color $bz-blue
        border-bottom 1px solid $bz-blue
      &:hover
        color $bz-blue
      // temporary last two extra margin
      &:nth-last-child(2)
        margin-left 3em
  // Prevent highcharts from doing some width fuckery
  .highcharts-container, .highcharts-container svg
    width 100% !important

  .highcharts-tooltip>span
    background rgba(255, 255, 255, .85)
    box-shadow 0 0 10px rgba(0, 0, 0, .1) !important
    padding 10px

.SecurityFeed,
.SecurityFeed .TabbedContent
  height 100%
  flex 1
  display flex
  flex-direction column
  // we should not have to use .feed in this component
  // Sizing and display should depend on the container
  // .feed should be made to fill its container
  .feed
    position static
    &-container
      height 500px
      overflow-y auto
      margin-bottom 20px
      flex 1

.SecurityDesc
  margin-bottom 20px
  &-text
    max-height 4em
    margin-bottom .5em
    overflow-y hidden
    &.is-expanded
      max-height none
  &-logo
    width 4em
    height 4em
    margin-left 1em
    margin-bottom 1em
    float right
    display flex
    align-items center
    justify-content center
    img
      width auto
      height auto
      max-width 100%
      max-height 100%
  &-expand
    cursor pointer
    text-transform capitalize
    color $bz-blue

.KeyStat
  margin-bottom 20px
  box-sizing border-box
  &-category
    font-size 16px
    font-weight 600
    margin-bottom .75em
    text-transform capitalize
  &-table
    font-size 13px
  &-row
    border-bottom 1px solid $bz-grey--light
  &-stat, &-value
    padding-top .4em
    padding-bottom .4em
    &:not(:first-child)
      padding-left .4em
    &:not(:last-child)
      padding-right .4em
  &-stat
    font-weight 300
  &-value
    font-weight 600

  // KeyStat--simple
  &--simple
    width 50%
    display inline-block
    &:nth-child(even)
      padding-left 20px
    &:nth-child(odd)
      padding-right 20px
  &--simple &-table
    display block
  &--simple &-row
    display flex
    justify-content space-between
  &--simple &-value
    text-align right

  // KeyStat--comparison
  &--comparison &-table
    display table
    width 100%
    border-collapse collapse
  &--comparison &-row
    display table-row
  &--comparison &-stat, &--comparison &-value
    display table-cell
    white-space nowrap
  &--comparison &-stat
    width 35%
  &--comparison &-value
    &:not(:last-child)
      width 22.5%
    &:last-child
      width 20%

// Security Calendar Content
// --------------------------------------------------
.SecurityCalendar
  font-size 13px

.SecurityCalendarTable
  padding 0 20px
  &-data
    width 100%
    thead tr
      background $bz-grey--lighter
    tbody tr:hover
      background $bz-grey--lighter
    td, th
      padding .5em
      border 1px solid $bz-grey--light
    th
      font-weight 400
      cursor pointer
    td
      text-align right

// Security Chart Content
// --------------------------------------------------
.SecurityContentChart
  &-container
    height 100%


// Security News Content
// --------------------------------------------------
.SecurityContentNews
  .TabbedContent
    .feed-container
      margin-bottom 0


// Extra padding for other tabs... will change with new theme
.SecurityContentNews, .SecurityContentChart, .SecurityContentFinancials
  .SecurityHeader
    padding-left 20px
    padding-right 20px
    padding-bottom 20px


// Security Financials Content
// --------------------------------------------------
.SecurityContentFinancials
  padding-top 20px
.FinancialTable
  color inherit
  font-size 13px
  font-weight 300
  width 100%
  margin-top 1em
  th, td
    padding .333em .4em
    &:first-child
      text-align left
    &:not(:first-child)
      text-align right
  tr:not(.FinancialTable-emptyRow)
    border-bottom-width 1px
    border-bottom-style solid
  td:first-child
    padding-left 1em
  &-total
    font-weight 600
  &-section
    td
      padding-top 1.333em
      font-weight 600
      &:first-child
        text-transform uppercase
        padding-left .4em
  th
    background $bz-grey--light
    color $bz-grey--dark
    font-weight 600


// Misc
// --------------------------------------------------
.SecurityContentNews,
.SecurityContentChart
  padding-top 20px
  box-sizing border-box
  height 100%