@import "../../scss/color-palette";

button.circle-button {
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
}

.circle-button {
    border-radius: 1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0.25rem;
    z-index: 2000;
    cursor: pointer;
}

$node-colors: (
    "success": $base-green-400,
    "primary": $base-purple-500,
    "danger": $base-red-500,
    "blue": $base-blue-500,
    "default": $base-gray-600
);

.button-icon {
    font-size: 0.66rem;
}

.vue-flow__panel.vue-flow__controls {
    z-index: 200001;
}

.vue-flow__controls {
    border: 1px solid var(--ks-border-primary);
    border-radius: var(--bs-border-radius);
}

.vue-flow__controls-button {
    color: var(--bs-black);
    border-bottom-color: var(--bs-border-color);

    .material-design-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 0;

        svg {
            width: 12px;
            height: 12px;
        }
    }

    svg {
        fill: var(--bs-black);
    }

    &.active svg {
        fill: var(--ks-content-link);
    }

    html.dark & {
        background: var(--ks-background-card);
        color: var(--bs-white);

        svg {
            fill: var(--bs-white);
        }

        &.active svg {
            fill: var(--ks-content-link);
        }
    }
}

:root {
    #{--ks-topology-edge-color}: #9A8EB4;
}

.vue-flow__container {
    .vue-flow__node.topology-node-hovered,
    .vue-flow__node.topology-node-drop-target {
        outline: none !important;
    }

    .vue-flow__node.topology-node-hovered .node-wrapper {
        border-color: var(--bs-gray-900) !important;
    }

    .vue-flow__node.topology-node-drop-target .node-wrapper {
        border-color: var(--bs-primary) !important;
    }

    .top-button-div {
        position: absolute;
        top: -0.5rem;
        right: -0.5rem;
        justify-content: center;
        padding-right: 3px;
        display: flex
    }

    .vue-flow__node-cluster {
        pointer-events: none !important;
    }

    .vue-flow__handle {
        opacity: 0 !important;
    }

    .vue-flow__edge-path {
        stroke: var(--ks-topology-edge-color);
        fill: none;
    }

    @each $color, $value in $node-colors {
        .ks-topology-#{$color}-border {
            background-color: rgba($value, 0.05);
            border: 1px solid $value;
        }
    }
}

.is-exporting {
    .vue-flow__controls,
    .vue-flow__controls-button,
    .vue-flow__handle,
    .top-button-div,
    .circle-button {
        display: none !important;
    }
}