sparkletown/sparkle

@import "scss/constants.scss";

.SpacesDashboard {
  width: 100%;
  height: 100vh;
  padding: 0;

  position: relative;
  overflow-y: scroll;

  &__main {
    display: grid;
    grid-template: 1fr / $admin-ia-dash-template-columns;
  }

  &__tools {
    display: flex;
    justify-content: flex-end;
    padding-right: $button-width--max-margin;
  }

  &__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: $button-width--max-margin;
  }

  &__welcome-message {
    text-align: center;

    p {
      font-size: $font-size--xxl;
      font-weight: $font-weight--500;
      padding-top: font-size--parent(2);
    }
  }

  &__cards {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: max-content;
    grid-gap: font-size--root(1);

    @media (max-width: $media-breakpoint--xxl) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (max-width: $media-breakpoint--xl) {
      grid-template-columns: repeat(1, 1fr);
    }
  }

  &__main--empty &__cards {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  &__main--empty .SortDropDown {
    display: none;
  }
}