@use '../../styles/variables';
@use '../../styles/bootstrap/variables.scss' as bootstrapVariables;
@use '../../styles/basic.scss';
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
$image-preview-prefix-cls: 'thy-image-preview';

.#{$image-preview-prefix-cls}-container {
    .thy-dialog-container {
        background: none;
    }
    .#{$image-preview-prefix-cls}-wrap {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: auto;
        outline: 0;
    }
    .#{$image-preview-prefix-cls} {
        pointer-events: none;
        height: 100%;
        color: variables.$image-preview-text-color;
        &-img-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            transition: transform 0.3s $ease-out 0s;
            display: flex;
            align-items: center;
            justify-content: center;
            .#{$image-preview-prefix-cls}-img {
                margin: 0 auto;
                pointer-events: all;
                display: block;
                cursor: variables.$hand-cursor;
                width: auto;
            }
        }
        &-inside {
            cursor: zoom-out;
            pointer-events: all;
            .#{$image-preview-prefix-cls}-img {
                cursor: zoom-out;
            }
        }

        &-operations {
            display: flex;
            align-items: center;
            position: fixed;
            pointer-events: all;
            bottom: bootstrapVariables.$spacer * 1.25;
            border-radius: bootstrapVariables.$spacer * 0.5;
            background: variables.$image-preview-bg-color;
            left: 50%;
            transform: translateX(-50%);
            &-text {
                display: inline-block;
                min-width: bootstrapVariables.$spacer * 2.5;
                text-align: center;
                user-select: none;
            }
            .thy-divider {
                border-color: variables.$gray-700;
            }
        }

        .thy-action {
            pointer-events: all;
            cursor: variables.$hand-cursor;
            @include basic.action-variant(
                variables.$image-preview-action-icon-color,
                variables.$image-preview-action-icon-color,
                variables.$image-preview-action-bg-color
            );
        }

        .#{$image-preview-prefix-cls}-exit-fullscreen {
            position: fixed;
            top: bootstrapVariables.$spacer * 1.5;
            right: bootstrapVariables.$spacer * 2;
            z-index: 10;
        }

        &-switch-left,
        &-switch-right {
            color: variables.$image-preview-switch-icon-color;
            position: fixed;
            top: 50%;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: bootstrapVariables.$spacer * 2.5;
            height: bootstrapVariables.$spacer * 2.5;
            margin-top: -22px;
            background: variables.$image-preview-switch-bg-color;
            border-radius: 50%;
            cursor: variables.$hand-cursor;
            pointer-events: auto;
            transition: all 0.3s;
            &:hover {
                color: variables.$image-preview-switch-icon-hover-color;
                background: variables.$image-preview-switch-hover-bg-color;
            }

            &-disabled {
                cursor: variables.$disabled-cursor;
                > .thy-icon {
                    cursor: variables.$disabled-cursor;
                }
                &:hover {
                    color: variables.$image-preview-switch-icon-color;
                    background: variables.$image-preview-switch-bg-color;
                }
            }
        }

        &-switch-left {
            left: bootstrapVariables.$spacer * 2.5;
        }

        &-switch-right {
            right: bootstrapVariables.$spacer * 2.5;
        }

        &-moving {
            .thy-image-preview-img {
                cursor: grabbing;
            }
        }
    }

    .#{$image-preview-prefix-cls}-header {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
        background: variables.$image-preview-bg-color;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 65px;
        &-info {
            font-weight: 500;
            pointer-events: all;
            .thy-image-name {
                width: 580px;
                font-size: variables.$font-size-md;
                margin-bottom: 0;
            }
            .thy-image-size {
                font-size: variables.$font-size-sm;
                color: variables.$gray-500;
            }
        }
    }
    .thy-loading {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }
}

.#{$image-preview-prefix-cls}-fullscreen {
    .#{$image-preview-prefix-cls} {
        &-inside {
            cursor: auto;
        }
    }
}

.#{$image-preview-prefix-cls}-backdrop {
    background: variables.$image-preview-backdrop-bg-color;
}

.thy-image {
    cursor: zoom-in;
}

.thy-image-disabled {
    cursor: default;
}
