@import branding
@import mixins

.hubs
  .active_table .active_table_node

    //Prevents ugly overflows on hub title
    .columns.skinny-head
      white-space: nowrap
      overflow-x: hidden
      overflow-y: visible

    //Generic text link style
    a:hover, a:active, a:focus
      color: $clr-brick-bright

    //Hub and Producer icons
    // i.ofn-i_040-hub
    i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed
      font-size: 2rem
      display: inline-block
      margin-right: 0.25rem
      float: left

    //Closed & Open column
    .open_closed
      i
        font-size: 2rem
        float: right
        margin-left: 0.5rem

    //Hub Name
    span.hub-name-listing
      font-weight: 700

    @media all and (max-width: 640px)
      &.closed, &.open
        .active_table_row:first-child .skinny-head
          background-color: $clr-brick-light
          margin-top: -1rem
          margin-bottom: 1rem
          padding-top: 1rem
          padding-bottom: 1rem
      &.inactive
        &.closed, &.open
          .active_table_row:first-child .skinny-head
            background-color: white
      &.current
        &.closed, &.open
          .active_table_row:first-child .skinny-head
            background-color: $clr-brick-bright
      &.current
        &.inactive
          &.closed, &.open
            .active_table_row:first-child .skinny-head
              background-color: #555

    //Inactive row
    &.inactive, &.inactive strong
      color: $disabled-dark
      &, & *
        color: $disabled-dark

      a i.ofn-i_040-hub
        color: $disabled-dark
    &.current
      &.inactive
        &.closed, &.open
          .active_table_row:first-child
            background-color: $disabled-dark
            &, & *
              color: white
      &.closed
        &:hover, &:active, &:focus
          border: none
          color: $disabled-dark
      &.open
        .active_table_row:first-child
          color: $disabled-dark
          strong
            color: $disabled-dark
          &:hover, &:active, &:focus
            color: $disabled-dark
            strong
              color: $disabled-dark
        .active_table_row:nth-child(2)
          background-color: rgba(255, 255, 255, 0)

    //Padding second row
    &.open
      .active_table_row:nth-child(2)
        padding-bottom: 0.75rem

    //Current selected row
    &.current
      //overwrites active_table
      &.closed, &.open
        .active_table_row:first-child
          background-color: $clr-brick
          opacity: 1
          &:hover, &:focus, &:active
            opacity: 0.9
          &, & *
            color: white
      &.open, &.closed
        .active_table_row
          border-color: $clr-brick
      &.inactive
        &.open, &.closed
          .active_table_row
            border-color: $disabled-dark