@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/variables-dark';

/*
 * Cable trace SVG styling
 */

:root {
  // Light mode values
  --nbx-trace-bg: var(--tblr-bg-surface-secondary);
  --nbx-trace-color: #{$black};
  --nbx-trace-node-bg: #{$gray-200};
  --nbx-trace-termination-bg: #{$gray-100};
  --nbx-trace-cable-shadow: #{$gray-800};
  --nbx-trace-attachment: #{$gray-400};

  &[data-bs-theme='dark'] {
    // Dark mode values
    --nbx-trace-bg: rgb(27, 41, 58);
    --nbx-trace-color: #{$white};
    --nbx-trace-node-bg: #{$gray-900};
    --nbx-trace-termination-bg: #{$gray-800};
    --nbx-trace-cable-shadow: #{$gray-200};
    --nbx-trace-attachment: #{$gray-600};
  }
}

* {
  font-family: $font-family-sans-serif;
  font-size: $font-size-sm;
}

text {
  text-anchor: middle;
  dominant-baseline: middle;

  &:not([fill]) {
    // Fill text with body color when a fill attribute is not set via element attributes.
    fill: var(--nbx-trace-color);
  }

  &.bold {
    font-weight: $font-weight-bold;
  }
}

svg {
  background-color: var(--nbx-trace-bg);

  /* Boxes */
  rect {
    fill: var(--nbx-trace-node-bg);
    stroke: #606060;
    stroke-width: 1;
    .termination {
      fill: var(--nbx-trace-termination-bg);
    }
  }

  /* Connectors */
  .connector text {
    text-anchor: start;
  }
  line {
    stroke-width: 5px;
  }
  polyline {
    fill: none;
    stroke-width: 5px;
  }
  .cable-shadow {
    stroke: var(--nbx-trace-cable-shadow);
    stroke-width: 7px;
  }
  line.wireless-link {
    stroke: var(--nbx-trace-attachment);
    stroke-dasharray: 4px 12px;
    stroke-linecap: round;
  }
  line.attachment {
    stroke: var(--nbx-trace-attachment);
    stroke-dasharray: 5px;
  }
}