@include media-when-we-pin-main-nav-sidebar {
  .page main.workflows {
    max-width: 100%; // <table> always takes full width
  }
}

main.workflows {
  form.create-workflow {
    margin: 0;

    button {
      @include action-button;
      @include button-blue--fill;
      height: 4rem;
      font-size: 1.5rem;
    }
  }

  .workflow-list {
    background: white;
    margin: rem(2) (-$main-padding);
    padding: rem(2) $main-padding;

    @include media-when-we-pin-main-nav-sidebar {
      margin-left: -$main-padding-desktop;
      margin-right: -$main-padding-desktop;
      padding-left: $main-padding-desktop;
      padding-right: $main-padding-desktop;
    }
  }

  table {
    width: 100%;
    height: 1px; // td>a height:100% in Chrome+Firefox: https://stackoverflow.com/a/56913789
    border-collapse: separate; // so th { position:sticky } keeps border
    border-spacing: 0;

    tr.changing {
      // signal to the user that we're busy
      color: $text-muted;
      pointer-events: none;
    }

    th {
      border-bottom: 2px solid $brand-learn;
      white-space: nowrap; // "sort" icon shouldn't wrap
      position: sticky;
      top: 0;
      background: white;
      z-index: 1; // cover button.context-menu when scrolling and sticky

      a {
        color: inherit;
        display: block;
      }

      svg {
        font-size: rem(1);
        color: $text-muted;
        margin-left: rem(0.5);
      }
    }

    tbody {
      tr {
        height: 100%; // td>a height:100% in Chrome+Firefox: https://stackoverflow.com/a/56913789

        &:hover td>* {
          background: $hover-background;
        }
      }
    }

    td,
    th {
      &.fetches-per-day,
      &.updated {
        text-align: right;
      }

      &.owner,
      &.fetches-per-day,
      &.updated,
      &.privacy {
        // These columns are "optional". We only show them:
        // * when they make sense (e.g., "owner" doesn't make sense on "owned" workflows)
        // * when they fit (e.g., on mobile they may not fit)
        // Override this using &.owned, &.shared-with-me and &.example selectors below
        display: none;
        white-space: nowrap;
      }
    }

    th {
      // Anything but the .title may be the last column. Set its right padding to 0.
      padding: rem(1) 0 rem(1) rem(1);
      &:first-child {
        padding-left: 0;
      }
    }

    td {
      border-bottom: 1px solid $item-border;
      padding: 0;
      height: 100%; // td>a height:100% in Chrome+Firefox: https://stackoverflow.com/a/56913789
      line-height: rem(1);

      &>* {
        display: block;
        height: 100%;
        color: inherit;
        text-decoration: none;
        padding: rem(1.25) rem(1) rem(1) rem(1);
      }

      &.title>* {
        padding-left: 0;
      }

      &.actions {
        text-align: right;

        &>* {
          // .actions is present when workflows are editable; it contains a .dropdown
          padding-right: 0;
          padding-top: rem(0.5); // button already has padding-top of rem(0.5); and we're not vertically aligned with text because [2021-06-03, adamhooper] I dunno, but it's been that way for months
          padding-bottom: 0; // don't take up extra space compared to other cells on this row
        }
      }
    }

    td.fetches-per-day,
    td.updated {
      &>* {
        // svg width + svg margin
        padding-right: rem(1.5);
      }
    }

    td.fetches-per-day a:empty::before {
      content: '–';
      color: $text-muted;
    }
  }

  .workflow-list.owned {
    table {
      td,
      th {
        &.updated {
          display: table-cell;
        }

        @include media-when-we-pin-main-nav-sidebar {
          &.privacy, &.fetches-per-day {
            display: table-cell;
          }
        }
      }
    }
  }

  .workflow-list.shared-with-me {
    table {
      td,
      th {
        &.owner {
          display: table-cell;
        }

        @include media-when-we-pin-main-nav-sidebar {
          &.updated,
          &.privacy {
            display: table-cell;
          }
        }
      }
    }
  }

  .workflow-list.example {
    table {
      td,
      th {
        &.owner {
          display: table-cell;
        }

        @include media-when-we-pin-main-nav-sidebar {
          &.updated {
            display: table-cell;
          }
        }
      }
    }
  }
}
