@use "../../style/variables" as *;

.#{$prefix}-image {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  vertical-align: middle;

  &_bounded {
    display: inline-block;

    > * {
      position: absolute;
      inset: 0;
    }

    .#{$prefix}-image__placeholder,
    .#{$prefix}-image__fallback {
      width: 100%;
      height: 100%;
    }
  }

  &__img,
  &__placeholder-image,
  &__fallback-image {
    display: block;
    max-width: 100%;
  }

  &__img {
    transition: opacity 0.2s ease;
  }

  &__placeholder,
  &__fallback {
    align-items: center;
    background: var(--ty-image-placeholder-bg, var(--ty-color-fill-secondary, #f5f5f5));
    color: var(--ty-image-placeholder-color, var(--ty-color-text-tertiary, #999));
    display: inline-flex;
    justify-content: center;
  }

  &_idle,
  &_loading {
    .#{$prefix}-image__img {
      opacity: 0;
    }
  }

  &_loaded {
    .#{$prefix}-image__placeholder,
    .#{$prefix}-image__placeholder-image,
    .#{$prefix}-image__fallback,
    .#{$prefix}-image__fallback-image {
      display: none;
    }
  }

  &_error {
    .#{$prefix}-image__img {
      display: none;
    }
  }

  &_round {
    border-radius: 50%;
  }
}