import { css } from 'lit'

export const GraphViewerStyles = css`
  * {
    margin: 0;
    padding: 0;
  }

  .graph-viewer {
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .graph-info {
    font-size: 16px;
    padding: 10px;
    position: absolute;
  }

  .graph-info a {
    border: 1px solid;
    display: inline-block;
    font-size: 14px;
    line-height: 1.428571429;
    margin-left: 5px;
    margin-top: 5px;
    padding: 6px 12px;
  }

  .graph-info a.class {
    color: #fff;
  }

  .graph-info a.property {
    background-color: var(--md-sys-color-surface);
    border-color: #ccc;
    color: #333;
  }

  .graph-info a.btn {
    margin-left: 5px;
    margin-top: 5px;
    opacity: 1;
  }

  .graph-info a.info {
    background-color: #a5abb6;
    border: 1px solid #9aa1ac;
    color: #fff;
  }

  .node.node-highlighted .ring {
    filter: alpha(opacity=50);
    opacity: 0.5;
    stroke: #888;
    stroke-width: 12px;
  }

  .node .outline {
    cursor: pointer;
    fill: #a5abb6;
    pointer-events: all;
    stroke: #9aa1ac;
    stroke-width: 2px;
  }

  .node .ring {
    fill: none;
    filter: alpha(opacity=0);
    opacity: 0;
    stroke: #6ac6ff;
    stroke-width: 8px;
  }

  .node .text.icon {
    font-size: 24px;
  }

  .node .text.icon {
    font-family: Material Symbols Outlined;
  }

  .node.selected .ring,
  .node:hover .ring {
    filter: alpha(opacity=30);
    opacity: 0.3;
  }

  .relationship {
    cursor: default;
  }

  .relationship line {
    stroke: #aaa;
  }

  .relationship .outline {
    cursor: default;
  }

  .relationship .overlay {
    cursor: default;
    fill: #6ac6ff;
    filter: alpha(opacity=0);
    opacity: 0;
  }

  .relationship text {
    cursor: default;
  }

  .relationship.selected .overlay,
  .relationship:hover .overlay {
    filter: alpha(opacity=30);
    opacity: 0.3;
  }

  svg {
    cursor: move;
  }
`