@charset "UTF-8";
@import '@craftcms/sass/mixins';

div.user-photo {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

div.user-photo .current-photo {
  position: relative;
  width: 100px;
  height: 100px;
}

div.user-photo .current-photo::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  content: '';
  font-size: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--border-hairline);
}

div.user-photo .current-photo {
  img,
  svg {
    max-width: 100px;
    max-height: 100px;
    display: block;
    border-radius: var(--radius-lg);
  }
}

div.user-photo div.user-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

div.user-photo-controls .progress-shade {
  background: transparentize($white, 0.2);
  width: 100%;
  height: 100%;
  position: absolute;
  inset-block-start: 0;
  @include left(0);
  display: none;
}

div.user-photo-controls.uploading .progress-shade {
  display: block;
}

div.user-photo div.user-photo-controls .upload-photo ul {
  display: none;
}

div.user-photo div.user-photo-controls .QqUploader-uploader {
  display: inline-block;
}

div.profile-image-modal {
  width: 500px;
}
