.table-hider
  background-color: #fff
  color: var(--color-link)
  padding: 10px
  cursor: pointer
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6)
  position: absolute
  overflow: hidden
  transition: transform .2s ease
  transform: scaleY(0)
  transform-origin: top

  &:hover
    background-color: var(--color-grey-light)

  .table-hider__label
    display: none

  &.table-hider--visible
    transform: scaleY(0.4)
    transition: none

    // TODO find better way to prevent transition on icons

    .fas
      transform: scaleY(2.5)

    &:hover
      transform: scaleY(1)

      .fas
        transform: scaleY(1)

[table-utils]
  max-width: 85vw
  margin-bottom: 10px
  min-height: 0
  line-height: 1.4

  .table-pill
    background-color: var(--color-dark)
    float: left
    color: #fff
    padding: 10px
    border-radius: 20px / 50%
    margin-right: 20px
    margin-bottom: 10px
    cursor: pointer

    .table-hider__label
      font-size: 16px
      font-weight: bold
      margin-left: 5px

  &:after
    content: ""
    display: block
    clear: both

.hide-columns--hidden-cell
  display: none