@import '../../base.less';

@import './_var.less';

.@{prefix}-image {
  color: @image-color;
  font-size: 0;

  &__img {
    width: 100%;
    height: 100%;
  }

  &__mask {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: @image-loading-bg-color;
    color: @image-loading-color;
    width: 100%;
    height: 100%;
  }

  &--loading-text {
    width: 0;
    height: 0;
  }

  &__common {
    width: 100%;
    height: 100%;
  }

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

  &--round {
    border-radius: @image-round-radius;
    overflow: hidden;
  }

  &--square {
    border-radius: 0;
    overflow: hidden;
  }

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

    &-contain {
      object-fit: contain;
    }

    &-cover {
      object-fit: cover;
    }

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

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

  &--position {
    &-center {
      object-position: center;
    }

    &-bottom {
      object-position: bottom;
    }

    &-top {
      object-position: top;
    }

    &-left {
      object-position: left;
    }

    &-right {
      object-position: right;
    }
  }
}