:root {
  --height-toolbar: 42px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

header {
  padding: 0.3rem 0;
  height: var(--height-toolbar);

  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray);

  h1 {
    margin: 0;
  }

  .btn-link {
    line-height: 1.7;
  }

  .flex-horizontal {
    align-items: end;
  }
}

h1 {
  font-size: 18pt;
}

#canvas {
  position: fixed;
  top: var(--height-toolbar);
  left: 0;
  right: 0;
  bottom: 0;
  touch-action: none;

  background: var(--color-white);
}

.i--selected {
  background: var(--accent-primary);
  color: var(--color-white);
  border-radius: 0.2rem;
  margin-right: 0.15rem;
}

.node-container {
  position: relative;

  .node__handle {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    display: flex;
  }

  .node__top-controls, .node__bottom-controls {
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    display: flex;
    font-size: 0.8rem;
    gap: 0.2rem;
  }
  .node__top-controls { top: 0.2rem }
  .node__bottom-controls { bottom: 0.2rem }

  .node {
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    text-align: center;
    line-height: 1;
  }
}

.node__tools {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.node-menu {
  display: flex;
  flex-direction: column;
  margin: 0.2rem 0 0 0.2rem;
  gap: 0.2rem;
}

.ph.disabled {
  color: var(--color-gray);
  pointer-events: none;
}

.edge-menu {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;

  .ph {
    display: block;
  }
}