@custom-variant terminal (&:is(.terminal *));

@theme {
  --color-primary: var(--color-primary);
  --color-agent: var(--color-agent);

  --shadow-terminal:
    0 0 6px var(--color-primary), inset 0 0 6px rgba(0, 255, 65, 0.1);
  --shadow-led: 0 0 10px var(--color-primary);

  @keyframes scanlines {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(100vh);
    }
  }
}

.terminal {
  --font-sans: "VT323", "Courier New", monospace;
  --font-mono: "VT323", "Courier New", monospace;
  --color-primary: #00ff41;
  --color-secondary: #008822;
  --color-background: #000000;
  --color-foreground: #00ff41;
  --color-card: #000000;
  --color-card-foreground: #ffffff;
  --color-border: #00ff41;
  --color-input: #008822;
  --color-accent: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-accent-foreground: #00ff41;
  --color-ring: #00ff41;
  --color-muted-foreground: #008822;
  --color-popover: #000000;
  --color-popover-foreground: #008822;
  --radius-base: 0;
  --scanlines-opacity: 0.12;

  * {
    &::selection {
      background-color: #00ff41;
      color: #000000;
    }
  }

  /* Scrollbar Styling */
  ::-webkit-scrollbar {
    width: 8px;
    background: var(--color-background);
  }

  ::-webkit-scrollbar-track {
    background: var(--color-background);
    border: 1px solid var(--color-primary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border: 1px solid var(--color-primary);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
  }

  body:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9996;
    background: radial-gradient(
      ellipse at center,
      transparent 0%,
      color-mix(in srgb, var(--color-primary) 10%, transparent) 70%,
      color-mix(in srgb, var(--color-background) 50%, transparent) 100%
    );
  }

  body:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      color-mix(in srgb, var(--color-primary) 3%, transparent) 2px,
      color-mix(in srgb, var(--color-primary) 3%, transparent) 4px
    );
    pointer-events: none;
    z-index: 9997;
    animation: scanlines 8s linear infinite;
  }
}

.terminal .terminal-text {
  display: inline;
  color: var(--color-primary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-normal);
  opacity: 0.5;
}

.terminal .terminal-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-secondary);

  &:before {
    font-size: var(--text-xs);
    content: "► ";
  }
}

.terminal .terminal-button {
  text-transform: uppercase;
  letter-spacing: 0.05em;

  &:hover {
    color: var(--color-background);
    background-color: var(--color-primary);
    box-shadow: var(--shadow-terminal);
  }

  &:after {
    content: "►";
    margin-left: 0.25em;
  }

  &:before {
    content: "◄";
    margin-right: 0.25em;
  }
}