sparkletown/sparkle

@import "scss/constants.scss";

$upload-button-height: 150px;

.ImageInput {
  &__container {
    position: relative;
    display: flex;
    padding: $image-input-padding;
    align-items: center;
    justify-content: center;
    border-radius: $border-radius--xl;
    background-size: cover;
    background-position: center;
    cursor: pointer;

    &--error {
      border: 2px solid var(--danger--under);
    }

    &--disabled {
      pointer-events: none;
      cursor: initial;
    }

    &--small {
      display: inline-block;
      padding: $image-input-padding--small;

      &.mod--hidden {
        height: 0;
        padding: 0;
      }
    }
  }

  &__error {
    display: block;

    color: var(--danger--under);
    font-style: italic;
  }

  &__wrapper {
    width: 100%;
    height: $upload-button-height;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: opaque-white(0.12);
    border-radius: $border-radius--xl;
  }

  &__subtext {
    font-size: $font-size--md;
    color: opaque-white(0.5);
  }

  &__button {
    padding: $image-input-upload-button-padding;
    margin: 0;
    border-radius: $border-radius--xl;
    font-weight: bold;
    transition: $image-input-upload-button-transition;
    background-color: $image-input-upload-button-background;
    &:hover,
    &:active,
    &:focus {
      transform: translateY(-1px);
      background-color: $image-input-upload-button-background--focus;
    }
    &--hidden {
      display: none;
      background-color: transparent;
      color: transparent;
      &:hover,
      &:active,
      &:focus {
        transform: none;
        background-color: initial;
      }
    }

    &--small {
      padding: $image-input-upload-button-padding--small;
    }
  }
}

.SpaceEditForm .AdminSection__label .ImageInput__container.mod--hidden {
  height: 0;
  padding: $spacing--lg;
}