@import branding
@import mixins
@import typography

// Search page
#groups
  background-color: lighten($clr-brick, 56%)
  background-image: url("/assets/groups.svg")
  background-position: center 50px
  background-repeat: no-repeat
  background-size:  922px 922px
  @include sidepaddingSm
  @include panepadding
  a > .group-name
    &:hover, &:focus, &:active
      text-decoration: underline

  .groups-icons
    text-align: right
    a
      font-size: 1.5em
  
  .groups-header
    border: 2px solid $clr-brick-light-bright
    @include border-radius-mixed(0.5em, 0.5em, 0, 0)
    margin: -1rem 0 1rem
    padding: 1rem 0.9375rem
    @media screen and (min-width: 640px)   
      border: 0 none
      @include border-radius(0)
      margin: 0
      padding: 0

.group
  padding-bottom: 0.5em
  .row div
    font-size: 110%
  .row a
    vertical-align: middle
  .ofn-i_035-groups
    font-size: 120%
    vertical-align: middle
    
// Individual Page
#group-page
  .group-logo, .group-header
    text-align: center   
  .group-logo  
    padding-bottom: 1em
    max-height: 200px
  .group-name
    border-bottom: 1px solid #ccc
  @media screen and (min-width: 768px)
    .group-logo, .group-header
      text-align: left
    .group-logo       
      max-height: 120px
      float: left
      padding-right: 1em
      background-color: white

  // Tabs
  .tabs dd a // Mobile first
    padding: 0.25rem 0.45rem 0rem
    font-size: 0.75rem
    border: none
    margin-bottom: -2px
    margin-right: 2px
    text-transform: capitalize
    @include headingFont
    @include border-radius(1em 0.25em 0 0) 
    @include gradient($disabled-light, $disabled-bright)
  @media screen and (min-width: 768px)
    .tabs dd a
      padding: 0.5rem 1rem 0.25em
      font-size: 0.875rem
      @include border-radius(1.5em 0.25em 0 0) 
  @media screen and (min-width: 1024px)
    .tabs dd a
      padding: 0.75rem 1.5rem 0.5em
      font-size: 1rem
      @include border-radius(2em 0.25em 0 0) 
  .tabs dd.active a
    @include gradient(white, white)
    margin-bottom: -1px
    border-top: 1px solid $light-grey
    border-left: 1px solid $light-grey
    border-right: 1px solid $light-grey
    border-bottom: 0
  .tabs-content
    border-top: 1px solid $light-grey
    border-left: 1px solid $light-grey
    border-right: 1px solid $light-grey
    border-bottom: 1px solid $light-grey
    padding: 1.5em

  // Producers tab
  .producers
    background-image: none
    .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer
      color: $clr-turquoise
  // Hubs tab
  .hubs
    background-image: none
    padding-top: 0
    padding-bottom: 0