.conllu-graph-viewer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  background-color: white;

  .floating-buttons {
    position: absolute;
    top: var(--spacing-100, 10px);
    right: var(--spacing-100, 10px);
    z-index: 1069;
    display: flex;
    gap: var(--spacing-50, 4px);
  }

  #canvas {
    width: 100%;
    height: 100%;
    display: block;
    background-color: white;

    .item-postag {
      fill: #000;
      font-size: var(--font-size-body);
    }

    .item-text {
      fill: #000;
      font-size: var(--font-size-body);
      font-style: italic;
      font-weight: var(--font-weight-light);
    }

    .active-arrow {
      stroke: var(--color-primary);
      fill: var(--color-primary);
      stroke-width: 3px;
    }

    .active-line {
      stroke: var(--color-primary);
      stroke-width: 3px;
    }

    .active-item {
      stroke: var(--color-primary);
      stroke-width: 3px;
    }

    .drag-over {
      stroke: var(--color-success, #28a745);
      stroke-width: 3px;
      fill: rgba(40, 167, 69, 0.1);
    }

    .dragging {
      opacity: 0.5;
      cursor: grabbing !important;
    }

    g[style*='cursor: grab'] {
      cursor: grab !important;
    }

    g[style*='cursor: grab']:active {
      cursor: grabbing !important;
    }
  }
}