@use '../style/base' as *;

@include bem(image) {
  @include b() {
    position: relative;
    display: inline-block;
    width: var(--sar-image-width);
    height: var(--sar-image-height);
    overflow: hidden;
    background: var(--sar-image-bg);

    @include m(circle) {
      border-radius: 9999px;
    }
  }

  @include e(img) {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-touch-callout: none;
    user-select: none;
    opacity: 0;
    transition: opacity var(--sar-image-fade-duration);
  }

  @include m(show) {
    @include e(img) {
      opacity: 1;
    }
  }

  @include e(loading) {
    @include universal;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--sar-image-loading-font-size);
    color: var(--sar-image-loading-color);
  }

  @include e(error) {
    @include universal;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--sar-image-error-font-size);
    color: var(--sar-image-error-color);
  }
}