@import './variable';
.image-viewer-wrapper {
    .fixed-container {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 999;
    }
    .loading-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -33.5px;
        margin-top: -33.5px;
        text-align: center;

        .icon-loading {
            display: block;
            width: 67px;
            height: 67px;
            background: url('../../../images/icon-loading.png') no-repeat;
            animation: rotating 0.5s linear infinite;
        }
        .text-loading {
            display: inline-block;
            margin-top: 10px;
            color: $--color-white;
            font-size: 14px;
        }
    }
    .img-wrapper {
        cursor: move;
        height: 100%;
    }
    .img-content {
        position: absolute;
        top: 40px;
        right: 40px;
        bottom: 80px;
        left: 40px;
        overflow: hidden;
        text-align: center;
        &::before {
            content: '';
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
        .img-content_box {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .img {
            display: inline-block;
            vertical-align: middle;
            max-width: 100%;
            max-height: 100%;
        }
    }
    .img-tooltip {
        position: absolute;
        bottom: 20px;
        width: 100%;
        height: 40px;
        text-align: center;

        .tooltip-wrapper {
            display: inline-block;
            padding: 12px 20px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.6);
            box-sizing: border-box;
            border-radius: 20px;
        }
        .tooltip-page,
        .tooltip-zoom,
        .tooltip-rotate {
            display: inline-block;
            height: 100%;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
        }
        .icon-prev,
        .icon-next,
        .icon-zoom-in,
        .icon-zoom-out,
        .icon-rotate,
        .icon-download,
        .my-el-icon,
        .icon-close {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: top;
            opacity: 0.8;
            transition: all 0.5 ease;
            cursor: pointer;
            &:hover {
                opacity: 1;
            }
        }
        .my-el-icon {
            color: #fff;
            text-align: center;
            font-size: 16px;
        }
        .page-number {
            display: inline-block;
            margin: 0 15px;
            height: 16px;
            line-height: 16px;
            vertical-align: top;
            opacity: 0.8;
        }
        .tooltip-page {
            color: $--color-white;
            padding-right: 14px;
            margin-right: 14px;
            .icon-prev {
                background: url('../../../images/icon-prev.png') no-repeat;
            }
            .icon-next {
                background: url('../../../images/icon-next.png') no-repeat;
            }
        }
        .tooltip-zoom {
            padding-right: 14px;
            .icon-zoom-in {
                margin-right: 14px;
                background: url('../../../images/icon-zoom-in.png') no-repeat;
            }
            .icon-zoom-out {
                background: url('../../../images/icon-zoom-out.png') no-repeat;
            }
        }
        .tooltip-rotate {
            padding: 0 14px;
            .icon-rotate {
                margin-right: 14px;
                background: url('../../../images/icon-rotate.png') no-repeat;
            }
            .icon-download {
                margin-right: 14px;
                background: url('../../../images/icon-download.png') no-repeat;
            }
        }
        .tooltip-close {
            display: inline-block;
            padding-left: 14px;
            .icon-close {
                background: url('../../../images/icon-close.png') no-repeat;
            }
        }
    }
}

@keyframes rotating {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
