sparkletown/sparkle

@import "scss/constants";

$profile-picture-size--sm: 40px;
$profile-picture-size--lg: 116px;

$upload-button-max-width: 300px;

.ProfilePictureUploadForm {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: $spacing--md;

  &__input {
    display: none;
  }

  &__uploadButton {
    max-width: $upload-button-max-width;
    display: flex;
    align-items: center;
    border-radius: $border-radius--xl;
    border: solid $accent--under;
    padding: $spacing--lg 50px;
    margin: $spacing--lg 0;
    font-weight: $font-weight--700;
    color: $content--over;
    background-color: transparent;

    &:hover {
      transform: translateY(-1px);
      background-image: linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );
      background-color: var(--primary--under-darker-20pp);
    }
  }
}

.ProfilePicturePreviewContainer {
  display: flex;
  justify-content: center;
  z-index: z(account-profile-picture-preview);
  background-color: transparent;
  border: none;

  &__image {
    width: $profile-picture-size--lg;
    height: $profile-picture-size--lg;
    margin-bottom: -($spacing--xl);
    border: 3px solid $content--over;
    border-radius: $border-radius--max;

    &--small {
      width: $profile-picture-size--sm;
      height: $profile-picture-size--sm;
      border: 0 solid;
    }
  }
}