@import "./menu.scss";

$collapse-animation-duration: 0.4s;

.react-flow-editor {
    outline: none;
    position: relative;
    overflow: auto;
}

.react-flow-creating-node,
.react-flow-editor {
    >div {
        position: absolute;
    }

    canvas.grid {
        position: absolute;
        overflow: hidden;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
    }

    path.connection {
        stroke: $path-color;
        fill: transparent;

        &.selected {
            stroke: $selected-color;
        }
    }

    .node {
        display: inline-block;
        background-color: $node-background-color;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        position: absolute;
        border-radius: $border-radius-expanded;
        border: $node-border-width solid $node-border-color;
        box-sizing: content-box;
        z-index: 1;

        transition: $node-transitions;

        &.selected {
            border: $node-border-width-selected solid $selected-color;
            margin: #{$node-border-width - $node-border-width-selected};
            z-index: 3;
        }

        &.collapsed {
            z-index: 0;
            border-radius: $border-radius-collapsed;

            >.header {
                border-bottom: 0 solid $border-color;
                border-radius: $border-radius-collapsed;
            }
        }

        &:hover {
            z-index: 2;

            &.selected {
                border: $node-border-width-selected solid $selected-color;
                margin: #{$node-border-width - $node-border-width-selected};
            }

            border: $node-border-width solid $border-color;
            background-color: $node-background-hover-color;

            >header {
                background-color: $node-header-hover-color;
            }
        }

        >.header {
            border-bottom: $node-border-width solid $border-color;
            min-width: 120px;
            padding: 6px;
            text-align: center;
            cursor: grab;
            background-color: $node-header-color;
            user-select: none;
            -moz-user-select: none;
            border-radius: $border-radius-expanded $border-radius-expanded 0 0;
            transition: border-radius $collapse-animation-duration;

            .outputs,
            .inputs,
            .dot {
                // height: 24px;
                // width: 12px;
                position: relative;

                .dot {
                    position: absolute;
                }
            }

            .connections.left {
                float: left;
            }

            .connections.right {
                float: right;
            }

            .expander {
                height: 20px;
                width: 20px;
                margin-top: -3px;
                float: left;
                cursor: pointer;
            }

            >span {
                padding: 7px;
            }
        }

        >.body {
            padding: 10px;
        }

        .dot {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            display: inline-block;
            margin-top: 3px;
            user-select: none;
            -moz-user-select: none;
            cursor: pointer;

            &:hover {
                height: 12px;
                width: 12px;
                margin-top: 1px;

                &.left {
                    margin-right: -17px;
                }

                &.right {
                    margin-left: -17px;
                }
            }

            &.input {
                background-color: $input-color;
                border: $endpoint-border-radius solid $input-border-color;
            }

            &.output {
                background-color: $output-color;
                border: $endpoint-border-radius solid $output-border-color;
            }

            &.left {
                float: left;
                margin-left: -16px;
            }

            &.right {
                float: right;
                margin-right: -16px;
            }
        }
    }

    svg.connections {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }
}

$icon-width: 2px;

.icon {
    transition: all $collapse-animation-duration ease;

    &.arrow-right {
        color: $icon-color;
        position: absolute;
        margin-top: 3px;
        margin-left: 10px;
        width: $icon-width;
        height: 16px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        background-color: currentColor;
    }

    &.arrow-right:before {
        content: '';
        position: absolute;
        right: -5px;
        top: 3px;
        width: 10px;
        height: 10px;
        border-top: solid $icon-width currentColor;
        border-right: solid $icon-width currentColor;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    &.arrow-down {
        color: $icon-color;
        position: absolute;
        margin-left: 10px;
        margin-top: 2px;
        width: $icon-width;
        height: 16px;
        background-color: currentColor;
    }

    &.arrow-down:before {
        content: '';
        position: absolute;
        left: -5px;
        top: 3px;
        width: 10px;
        height: 10px;
        border-top: solid $icon-width currentColor;
        border-right: solid $icon-width currentColor;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
}