[table-utils] {
  margin-bottom: 20px;
  line-height: 1.4;
  max-width: 85vw;

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

    .table-pill__content {
      font-size: 16px;
      font-weight: bold;
      margin-left: 5px;
    }
  }
  .table-pill.table-pill--hidden {
    animation: fadeout 2s ease-in alternate infinite;
    display: none;
  }
  .table-pill.table-pill--floating {
    position: fixed;
    .table-pill__content { display: none; }
  }

  .table-pill.table-pill--hide {
    padding-left: 10px;
  }

  .table-pill--unhide {
    padding-left: 10px;
  }

}

.hide-columns--hidden-cell {
  display: none;
}

@keyframes fadeout {
  from: { opacity: 1; }
  to: { opacity: 0; display: none; }
}
@keyframes fadein {
  from: { opacity: 0; }
  to: { opacity: 1; }
}