@import '../../style/theme/default.less';

@image-prefix-cls: ~'@{kui-prefix}-image';

.@{image-prefix-cls} {
  &-lazy-animation {
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
  }

  &-lazy-animation-fade {
    animation-name: imageLazyFadeIn;
  }

  &-lazy-animation-scale {
    animation-name: imageLazyScale;
  }

  @keyframes imageLazyFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes imageLazyScale {
    from {
      transform: scale(0);
    }

    to {
      transform: scale(1);
    }
  }

  &-slot-container {
    display: inline-block;
  }

  &-slot {
    display: inline-block;
    flex: auto 0 0;
    width: 100%;
    height: 100%;
    background-color: #f4f4f4;
    background-image: url('../images/slot.png');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 40px 42px;
  }

  &-fit-cover {
    object-fit: cover;
  }

  &-fit-contain {
    object-fit: contain;
  }

  &-fit-scale-down {
    object-fit: scale-down;
  }

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