.table {
  display: flex;
  flex-direction: column;
  border: 1px solid $gallery-100;

  &-head {
    display: flex;
    height: 44px;

    &-cell {
      display: flex;
      align-items: center;
      flex: 1;
      padding: $base-spacing-3-4th $base-spacing;

      h6 {
        font-weight: 700;
        line-height: 1;
      }

      &.flex-center {
        h6 {
          text-align: center;
        }
      }
    }

    @media only screen and (max-width: map-get($base-breakpoints, 'lg')) {
      display: none;
    }

    @media only screen and (min-width: map-get($base-breakpoints, 'lg')) and (max-width: map-get($base-breakpoints, 'xl')) {
      &-cell {
        padding: $base-spacing-3-4th $base-spacing-half;
      }
    }
  }

  &-body {
    display: flex;
    flex-direction: column;

    &-cell {
      display: flex;
      align-items: center;
      flex: 1;
      padding: $base-spacing-half $base-spacing;

      p {
        line-height: 16px;
        margin: 0;
      }

      &.flex-center {
        p {
          text-align: center;
        }
      }
    }

    @media only screen and (min-width: map-get($base-breakpoints, 'lg')) and (max-width: map-get($base-breakpoints, 'xl')) {
      &-cell {
        padding: $base-spacing-3-4th $base-spacing-half;
      }
    }
  }

  &-row {
    display: flex;
    flex-wrap: wrap;
    transition: background-color ease-out 0.3s;

    &:nth-child(2n + 1) {
      background-color: $gallery-100;
    }

    &:hover {
      background-color: $alto-200;
    }

    .button-primary-lnk {
      padding: $base-spacing 0;
    }

    @media only screen and (max-width: map_get($base-breakpoints, 'lg')) {
      flex-direction: column;
      padding-top: $base-spacing-2x;
      padding-bottom: $base-spacing-2x;

      label {
        font-size: $base-font-size * 0.875; // 14px
        font-weight: 500;
        flex: 1;
        text-align: right;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      p,
      a.title {
        flex: 2;
        padding-left: $base-spacing-half;
      }

      .table-body-cell {
        align-items: flex-start;

        &.flex-center {
          p {
            text-align: left;
          }
        }
      }
    }

    @media only screen and (min-width: map-get($base-breakpoints, 'lg') + 1) {
      label {
        display: none;
      }
    }
  }

  &-sort {
    cursor: pointer;

    &-icon {
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4043523 L20.7343997,7.20340672 Z" transform="matrix(1 0 0 -1 0 24)"/></svg>');
      margin-left: $base-spacing-half;
      visibility: hidden;

      &.up {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4043523 L20.7343997,7.20340672 Z" transform="matrix(1 0 0 -1 0 24)"/></svg>');
        margin-left: $base-spacing-half;
        visibility: visible;
      }

      &.down {
        content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23757575"><path fill-rule="evenodd" d="M20.7343997,7.20340672 C21.0369343,6.9196125 21.5124245,6.93461618 21.7964369,7.23691839 C22.05463,7.51173857 22.0656928,7.92938754 21.8382717,8.21627127 L21.7628995,8.29813984 L12.8478053,16.6609927 C12.4000257,17.0810349 11.7203768,17.1107014 11.2398501,16.7502163 L11.1326902,16.6601017 L2.23653106,8.29760525 C1.93429195,8.01349685 1.91977114,7.53835648 2.20409793,7.23634952 C2.46257683,6.96179775 2.87905475,6.92484705 3.17971854,7.1338526 L3.26616944,7.20394131 L11.9903648,15.4047756 L20.7343997,7.20340672 Z"/></svg>');
        margin-left: $base-spacing-half;
        visibility: visible;
      }
    }
  }

  .flex-end {
    text-align: right;

    h6 {
      margin-right: $base-spacing-half;
    }

    .table-sort-icon {
      position: absolute;
      margin-left: $base-spacing;
    }

    .right-gap {
      margin-right: $base-spacing-half;
    }
  }
}