@import './base.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.44.0/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@1.44.0/dist/theme-default.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css';
@import 'https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css';

html, body, #app {
  height: 100vh;
  overflow: hidden;
}

#app {
  margin: 0 auto;
  padding: 0.4rem;
  font-weight: normal;
  height: 100%;
  background-color: #080914;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (min-width: 1024px) {
  body {
    display: block;
  }

  #app {
    display: block;
  }
}


.basic-flow {
  background:#2d3748;
  color:#fffffb;
}

.basic-flow .vue-flow__node {
  color:#fffffb
}

.basic-flow .vue-flow__node.selected > :first-child {
  box-shadow: 0 0 0 3px #fcfcfc;
}

.basic-flow .vue-flow__edge-textbg {
  fill:#292524
}

.basic-flow .vue-flow__edge-text {
  fill:#fffffb
}

@font-face {
  font-family: 'DistantTears';
  src: url('/fonts/DistantTears.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.node-textarea {
  font-family: 'DistantTears', sans-serif;
}

.vue-flow__handle.handle--green,
.handle--green {
  background-color: #a5d060;
  border-color: #a5d060;
  width: 8px;
  height: 8px;
}

.vue-flow__handle.handle--red,
.handle--red {
  background-color: #aa617c;
  border-color: #aa617c;
  width: 8px;
  height: 8px;
}

.vue-flow__handle.handle--blue,
.handle--blue {
  background-color: #6f96ff;
  border-color: #6f96ff;
  width: 8px;
  height: 8px;
}

.basic-flow .vue-flow__node > .node--error,
.node--error {
  box-shadow: 0 0 0 3px #e74c3c !important;
  animation: shake 1s infinite ease-in-out alternate;
}

.vue-flow__node-toolbar {
  display: flex;
  gap: 4px;
}

.vue-flow__node-toolbar button {
  background: #4a5568;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
}

.vue-flow__node-toolbar button.selected {
  background: #6f96ff;
}

.vue-flow__node-toolbar button:hover {
  background: #6f96ff;
}

@keyframes shake {
  0%  { transform: translateX(0) }
  10% { transform: translateX(2px) }
  20% { transform: translateX(-2px) }
  30% { transform: translateX(0) }
}