.vinli-collection-table {
  border-collapse: collapse;
  font-size: 0.8em;
  width: 100%;

  &__wrapper {
    overflow-x: scroll;
  }

  .icon.spinner {
    stroke: palette(gray);
    fill: palette(gray);
    vertical-align: text-bottom;
    margin-right: 0.5em;
  }

  &__row {
    transition: background 0.1s ease;
    background: white;
    vertical-align: top;

    &:nth-child(even) {
      background: palette(gray, xx-light);
    }

    &--header {
      background: transparent;
    }

    &--body {
      &:hover {
        background: rgba(palette(blue, xx-light), 0.25);
      }
    }

    .has-error &,
    .is-loading & {
      opacity: 0.25;
    }

    &--error {
      background: palette(red);
      color: $white;
      font-weight: font-weight(heavy);
      opacity: 1 !important;

      &:hover {
        background: palette(red);
      }
    }

    &--loading {
      background: palette(gray, light);
      color: $white;
      font-weight: font-weight(heavy);
      opacity: 1 !important;

      &:hover {
        background: palette(gray, light);
      }
    }
  }

  &__cell {
    border-bottom: 1px solid rgba($black, 0.05);
    padding: 1em 2em;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;

    .long-cell {
      width: 40vw;
      max-width: 400px;
      min-width: 200px;
      white-space: pre-line;
      margin-top: -1.25em; // ugh...
    }

    &--loading,
    &--empty,
    &--error {
      text-align: center;
    }

    &--header {
      background: darken(palette(gray, xx-light), 2%);
      color: palette(gray, dark);
      padding: 1.5em 2em;
      position: relative;
      user-select: none;
      white-space: nowrap;
      font-weight: font-weight(heavy);

      &.vinli-collection-table__cell--sort {
        font-weight: font-weight(heavy);
      }

      &::selection {
        background: none;
        color: palette(gray);
      }

      &:hover {
        cursor: pointer;
      }

      .icon {
        height: 10px;
        position: absolute;
        right: 0.5em;
        top: 50%;
        transform: translateY(-50%) rotate(0deg);
        width: 10px;

        &--flip {
          transform: translateY(-50%) rotate(180deg);
        }
      }
    }

    &--body {
      &.vinli-collection-table__cell--sort {
        background: rgba(palette(blue, xx-light), 0.25);
      }
    }

    @include gmq(portable) {
      padding: 1em 1.5em;
    }
  }
}

/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
.stacked {
  .vinli-collection-table__cell {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 41%;

    @include gmq(portable) {
      padding: 2.25em 0.5em 1em;
    }

    &::before {
      /* Now like a table header */
      position: absolute;

      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
      font-weight: 600;
      color: palette(gray, dark);
      content: attr(data-title);
    }
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }
}

.collection-list {
  &--grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    @include gmq(portable) {
      justify-content: stretch;
    }
  }
}