////////////////////
// Table Objects
////////////////////

.table

  // .table--responsive
  &--responsive
    @media #{$small-only}
      border-top: $border-width solid $border-color
      display: block

    // .table--responsive__head & .table--responsive__foot
    &__head, &__foot
      @media #{$small-only}
        display: block
        position: absolute
        left: -9999px

    // .table--responsive__body
    &__body
      @media #{$small-only}
        display: block

    // .table--responsive__row
    &__row
      @media #{$small-only}
        display: block

    // .table--responsive__cell
    &__cell
      &--id
        width: 6em

      @media #{$small-only}
        border-bottom: 1px solid rgba($color-accent, 0.2)
        display: block
        &:first-child
          width: auto
        &:before
          content: attr(label)
          display: inline-block
          padding-right: $rhythm-horizontal
          width: 45%

    // .table--responsive__function--cell
    &__function-cell
      width: 4em
      padding: 0.375em
      @media #{$small-only}
        display: inline-block
        padding: $rhythm-vertical 0.375em
        width: auto
        &:before
          display: none

    // .table--responsive__function--cell
    &__function-cell
      width: 4em
      padding: 0.375em
      @media #{$small-only}
        display: inline-block
        padding: $rhythm-vertical 0.375em
        width: auto
        &:before
          display: none

    &__part-description
      display: block
      +ellipsize
      &:hover
        background: $color-accent
        display: inline-block
        float: left
        max-width: 400%
        overflow: hidden
        padding: 0 .5em
        position: relative

  &__link
    color: inherit
    &:hover
      border-bottom: $border-width solid currentColor
      color: $color-function
      fill: currentColor