@import "src/styles/variables.scss";

img.image {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;

  &.is_loaded {
    width: auto;
    height: auto;
    opacity: 1;
    position: static;
  }
}

.preview {
  border-radius: $radius;

  &.is_loaded {
    display: none;
  }
}

.icon {
  position: absolute;
  right: 30px;
  bottom: 40px;
  opacity: 0.4;

  @include tablet {
    right: 5px;
    bottom: 5px;
  }

  svg {
    fill: currentColor;

    @include tablet {
      transform: scale(0.6);
    }
  }
}

.error {
  position: absolute;
  right: 30px;
  bottom: 40px;
  opacity: 0.4;
  color: $orange;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  svg {
    fill: $orange;
  }

  &__text {
    max-width: 200px;
    text-align: right;
    margin-right: $gap;
    font: $font_16_semibold;
    line-height: 24px;
  }
}
