@import '../vars';

.safi-object {
    +.safi-highlight {
        display: none;
    }
}

.--tool-select {
    .safi-object.--selected:hover {
        cursor: move;
    }

    // hack to show cursor on layergroup only in the group area since the actual layer is the size of the canvas
    // .safi-object.safi-object-layergroup.--selected {
    //     &:hover {
    //         cursor: initial;
    //     }

    //     &+.safi-handles:hover {
    //         pointer-events: all;
    //         cursor: move;
    //     }

    // }

    .safi-object.--selected.--locked:hover {
        cursor: not-allowed;
    }

    .safi-object {
        +.safi-highlight {
            display: block;
            pointer-events: none;
            z-index: 9999;
            position: absolute;
            background: #{$col-selection}05;
            width: inherit;
            height: inherit;
            top: inherit;
            left: inherit;
            border: 2px solid #{$col-selection};
            border: calc(2px / var(--safi-zoom)) solid #{$col-selection};
            box-sizing: border-box;
            transform: inherit;
        }

    }
}

.safi-object {
    &.--selected {
        +.safi-handles {
            z-index: 9999;
            pointer-events: none;
            position: absolute;
            background: #{$col-selection}08;
            width: inherit;
            height: inherit;
            top: inherit;
            left: inherit;
            border: calc(2px / var(--safi-zoom)) dashed $col-selection;
            box-sizing: border-box;
            transform: inherit;

            // border-image: repeating-linear-gradient(45deg,
            //     #{$col-selection}, #{$col-selection} 5px,
            //     #ffffff80 5px, #ffffff80 10px) 1;



            border-image: repeating-linear-gradient(135deg,
                #{$col-selection}, #{$col-selection} 12px,
                #ffffffaa 12px, #ffffffaa 18px) 1;

            // animation: bg-spin 3s linear infinite;

            // @property --border-angle {
            //     syntax: "<angle>";
            //     inherits: true;
            //     initial-value: 0turn;
            // }

            // @keyframes bg-spin {
            //     0% {
            //         border-image: repeating-linear-gradient(0deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     10% {
            //         border-image: repeating-linear-gradient(36deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     20% {
            //         border-image: repeating-linear-gradient(72deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     30% {
            //         border-image: repeating-linear-gradient(108deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     40% {
            //         border-image: repeating-linear-gradient(144deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     50% {
            //         border-image: repeating-linear-gradient(180deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     60% {
            //         border-image: repeating-linear-gradient(216deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     70% {
            //         border-image: repeating-linear-gradient(252deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     80% {
            //         border-image: repeating-linear-gradient(288deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     90% {
            //         border-image: repeating-linear-gradient(324deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            //     100% {
            //         border-image: repeating-linear-gradient(360deg,
            //         #{$col-selection}, #{$col-selection} 5px,
            //         #ffffff 5px, #ffffff 10px) 1;
            //     }
            // }

        }

        &::after {
            // content: "";
            // position: absolute;
            // background: #{$col-accent}08;
            // width: 100%;
            // height: 100%;
            // top: 0;
            // left: 0;
            // border: 1px dashed $col-accent;
            // box-sizing: border-box;
        }
    }

    &.--hidden {
        display: none !important
    }

    &.--show-padding:after {
        content: "";
        position: absolute;
        // background: #8c53ff14;
        background: rgb(0 255 0 / 15%);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        padding: inherit;
        // border-radius: inherit;
        box-sizing: border-box;
        /* background-image: linear-gradient(#4bff662e, #4bff662e), linear-gradient(#ffffff00, #ffffff00); */
        background-clip: content-box;
    }

    &.--locked {
        pointer-events: none;
    }
}

.safi-object-child {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;

    >svg {
        // max-width: 100%;
        width: 100%;
        height: 100%;
    }

    &.--info {
        align-items: center;
        display: flex;
        justify-content: center;
        color: $col-accent;
        background: #ffffff80;
        font-size: 12px;
        line-height: 1.1;
        font-family: monospace;
        padding: 20px;
        box-sizing: border-box;
    }
}

.safi-object-layergroup {
    pointer-events: none;

    .safi-object,
    &.--selected {
        pointer-events: all;
    }
}

.safi-object-container {
    &::after {
        content: '';
        width: 100%;
        height: 100%;
        border: 1px dashed $col-accent-alt;
        position: absolute;
        box-sizing: border-box;
    }
}

.safi-object-image,
.safi-object-dynamicimage {
    .safi-image-switcher {
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: calc(4px / var(--safi-zoom));
        right: calc(4px / var(--safi-zoom));
        z-index: 1;
        // opacity: 1;
        // pointer-events: all;
        // width: calc(24px / var(--safi-zoom));
        // height: calc(24px / var(--safi-zoom));
        background-color: #00000020;
        border-radius: calc(4px / var(--safi-zoom));
        padding: calc(4px / var(--safi-zoom));
        // border: 1px solid $col-dark;
        // transform: translateY(calc(-100% - calc(6px / var(--safi-zoom))));
        color: white;
        font-size: calc(18px / var(--safi-zoom));

        .safi-icon-container:first-child svg {
            opacity: 0.5;
        }

        svg {
            width: calc(16px / var(--safi-zoom)) !important;
            height: calc(16px / var(--safi-zoom)) !important;
        }

        &:hover {
            background-color: #000000aa;
        }
    }

    &:hover {
        .safi-image-switcher {
            opacity: 1;
            pointer-events: all;
        }
    }
}

.safi-object-dynamicimage {
    overflow: hidden;

    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
        background-image: linear-gradient(135deg, #807f84 25%, #6e6b73 25%, #6e6b73 50%, #807f84 50%, #807f84 75%, #6e6b73 75%, #6e6b73 100%);
        // background-image: linear-gradient(135deg, #807f84 25%, #6e6b73 25%, #6e6b73 50%, #807f84 50%, #807f84 75%, #6e6b73 75%, #6e6b73 100%);
        // background-size: 28.28px 28.28px;
        background-size: 8px 8px;
        opacity: 0.333;
        border-radius: inherit;
        user-select: none;
        pointer-events: none;
        object-position: inherit;
    }
}

.safi-object-text {
    .safi-text-inner {
        // cursor: text;
    }

    textarea.safi-text-edit {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        resize: none;
        color: inherit;
        background-color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        padding: inherit;
        margin: inherit;
        text-transform: inherit;
        text-align: inherit;
        border: none;
        border-width: inherit;
        border-color: inherit;
        border-radius: inherit;

        background: rgba($col-accent, 0.1);

        // overflow: hidden;
    }

    &:hover {
        .safi-text-placeholder {
            opacity: 0.4;
        }
    }

    .safi-text-placeholder {
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
        background-color: #bbbbbb40;
        width: 32px;
        height: 22px;
        font-size: 8px;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1;
        font-weight: normal;
        color: black;
        /* border: 1px solid black; */
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        text-align: center;
        opacity: 0;
        transition: all 0.15s ease-in-out;

        &:hover {
            opacity: 1;
            background-color: #bbbbbb;
        }

        &.--lipsum {
            opacity: 1;
            color: white;
            background-color: $col-accent;
        }
    }
}

.safi-handles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    $handle-width: 13px;
    $handle-offset: 7px;

    @at-root .safi-handle {
        position: absolute;
        width: $handle-width;
        height: $handle-width;
        width: calc($handle-width / var(--safi-zoom));
        height: calc($handle-width / var(--safi-zoom));
        border: 2px solid $col-selection;
        border: calc(2px / var(--safi-zoom)) solid $col-selection;
        border-radius: 50%;
        background-color: white;
        z-index: 1;
        box-sizing: border-box;
        pointer-events: all;

        &.--handle-top-left {
            top: calc(-1 * $handle-offset / var(--safi-zoom));
            left: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: nw-resize;
            }
        }

        &.--handle-top {
            top: calc(-1 * $handle-offset / var(--safi-zoom));
            left: calc(50% - calc($handle-offset / var(--safi-zoom)));

            &:hover {
                cursor: n-resize;
            }
        }

        &.--handle-top-right {
            top: calc(-1 * $handle-offset / var(--safi-zoom));
            right: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: ne-resize;
            }
        }

        &.--handle-right {
            top: calc(50% - calc($handle-offset / var(--safi-zoom)));
            right: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: e-resize;
            }
        }

        &.--handle-bottom-right {
            bottom: calc(-1 * $handle-offset / var(--safi-zoom));
            right: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: se-resize;
            }
        }

        &.--handle-bottom {
            bottom: calc(-1 * $handle-offset / var(--safi-zoom));
            left: calc(50% - calc($handle-offset / var(--safi-zoom)));

            &:hover {
                cursor: s-resize;
            }
        }

        &.--handle-bottom-left {
            bottom: calc(-1 * $handle-offset / var(--safi-zoom));
            left: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: sw-resize;
            }
        }

        &.--handle-left {
            top: calc(50% - calc($handle-offset / var(--safi-zoom)));
            left: calc(-1 * $handle-offset / var(--safi-zoom));

            &:hover {
                cursor: w-resize;
            }
        }

        &.--handle-rotate {
            top: -34px;
            top: calc(-34px / var(--safi-zoom));
            left: calc(50% - $handle-offset);
            left: calc(50% - calc($handle-offset / var(--safi-zoom)));

            &:before {
                content: "";
                position: absolute;
                width: 1px;
                width: calc(1px / var(--safi-zoom));
                height: 15px;
                height: calc(15px / var(--safi-zoom));
                background-color: $col-selection;
                top: 10px;
                left: 4px;
                top: calc(10px / var(--safi-zoom));
                left: calc(4px / var(--safi-zoom));
            }

            &:hover {
                cursor: crosshair;
                cursor: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0xMS45MjMxIDE5QzEwLjQ2MTEgMTkgOS4wMzY1OSAxOC41MzIgNy44NTM3OSAxNy42NjMxQzYuNjcxIDE2Ljc5NDIgNS43OTA2MyAxNS41NjkgNS4zMzg4NCAxNC4xNjMxQzQuODg3MDUgMTIuNzU3MiA0Ljg4NzA1IDExLjI0MjggNS4zMzg4NCA5LjgzNjg4QzUuNzkwNjMgOC40MzA5OCA2LjY3MSA3LjIwNTc4IDcuODUzOCA2LjMzNjg4QzkuMDM2NTkgNS40Njc5OCAxMC40NjExIDUgMTEuOTIzMSA1QzEzLjM4NTEgNSAxNC44MDk2IDUuNDY3OTkgMTUuOTkyNCA2LjMzNjg4QzE3LjE3NTIgNy4yMDU3OCAxOC4wNTU1IDguNDMwOTggMTguNTA3MyA5LjgzNjg4QzE4Ljk1OTEgMTEuMjQyOCAxOC45NTkxIDEyLjc1NzIgMTguNTA3MyAxNC4xNjMxTTE3LjUgMTIuNzc3OEwxOC40NjE1IDE0LjMzMzNMMjAgMTMuMTY2NyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L2c+PC9zdmc+") 16 16, pointer;
            }
        }

        $corner-width: 5px;
        $corner-offset: 2px;

        &.--handle-corner {
            top: 5px;
            left: 5px;
            // top: (calc($corner-width / var(--safi-zoom)));
            // left: (calc($corner-width / var(--safi-zoom)));
            background-color: transparent;

            &:before {
                content: "";
                position: absolute;
                width: calc($corner-width / var(--safi-zoom));
                height: calc($corner-width / var(--safi-zoom));
                background-color: $col-selection;
                top: calc($corner-offset / var(--safi-zoom));
                left: calc($corner-offset / var(--safi-zoom));
                border-radius: calc($corner-width / var(--safi-zoom));
            }

            &:hover {
                cursor: nw-resize;
                // cursor: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IlNWR1JlcG9fYmdDYXJyaWVyIiBzdHJva2Utd2lkdGg9IjAiPjwvZz48ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvZz48ZyBpZD0iU1ZHUmVwb19pY29uQ2FycmllciI+IDxwYXRoIGQ9Ik0xMS45MjMxIDE5QzEwLjQ2MTEgMTkgOS4wMzY1OSAxOC41MzIgNy44NTM3OSAxNy42NjMxQzYuNjcxIDE2Ljc5NDIgNS43OTA2MyAxNS41NjkgNS4zMzg4NCAxNC4xNjMxQzQuODg3MDUgMTIuNzU3MiA0Ljg4NzA1IDExLjI0MjggNS4zMzg4NCA5LjgzNjg4QzUuNzkwNjMgOC40MzA5OCA2LjY3MSA3LjIwNTc4IDcuODUzOCA2LjMzNjg4QzkuMDM2NTkgNS40Njc5OCAxMC40NjExIDUgMTEuOTIzMSA1QzEzLjM4NTEgNSAxNC44MDk2IDUuNDY3OTkgMTUuOTkyNCA2LjMzNjg4QzE3LjE3NTIgNy4yMDU3OCAxOC4wNTU1IDguNDMwOTggMTguNTA3MyA5LjgzNjg4QzE4Ljk1OTEgMTEuMjQyOCAxOC45NTkxIDEyLjc1NzIgMTguNTA3MyAxNC4xNjMxTTE3LjUgMTIuNzc3OEwxOC40NjE1IDE0LjMzMzNMMjAgMTMuMTY2NyIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjwvcGF0aD48L2c+PC9zdmc+") 16 16, pointer;

                // #safi-corner-value {
                //     display: block;
                // }
            }


            @at-root .safi-action-value {
                // display: none;
                left: 17px;
                position: absolute;
                top: -5px;
                background: #ffffff80;
                border-radius: 4px;
                padding: 1px 4px;
                font-size: 12px;
                font-weight: bold;
            }
        }
    }
}


.dyn-img-type-wrap {
    position: absolute;
    /* bottom: 2px; */
    left: 50%;
    font-size: 10px;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dyn-img-type {
    font-weight: 500;
    text-transform: uppercase;
    color: #d9d9d9;
    color: #c1c1c1;
    text-align: center;
    /* min-width: 100%; */
    min-width: 50px;
    padding: 1px 5px;
    border-radius: 6px;
    /* height: 19px; */
    // background: #00000040;
    background-color: #5f5f5f;
    backdrop-filter: blur(1px);
    overflow: hidden;
    line-height: 1.25;
}

.dyn-img-magic {
    color: white;
    text-align: center;
    line-height: 1.25;
    margin-top: 4px;
}

// .dyn-img-type {
//     position: absolute;
//     bottom: 2px;
//     left: 0;
//     font-size: 10px;
//     font-weight: 500;
//     text-transform: uppercase;
//     color: #cdcdcd;
//     text-align: center;
//     min-width: 100%;
// }