@import branding
@import mixins
@import "compass/css3/user-interface"


.no-results
  font-size: 1.875rem

.active_table
  margin: 2em 0em
  @include user-select(none)
  .active_table_row
    display: block
    &:first-child
      cursor: pointer
      padding: 1rem 0

.active_table .active_table_node
  display: block
  border: 1px solid transparent 

  .active_table_row // Inherits from active_table
    border: 1px solid transparent
    &, & > a.row
      display: block

  .active_table_row.link
    border: 0

  &.open
    .active_table_row:first-child
      border-top: 1px solid $dark-grey
      border-left: 1px solid $dark-grey
      border-right: 1px solid $dark-grey
      border-bottom: none
      -webkit-box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5)
      box-shadow: inset 0 1px 2px 0 rgba(0,0,0,0.5)
      background-color: rgba(0,0,0,0.15)
      &:hover, &:active, &:focus
        color: $dark-grey
        background-color: rgba(0,0,0,0.05)

    .active_table_row:nth-child(2)
      border-left: 1px solid $dark-grey
      border-right: 1px solid $dark-grey
      border-top: none
      background-color: rgba(255,255,255,0.2)

    .active_table_row.link
      padding: 0
      -webkit-box-shadow:  0 1px 1px 0 rgba(0,0,0,0.35)
      box-shadow:  0 1px 1px 0 rgba(0,0,0,0.35)
      border-left: 1px solid $dark-grey
      border-right: 1px solid $dark-grey
      border-bottom: 1px solid $dark-grey
    
    p
      padding-top: 1em
    
    p.trans-sentence
      text-transform: capitalize
  
  &.closed
    &:hover, &:active, &:focus
      background-color: rgba(255,255,255,0.2)
      border: 1px solid $dark-grey
      color: $dark-grey

  &.current
    &.closed
      &, & *
        color: $dark-grey
    &.open
      .active_table_row:first-child
        &, & *
        color: $dark-grey