.document-listing {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;

  &__body {
    padding: var(--padding-md);
    padding-top: 0;
    overflow-y: auto;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }

  &__footer {
    height: var(--line-height-xs);
    padding: 0 var(--padding-md);
    justify-content: flex-end;
    box-sizing: border-box;

    .made-with-love {
      color: unset;
      font-weight: 400 !important; // unfortunately, need to fight against anchor tag important set at root
      display: flex;
      font-size: var(--font-size-xs);
    }
  }

  &__header {
    padding: var(--padding-lg);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;

    input {
      border-radius: 3px;
    }

    h1 {
      // Fill space after H1 until the next element
      margin-right: auto;
    }

    & > * {
      // Fit the children properly
      width: auto;
      margin: 0;

      // Ensure small space between children
      &:not(:first-child) {
        margin-left: var(--padding-sm);
      }
    }

    // Remove weird margin that is there by default
    input {
      margin: 0;
      width: 15rem;
    }
  }
}
