/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 @layer reset, theme, global, layout, components, utilities, states;

 body {
  height: 100vh;
  width: 100vw;
}

.terminal {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.terminal--body {
  flex: 1;
  overflow: scroll;
  background: black;
  color: white;
  padding: 0.25rem;
}

.terminal--input {
  display: flex;
  align-items: center;
  width: 100%;
}

.terminal--input-form {
  flex: 1;
}

.terminal--input-field {
  width: 100%;
  background: transparent;
  color: #fff;
  outline: none;
  padding: none;
  margin: none;
  border: none;
  resize: none;
}

.terminal--prompt {
  margin-right: 0.25rem;
}

.terminal--welcome {
  margin-bottom: 1em;
}

/* What `cat` shows: keep the file's own line breaks and spacing. */
.terminal--file {
  white-space: pre-wrap;
}

.red {
  color: red;
}

.blue {
  /* Pure blue is too dark to read on black; this is xterm's colour 75. */
  color: #5fafff;
}

/* Colour codes in what people type (see the Printcodes model). Tuned to read well on
   black, unlike the pure ANSI colours: ~F? is a colour, ~C? its bright version, ~B? a
   background. */
.printcode--fk { color: #000000; }
.printcode--fr { color: #d75f5f; }
.printcode--fg { color: #5faf5f; }
.printcode--fy { color: #d7af5f; }
.printcode--fb { color: #5f87d7; }
.printcode--fm { color: #af5faf; }
.printcode--ft { color: #5fafaf; }
.printcode--fw { color: #d0d0d0; }

.printcode--ck { color: #808080; }
.printcode--cr { color: #ff5f5f; }
.printcode--cg { color: #5fff5f; }
.printcode--cy { color: #ffff5f; }
.printcode--cb { color: #5fafff; }
.printcode--cm { color: #ff5fff; }
.printcode--ct { color: #5fffff; }
.printcode--cw { color: #ffffff; }

.printcode--bk { background: #000000; }
.printcode--br { background: #870000; }
.printcode--bg { background: #005f00; }
.printcode--by { background: #875f00; }
.printcode--bb { background: #00005f; }
.printcode--bm { background: #5f005f; }
.printcode--bt { background: #005f5f; }
.printcode--bw { background: #d0d0d0; }

.printcode--bold { font-weight: bold; }
.printcode--underline { text-decoration: underline; }
.printcode--blink { animation: printcode-blink 1s step-end infinite; }

@keyframes printcode-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .printcode--blink { animation: none; }
}