@use 'ngx-tethys/styles/variables.scss';

.slate-element-image {
    display: block;

    .the-image-container {
        .image-content {
            position: relative;
            display: inline-block;
            cursor: zoom-in;

            &.the-image-error {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 160px;
                background-color: variables.$gray-80;
                cursor: pointer;

                img {
                    width: 30px !important;
                    height: 30px !important;
                    margin: 3px 3px 0 0;
                    cursor: pointer;
                }
            }
        }

        .main-image {
            position: relative;
            width: auto;
            max-width: 100%;
            margin: 0 auto;
            object-fit: fill;
            user-select: none;
        }
        .image-collapsed {
            z-index: 1;
        }
        .image-profile {
            position: absolute;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
            display: block;
            .image-pointer {
                position: absolute;
                z-index: 2;
                width: 12px;
                height: 12px;
                background-color: variables.$white;
                border: 1px solid variables.$gray-300;
                border-radius: 50%;
                box-shadow: 0 0 4px 0 rgba(variables.$black, 0.13);
                &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    margin-top: -4px;
                    margin-left: -4px;
                    background-color: variables.$primary;
                    border-radius: 50%;
                    content: '';
                }
            }
            .left {
                left: -6px;
            }
            .top {
                top: -6px;
            }
            .center {
                left: 50%;
                margin-left: -5px;
            }
            .middle {
                top: 50%;
                margin-top: -5px;
            }
            .right {
                right: -6px;
            }
            .bottom {
                bottom: -6px;
            }
            .left.top,
            .right.bottom {
                cursor: nwse-resize;
            }
            .top.center,
            .bottom.center {
                cursor: ns-resize;
            }
            .right.top,
            .left.bottom {
                cursor: nesw-resize;
            }
            .left.middle,
            .right.middle {
                cursor: ew-resize;
            }

            &.outline {
                border: 1px dashed variables.$primary;
            }
        }

        .uploading {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: block;
            background-color: rgba(variables.$white, 0.65);

            .percentage {
                position: absolute;
                top: 4px;
                right: 4px;
                width: 102px;
                height: 24px;
                color: grey;
                font-weight: 500;
                line-height: 24px;
                text-align: center;
                background: variables.$white;
                border: 0.5px solid rgba(variables.$black, 0.05);
                border-radius: 3px;
                box-shadow:
                    0 1px 1px 0 rgba(variables.$black, 0.05),
                    0 1px 4px 0 rgba(variables.$black, 0.1);
                transition: 0.3s ease;
            }
            .uploading-percentage {
                position: absolute;
                top: 50%;
                left: 50%;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: space-between;
                height: 18px;
                margin-top: -9px;
                margin-left: -60px;
                .progress {
                    display: inline-block;
                    width: 120px;
                    height: 8px;
                    margin-top: 1px;
                    margin-right: 8px;
                }
                .thy-icon {
                    color: #d8d8d8;
                }
            }
        }

        .layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: none;

            .preview {
                position: absolute;
                top: 6px;
                right: 6px;
                width: auto;
                height: 24px;
                padding: 0 3px;
                color: grey;
                font-weight: 500;
                line-height: 24px;
                text-align: center;
                background: variables.$white;
                border: 0.5px solid rgba(variables.$black, 0.05);
                border-radius: 3px;
                box-shadow:
                    0 1px 1px 0 rgba(variables.$black, 0.05),
                    0 1px 4px 0 rgba(variables.$black, 0.1);
                cursor: pointer;
                transition: 0.3s ease;
            }
            &.readonly {
                z-index: -1;
            }
        }

        .image-loading {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 280px;
            color: variables.$gray-500;
            background: rgb(244, 245, 247);
        }
    }

    .the-image-container:hover .layer {
        display: block;

        &.readonly {
            cursor: zoom-in;
        }
    }

    &.slate-focus-element {
        .image-loading {
            border: 1px dashed variables.$primary;
        }
    }
}
.the-editor-readonly {
    .the-image-error {
        cursor: default;
    }
}