sparkletown/sparkle

@import "scss/constants.scss";

$image-container-height: 200px;
$logo-size: 48px;

.SpaceEditForm {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;

  &__portal {
    display: flex;
    flex-direction: column;
  }

  &__loading-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  &__content {
    padding: $spacing--xl;
  }

  &__capacity {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);

    align-items: center;
    text-align: center;
  }

  &__template {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0;
    margin: 0;

    .AdminInput {
      flex-grow: 10;
      margin-left: $spacing--xs;
    }
  }

  &__logo {
    @include square-size($logo-size);
    margin-top: 0;
    border-radius: $border-radius--max;
    background-size: cover;
    background-color: $content--under;
    box-shadow: box-shadow--input(var(--content--over-10a));
    flex-shrink: 0;
  }

  .AdminSection {
    padding: 0 $spacing--xs;

    &__label {
      display: flex;
      flex-direction: column;

      .ImageInput__container {
        position: relative;
        width: 60%;
        margin-bottom: -($spacing--lg);
        align-self: center;
        height: $image-container-height;
      }
    }
  }
}