@import '../styles/themes/themes.less';
@import './image-viewer.less';

.@{bk-prefix}-image {
  position: relative;
  display: inline-block;
  overflow: hidden;

  &-inner {
    width: 100%;
    height: 100%;
    vertical-align: top;

    &-center {
      position: relative;
      top: 50%;
      left: 50%;
      display: block;
      transform: translate(-50%, -50%)
    }

  }


  &-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: #c4c6cc;
    vertical-align: middle;
    background: #f0f1f5;
    justify-content: center;
    align-items: center;

    img {
      width: 100%;
    }
  }

  &-preview {
    cursor: pointer
  }
}
