@import "../../../../style/mixin";

@include export-module('co-image-display-layout') {
  .co-image-display {
    font-family: $tp-image-display-no-image-font-family;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    .image-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 100%;
      width: 100%;
    }

    .image {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
    .no-image {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      opacity: $tp-image-display-no-image-opacity;
      .img {
        width: 60%;
        height: 60%;
        background: url($tp-image-display-no-image-src) no-repeat top;
      }
      .no-image-label {
        font-size: $tp-image-display-no-image-label-font-size;
        text-align: center;
      }
    }

    &.cover-image {
      div.image {
        background-size: cover;
      }
    }
    &.circle {
      .img-wrapper,
      .image {
        border-radius: 50%;
      }
    }
  }
}