@mixin list-layout {
  @include media-breakpoint-down(lg) {
    grid-template-columns: 250px 1fr 60px;
    @for $i from 1 through 3 {
      & > :nth-child(#{$i}) {
        grid-column: $i;
      }
    }
  }
  @include media-breakpoint-up(lg) {
    grid-template-columns: 250px 200px 1fr 62px;
    @for $i from 1 through 4 {
      & > :nth-child(#{$i}) {
        grid-column: $i;
      }
    }
  }
}

#provisioners-page {
  .provisioners-list {
    .headers {
      @include list-layout;

      @include media-breakpoint-up(lg) {
        & > :nth-child(4) {
          justify-content: center;
        }
      }
    }

    .scroll-container {
      box-sizing: border-box;
      padding-bottom: 1.5rem;
      margin-right: 5px;
      @include media-breakpoint-up(lg) {
        padding-bottom: 4rem;
      }
    }

    .default-row {
      display: inline-grid;
      grid-template-rows: 60px;
      align-items: center;
      box-sizing: border-box;
      padding: 0 2rem;
      @include list-layout;

      & > * {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        justify-content: flex-start;

        & > span {
          @include regular-text;
          @include text-weight(medium);

          color: var(--gray-dark);

          &.connected {
            color: var(--text-main);
          }
        }
      }

      @include media-breakpoint-up(lg) {
        & > :nth-child(2) {
          column-gap: 5px;
        }

        & > :nth-child(4) {
          justify-content: center;

          & > button {
            width: 100%;
          }
        }
      }
    }
  }
}
