/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.canvas-background {
    background-color: #f9fafb;
    background-size: 14px 14px;
    background-image: linear-gradient(to right, rgba(229, 235, 237, 1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(229, 235, 237, 1) 1px, transparent 1px);
    z-index: 1;
    overflow: hidden;
}

/* svg styles */

:host ::ng-deep svg.canvas-svg {
    width: 100%;
    height: 100%;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text.unset {
        font-style: italic;
        font-weight: normal;
        fill: #aaa;
    }

    .moveable {
        cursor: pointer;
    }

    /*
      All components
  */

    g.component {
        font-family: Roboto;
    }

    g.component rect.body {
        fill: #ffffff;
    }

    g.component rect.body.unauthorized {
        fill: #f4f6f7;
    }

    g.component rect.border {
        stroke: rgba(0, 0, 0, 0.25);
        stroke-width: 1;
    }

    g.component rect.border.unauthorized {
        stroke-width: 3;
        stroke: #ba554a !important;
        stroke-dasharray: 4;
    }

    g.component rect.border.ghost {
        stroke-width: 3;
        stroke: #aaaaaa !important;
        stroke-dasharray: 4;
    }

    g.component rect.processor-icon-container.unauthorized {
        fill: #f4f6f7 !important;
    }

    g.component.selected rect.border {
        stroke: #004849 !important;
        stroke-width: 3;
    }

    text.stats-label {
        fill: #262626;
        font-size: 12px;
        font-family: Roboto Slab;
    }

    text.stats-value {
        fill: #775351;
        font-size: 12px;
        font-weight: bold;
    }

    text.stats-value tspan.size,
    text.stats-value tspan.size,
    text.stats-value tspan.public-ports {
        font-weight: normal;
    }

    text.stats-info {
        fill: #728e9b;
        font-size: 12px;
    }

    text.bulletin-icon {
        font-size: 13px;
        font-family: FontAwesome;
        fill: #ffffff;
    }

    rect.bulletin-background {
        fill: #ba554a;
    }

    text.active-thread-count-icon {
        font-family: flowfont;
        font-size: 12px;
        fill: #728e9b;
        text-anchor: end;
    }

    text.active-thread-count {
        fill: #775351;
        font-size: 12px;
        font-weight: bold;
    }

    path.component-comments {
        fill: #000;
        stroke: #000;
    }

    text.spin {
        -webkit-animation-name: rotate;
        -webkit-animation-duration: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: rotate;
        -moz-animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        animation-name: rotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-moz-keyframes rotate {
        from {
            -moz-transform: rotate(0deg);
        }
        to {
            -moz-transform: rotate(360deg);
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    /*
      Selection
  */

    g.component.connectable-destination rect.border {
        stroke: #00ff00;
        stroke-width: 3;
    }

    rect.component-selection,
    rect.drag-selection,
    rect.label-drag {
        stroke: #444444;
        stroke-opacity: 0.5;
        fill: transparent;
    }

    text.add-connect {
        cursor: pointer;
        font-family: flowfont;
        font-size: 28px;
        fill: #004849;
    }

    /*
      Processor
  */

    text.processor-name {
        fill: #262626;
        font-size: 14px;
    }

    text.processor-type {
        fill: #728e9b;
        font-size: 12px;
    }

    text.processor-bundle {
        fill: #666;
        font-size: 10px;
    }

    rect.processor-icon-container {
        fill: #ffffff;
    }

    text.processor-icon {
        font-family: flowfont;
        font-size: 30px;
    }

    circle.restricted-background,
    circle.is-primary-background {
        visibility: hidden;
        fill: rgba(255, 255, 255, 0.9);
    }

    text.restricted {
        visibility: hidden;
        font-family: FontAwesome;
        font-size: 12px;
        fill: #ba554a;
    }

    text.is-primary {
        visibility: hidden;
        font-size: 12px;
        font-weight: bold;
    }

    text.run-status-icon {
        font-size: 14px;
        transform-origin: 62px 18px 0;
    }

    /*
      Connection
  */

    g.connection {
        font-family: Roboto;
    }

    g.connection rect.body {
        fill: #ffffff;
    }

    g.connection rect.body.unauthorized {
        fill: #f4f6f7;
    }

    g.connection rect.border.unauthorized {
        stroke-width: 1.5;
        stroke: #ba554a;
        stroke-dasharray: 3, 3;
    }

    g.connection rect.border.full {
        stroke: rgba(186, 85, 74, 0.65);
        stroke-width: 1;
    }

    g.connection.selected rect.border {
        /*stroke: #004849;*/
        stroke: #ffcc00;
        stroke-width: 3;
    }

    path.connector {
        fill: none;
        pointer-events: none;
        stroke: #ff0000;
        stroke-width: 3;
        stroke-opacity: 0.5;
        stroke-dasharray: 2;
    }

    path.connector.connectable {
        stroke: #00ff00;
        stroke-width: 3;
        stroke-dasharray: 4;
    }

    g.connection path.connection-path {
        fill: none;
        stroke: #000000;
        stroke-width: 2;
        cursor: pointer;
    }

    g.connection path.connection-path.full {
        stroke: #ba554a;
    }

    g.connection path.connection-path.unauthorized {
        stroke: #ba554a;
        stroke-dasharray: 3, 3;
    }

    text.connection-from-run-status,
    text.connection-to-run-status,
    text.expiration-icon,
    text.load-balance-icon,
    text.penalized-icon {
        fill: #728e9b;
        font-family: FontAwesome;
        font-size: 12px;
        text-shadow: 0 0 4px rgba(255, 255, 255, 1);
    }

    text.load-balance-icon-active {
        fill: #44a3cf;
    }

    text.load-balance-icon-184 {
        transform-origin: 197px 10px 0;
    }

    text.load-balance-icon-200 {
        transform-origin: 213px 10px 0;
    }

    text.connection-from-run-status.is-missing-port,
    text.connection-to-run-status.is-missing-port {
        fill: #cf9f5d;
    }

    g.connection rect.backpressure-tick {
        fill: transparent;
    }

    g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
    g.connection rect.backpressure-tick.object-prediction.prediction-down {
        fill: white;
    }

    g.connection rect.backpressure-tick.data-size-prediction,
    g.connection rect.backpressure-tick.object-prediction {
        fill: black;
    }

    g.connection rect.backpressure-tick.data-size-prediction.not-configured,
    g.connection rect.backpressure-tick.object-prediction.not-configured,
    g.connection rect.backpressure-tick.data-size-prediction.prediction-down.not-configured,
    g.connection rect.backpressure-tick.object-prediction.prediction-down.not-configured {
        fill: transparent;
    }

    g.connection rect.backpressure-tick.not-configured {
        fill: #acacac;
    }

    g.connection rect.backpressure-object,
    g.connection rect.backpressure-data-size {
        fill: #d8d8d8;
    }

    /**/
    g.connection rect.backpressure-object > title > tspan,
    g.connection rect.backpressure-data-size > title > tspan {
        display: block;
    }

    /**/

    g.connection rect.backpressure-object.not-configured,
    g.connection rect.backpressure-data-size.not-configured {
        fill: transparent;
    }

    g.connection rect.backpressure-percent {
        fill: #67b796;
        pointer-events: none;
    }

    g.connection rect.backpressure-percent.warning {
        fill: #cea958;
    }

    g.connection rect.backpressure-percent.error {
        fill: #ba554a;
    }

    /* grouped connection */

    g.connection.grouped path.connection-path,
    g.connection.grouped rect.connection-label {
        stroke-width: 3;
    }

    /* ghost connection */

    g.connection.ghost path.connection-path,
    g.connection.ghost rect.connection-label {
        stroke: #aaaaaa;
        stroke-dasharray: 4;
    }

    g.connection path.connection-selection-path {
        visibility: hidden;
        stroke-width: 1;
        stroke: #ffcc00;
        fill: none;
    }

    g.connection path.connection-path-selectable {
        visibility: hidden;
        stroke-width: 20;
        fill: none;
        cursor: pointer;
    }

    g.connection.selected path.connection-selection-path {
        visibility: visible;
    }

    g.connection rect.linepoint {
        visibility: hidden;
        stroke-width: 1;
    }

    g.connection.selected rect.linepoint {
        visibility: visible;
    }

    g.connection rect.startpoint {
        stroke: #ff0000;
        fill: #ff0000;
    }

    g.connection rect.midpoint {
        stroke: #ffcc00;
        fill: #ffcc00;
        cursor: pointer;
    }

    g.connection rect.endpoint {
        stroke: #0000ff;
        fill: #0000ff;
        cursor: pointer;
    }

    /* labels */

    g.label rect.labelpoint {
        display: none;
        stroke-width: 1;
        stroke: #ffcc00;
        fill: #ffcc00;
        cursor: se-resize;
    }

    g.label.selected rect.labelpoint {
        display: block;
    }

    /* funnels */

    text.funnel-icon {
        fill: #ad9897;
        font-family: flowfont;
        font-size: 30px;
    }

    /* ports */

    text.port-name {
        fill: #262626;
        font-size: 14px;
    }

    text.port-icon {
        fill: #ad9897;
        font-family: flowfont;
        font-size: 30px;
    }

    text.port-transmission-icon {
        font-size: 15px;
        fill: #728e9b;
    }

    /* active thread count */

    text.active-thread-count {
        font-size: 10px;
    }

    /* process groups */

    text.process-group-name {
        fill: #262626;
        font-size: 14px;
    }

    text.version-control {
        font-family: FontAwesome;
        font-size: 18px;
        text-shadow: 0 0 4px rgba(255, 255, 255, 1);
        visibility: hidden;
    }

    text.process-group-contents-count {
        fill: #775351;
        font-size: 15px;
        font-weight: 500;
        font-family: Roboto, sans-serif;
    }

    g.process-group.drop rect.border {
        stroke: #0000ff;
        stroke-width: 3;
    }

    text.process-group-contents-icon {
        font-size: 15px;
        fill: #728e9b;
    }

    /* remote process group */

    text.remote-process-group-name {
        fill: #262626;
        font-size: 14px;
    }

    text.remote-process-group-uri {
        fill: #004849;
        font-size: 12px;
    }

    text.remote-process-group-transmission-status {
        font-size: 15px;
        fill: #728e9b;
    }

    text.remote-process-group-transmission-secure {
        font-family: FontAwesome;
        font-size: 13px;
        fill: #004849;
    }

    text.remote-process-group-last-refresh {
        fill: #728e9b;
        font-size: 10px;
    }
}
