sparkletown/sparkle

@import "scss/constants.scss";

.WorldsDashboard {
  height: 100%;

  .AdminShowcase {
    width: 100%;
    height: $admin-ia-simple-panel-height;
    display: flex;
    flex-direction: column;
    background-color: $secondary--live;
    min-height: 500px;

    .AdminShowcaseTitle {
      padding: $spacing--xxl $spacing--md;
    }
  }

  &__arrow-header {
    margin: $spacing--xl;
    align-self: end;
    align-items: center;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    margin: $spacing--xl;
    align-items: center;
  }

  &__header-text {
    font-size: $font-size--xl;
  }

  &__header-button {
    margin-left: auto;
  }

  &__arrow {
    transform: translateX(-100%) translateY(-25%) rotate(-15deg);
  }

  &__messages-container {
    text-align: center;
  }

  &__worlds-list {
    background-color: $secondary--live;

    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: max-content;
    grid-gap: 1rem;
  }

  &__world-panel {
    border: 1px solid $content--over;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}