:host {
  /**
   * @prop --width: Width of the picture
   * @prop --height: Height of the picture
   * @prop --border-radius: Border radius of the picture
   * @prop --object-fit: CSS object-fit of the picture
   */
  --width: 300px;
  --height: 300px;
  --border-radius: var(--border-radius, 0);
  --object-fit: var(--object-fit, cover);

  display: block;
  position: relative;
}

button.add {
  display: none;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-1);
  position: absolute;
  bottom: var(--size-2);
  right: var(--size-2);
  z-index: var(--layer-top);
}

:host(:hover) button.add {
  display: flex;
}

@media (pointer: coarse) {
  button.add {
    display: flex;
  }
}

.no-picture {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--height);
  width: var(--width);
  position: relative;
}

.no-picture button.add {
  position: static;
  margin-top: var(--size-2);
  display: flex;
}

.upload-container {
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  padding: var(--size-2);
  button.close {
    display: flex;
    align-items: center;
    gap: var(--size-1);
    padding: var(--size-1);
  }
}