/**
 * ImageViewer Component Style for SaltUI
 * @author guanghong.wsj
 *
 * Copyright 2018-2019, SaltUI Team.
 * All rights reserved.
 */

prefixCls = t-image-viewer


.{prefixCls}-popup-view
    z-index 1010
    position fixed
    width 100%
    // height 100%
    top 50%
    left 50%
    transform translate(-50%, -50%)
    overflow auto
    padding constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left)
    padding env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
    .t-slide
        // height 100%
    .t-slide-item
        img
            width 100%

.{prefixCls}-popup-mask
    background-color rgba(0, 0, 0, 0.8)
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    z-index 1000

.{prefixCls}-popup-nav
    position fixed
    fix-safe-area bottom 20px
    left 50%
    transform translate(-50%, 0)
    z-index 1010

.{prefixCls}-popup-nav-item
    width 6px
    height 6px
    border-radius 50%
    background #fff
    opacity 0.2
    display inline-block
    margin-right 10px
    &.last
        margin-right 0
    &.active
        opacity 1

@keyframes imageViewerMaskFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imageViewerMaskFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.{prefixCls}-popup-mask-appear,
.{prefixCls}-popup-mask-enter
    opacity 0
    animation-duration 0.3s
    animation-fill-mode both
    animation-ease ease-out

.{prefixCls}-popup-mask-appear-active,
.{prefixCls}-popup-mask-enter-active
    animation-name imageViewerMaskFadeIn

.{prefixCls}-popup-mask-leave
    opacity 1
    animation-duration 0.3s
    animation-fill-mode both
    animation-ease ease-out

.{prefixCls}-popup-mask-leave-active
    animation-name imageViewerMaskFadeOut


@keyframes imageViewerViewFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes imageViewerViewFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.{prefixCls}-popup-view-appear,
.{prefixCls}-popup-view-enter
    opacity 0
    animation-duration 0.3s
    animation-fill-mode both
    animation-ease ease-out

.{prefixCls}-popup-view-appear-active,
.{prefixCls}-popup-view-enter-active
    animation-name imageViewerViewFadeIn

.{prefixCls}-popup-view-leave
    opacity 1
    animation-duration 0.3s
    animation-fill-mode both
    animation-ease ease-out

.{prefixCls}-popup-view-leave-active
    animation-name imageViewerViewFadeOut