.blank-state {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;

  & .svg--dark {
    display: none;
  }

  & h3 {
    font-size: 1.25rem;
    margin: 0;
  }

  .buttons {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
  }

  & p {
    color: var(--gray-700);
    margin: 0 auto;
    max-width: 30rem;
    text-align: center;
  }

  & a.docs-link {
    color: var(--scampi-700);
    font-size: 1rem;
    text-decoration: none;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
    }
  }

  &.blank-state--invitations {
    gap: 0;
    overflow-y: auto;
    justify-content: flex-start;

    & > .dropdown {
      align-self: flex-end;
      flex-shrink: 0;
    }

    & .blank-state--group {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      justify-content: center;
      margin: auto;
      width: 100%;

      & > svg {
        margin-top: -2rem;
      }
    }
  }
}