#no-repositories {
  display: flex;
  padding: calc(var(--spacing) * 6);
  align-items: center;

  > section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
  }

  header {
    align-self: flex-start;
    margin-bottom: var(--spacing-quad);

    h1 {
      font-size: var(--font-size-xxl);
      font-weight: var(--font-weight-light);
    }

    h1,
    p {
      margin: 0;
    }
  }

  .content {
    align-self: stretch;
    flex-direction: row;
    display: flex;
    flex-shrink: 0;
    flex-grow: 1;

    & > .content-pane {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      flex-shrink: 0;
      max-width: 50%;
      width: 50%;
      flex-grow: 1;

      &:not(:last-child) {
        padding-right: var(--spacing);
      }

      &:not(:first-child) {
        padding-left: var(--spacing);
      }
    }

    .button-group {
      margin: 0;
      padding: 0;
      flex-grow: 1;

      span {
        margin-bottom: var(--spacing);
        width: 100%;

        .button-component {
          width: 100%;
          padding: var(--spacing);
          height: auto;
          text-align: left;
          margin-bottom: var(--spacing);
          display: flex;
          flex-direction: row;
          align-items: center;

          /** These buttons need to wrap in high zoom levels */
          text-overflow: unset;
          white-space: normal;
          min-width: 0;

          .octicon {
            margin: var(--spacing-half) var(--spacing) var(--spacing-half) var(--spacing-half);
            height: 24px;
            width: 24px;
          }
        }
      }
    }
  }

  .drag-drop-info {
    background: var(--tip-box-background-color);
    border: 2px dashed var(--tip-box-border-color);
    border-radius: var(--border-radius);
    padding: var(--spacing-double);
    display: flex;
    flex-direction: row;

    .octicon {
      margin-right: var(--spacing);
    }
  }

  .no-repositories-graphic-bottom {
    position: absolute;
    right: var(--spacing);
    bottom: var(--spacing);

    width: auto;
    max-width: 40%;
    height: 40%;
    z-index: -1;
  }

  .no-repositories-graphic-top {
    position: absolute;
    right: 80px;
    top: 40px;

    width: auto;
    max-width: 20%;
    height: 20%;
    z-index: -1;
  }

  .content-pane.repository-list {
    .account-picker {
      margin-bottom: var(--spacing);
    }
    .clone-selected-repository {
      margin-top: var(--spacing);
      width: 100%;
    }

    > .filter-list {
      .filter-field-row {
        margin: 0;
        margin-bottom: var(--spacing);
      }

      .clone-repository-list-group-header {
        padding: var(--spacing);
      }

      .clone-repository-list-item {
        padding: 0 var(--spacing);
      }
    }
  }

  @media screen and (min-width: 1366px) {
    zoom: 1.2;
  }

  @media screen and (min-width: 1400px) {
    zoom: 1.3;
  }

  @media screen and (min-width: 1600px) {
    zoom: 1.4;
  }

  @media screen and (min-width: 1800px) {
    zoom: 1.5;
  }
}

// For all views other than the dedicated blank slate
// view. Yes, this is confusing.
.blankslate-image {
  width: 50%;
  min-width: 400px;
  max-width: 800px;
}

// In the foldout we want the image to fill the
// full width of the container (minus padding).
.foldout .blankslate-image {
  width: 100%;
  min-width: auto;
}

// When there's not enough space to show the blankslate
// image any more (due to zooming or having DevTools docked
// in the app window)
@media (max-height: 400px) {
  #no-repositories {
    padding: var(--spacing);

    header {
      margin-bottom: var(--spacing);
    }

    .drag-drop-info {
      display: none;
    }
  }
}
