@import '../../base/variables';

.AknAssetPreview {
  @arrowWidth: 40px;

  height: ~"calc(100vh - 170px)";
  text-align: center;

  &-main {
    display: flex;
  }

  &-buttons {
    overflow-x: auto;
    display: inline-block;
    max-width: 90vw;
  }

  &-imageContainer {
    flex-grow: 1;
    text-align: center;
    align-self: center;
  }

  &-image {
    max-height: ~"calc(100vh - 330px)";
    max-width: ~"calc(100vw - 80px)";
    min-width: 40px;
    min-height: 40px;
    background: url("/bundles/pimui/images/loader-V2.svg") no-repeat center;
  }

  &-left, &-right {
    flex-basis: @arrowWidth * 2 ;
    height: ~"calc(100vh - 290px)";
    background-image: url("/bundles/pimui/images/icon-right.svg");
    background-size: @arrowWidth;
    background-repeat: no-repeat;
    background-position: center left;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease-in;

    &:hover {
      opacity: 1;
    }
  }

  &-left {
    transform: rotate(180deg);
  }

  &-confirmation {
    flex-direction: column;
    width: 180px;
    position: absolute;
    background: white;
    z-index: 1;
    top: 0;
    padding: 20px 30px 10px 30px;
    text-align: center;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
    left: -78px;

    &-hide {
      display: none;
    }
  }

  &-confirmationText {
    font-size: @AknFontSizeBigger;
    margin-bottom: 20px;
    color: @AknDarkBlue;
    display: inline-block;
  }
}
