:root {
  --font-family: "Inter", sans-serif;
  --background-primary: #fff;
  --border-color: #ccc;
  --primary-color: #333;
}

body {
  margin: 0;
}

.button {
  padding: 6px 12px;
  background: #f9f9f9;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.press-effect {
  outline: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.press-effect:active {
  transform: translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.line.indent {
  padding-left: 20px;
  border-left: 1px solid var(--border-color);
}

/* Add to style.css */
/* File operation buttons styling */
.file-buttons button {
  background: #e3f2fd;
  border-color: #1976d2;
  color: #1976d2;
  font-weight: 500;
}

.file-buttons button:hover {
  background: #bbdefb;
}

.file-buttons button:active {
  background: #90caf9;
}

/* Execution control buttons styling */
.left-buttons button {
  background: #e3f2fd;
  border-color: #1976d2;
  color: #1976d2;
  font-weight: 500;
}

.left-buttons button:hover {
  background: #bbdefb;
}

.left-buttons button:active {
  background: #90caf9;
}

/* Stop button special styling */
#stop-btn {
  background: #ffebee !important;
  border-color: #d32f2f !important;
  color: #d32f2f !important;
}

#stop-btn:hover {
  background: #ffcdd2 !important;
}

#stop-btn:active {
  background: #ef9a9a !important;
}

/* Disabled state for buttons during execution */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Emojis for all control buttons */
#run-btn::before {
  content: "▶️ ";
}

#step-over-btn::before {
  content: "⏭️ ";
}

#step-into-btn::before {
  content: "⬇️ ";
}

#step-out-btn::before {
  content: "⬆️ ";
}

#stop-btn::before {
  content: "⏹️ ";
}

/* Upload/Download icons */
#upload-btn::before {
  content: "⬆️ ";
}

#download-btn::before {
  content: "⬇️ ";
}

.block-container {
  width: fit-content;
  margin: 1px 0;
  cursor: text;
}

.empty {
  width: 100%;
}

.selected {
  background-color: #e3f2fd;
}

.block {
  background: linear-gradient(145deg, rgb(220, 220, 220), rgb(190, 190, 190));
  padding: 1px 8px 3px;
  border-radius: 4px;
  cursor: move;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4),
    inset 1px 1px 2px rgba(255, 255, 255, 0.2),
    inset -1px -1px 2px rgba(0, 0, 0, 0.1);
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
  box-sizing: border-box;
  font-weight: bold;
}

.block:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
    inset 4px 4px 8px rgba(255, 255, 255, 0.2);
}

.line {
  position: relative;
  display: flex;
  gap: 4px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: red;
  height: 24px;
  background-image: linear-gradient(to right, var(--border-color) 33%, white 0%);
  background-position: bottom;
  background-size: 12px 1px;
  background-repeat: repeat-x;
  background-clip: content-box;
  box-shadow: none;
}

.error {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

.instruction {
  color: #005cc5;
  font-weight: 500;
}

.number {
  color: rgb(230, 51, 51);
}

.datatype {
  color: rgb(0, 158, 3);
}

.label {
  color: #6f42c1;
}

.indent {
  height: 24px;
  width: 1px;
  position: absolute;
  background-color: var(--border-color);
  left: 0px;
}