/*
 * 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.
 */

:root {
  --topology-node-border: rgba(15, 23, 42, 0.14);
  --topology-node-shadow: 0 10px 28px rgba(2, 6, 23, 0.10);
  --topology-node-shadow-hover: 0 14px 34px rgba(2, 6, 23, 0.14);

  --topology-toolbar-bg: rgba(255, 255, 255, 0.92);
  --topology-toolbar-border: rgba(15, 23, 42, 0.10);
  --topology-toolbar-fg: rgba(15, 23, 42, 0.78);
  --topology-toolbar-fg-hover: rgba(15, 23, 42, 0.92);
}

#zoom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;

  ul.menu {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul.menu > li {
    margin: 0;
    padding: 0;
  }

  ul.menu > li > a.btn,
  .topology-toolbar-btn {
    appearance: none;
    border: 1px solid var(--topology-toolbar-border);
    background: var(--topology-toolbar-bg);
    color: var(--topology-toolbar-fg);
    border-radius: 999px;
    padding: 6px 10px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.10);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
  }

  ul.menu > li > a.btn:hover,
  .topology-toolbar-btn:hover {
    color: var(--topology-toolbar-fg-hover);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
  }

  ul.menu > li > a.btn:focus,
  .topology-toolbar-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.25), 0 10px 22px rgba(2, 6, 23, 0.14);
  }

  ul.menu > li > a.btn i,
  .topology-toolbar-btn i {
    font-size: 1.05rem;
    padding-right: 0;
  }
}

#topology {
  cursor: grab;
}

#topology.topology-panning {
  cursor: grabbing;
}

#drawing .window {
  opacity: 1;
  border: 1px solid var(--topology-node-border);
  box-shadow: var(--topology-node-shadow);
  border-radius: 14px;
  width: 200px;
  min-height: 72px;
  height: auto;
  line-height: normal;
  padding: 10px 12px;

  display: flex;
  align-items: center;
  justify-content: center;
}

#drawing .window:hover {
  box-shadow: var(--topology-node-shadow);
}

#drawing .window[data-original-title]:hover::after {
  content: none !important;
  display: none !important;
}

#drawing .window.topology_root {
  background-color: rgba(22, 163, 74, 0.18);
}

#drawing .window.topology_cs {
  background-color: rgba(14, 165, 233, 0.12);
}

#drawing .window.topology_conn {
  background-color: rgba(139, 92, 246, 0.10);
}

#drawing .window.topology_conn_errored {
  background-color: rgba(244, 63, 94, 0.18);
}

#drawing .window.topology_res {
  background-color: rgba(245, 158, 11, 0.14);
}

#drawing .window p {
  font-weight: 700;
  letter-spacing: 0.2px;
  font-size: 1.25em;
  line-height: 1.25;
}
