/*
 * 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.
 */

/* View Transitions API - morphing elements between pages */
[style*="view-transition-name:"] {
  contain: layout;
}

/* Don't animate the whole document - only named elements morph */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* Variable Input Component Styles */

/* Contenteditable editor styling */
[data-variable-input] {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border: 1px solid rgb(209 213 219);
  border-radius: 0.375rem;
  background: white;
  cursor: text;
  outline: none;
  word-break: break-word;
}

[data-variable-input]:focus {
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 1px rgb(59 130 246);
}

.dark [data-variable-input] {
  background: rgb(17 24 39);
  border-color: rgb(55 65 81);
  color: rgb(243 244 246);
}

.dark [data-variable-input]:focus {
  border-color: rgb(59 130 246);
}

/* Variable mention badges */
.variable-mention {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  margin: 0 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(29 78 216);
  background: rgb(219 234 254);
  border-radius: 0.25rem;
  vertical-align: baseline;
  user-select: none;
}

.dark .variable-mention {
  color: rgb(147 197 253);
  background: rgb(30 58 138);
}

.variable-mention.variable-unknown {
  color: rgb(185 28 28);
  background: rgb(254 226 226);
}

.dark .variable-mention.variable-unknown {
  color: rgb(252 165 165);
  background: rgb(127 29 29);
}

/* Tribute.js autocomplete menu */
.tribute-container {
  position: absolute;
  z-index: 50;
  margin-top: 0.25rem;
  min-width: 10rem;
  max-height: 15rem;
  overflow-y: auto;
  background: white;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark .tribute-container {
  background: rgb(31 41 55);
  border-color: rgb(55 65 81);
}

.tribute-container ul {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
}

.tribute-container li {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(55 65 81);
  cursor: pointer;
  border-radius: 0.375rem;
}

.dark .tribute-container li {
  color: rgb(209 213 219);
}

.tribute-container li:hover,
.tribute-container li.highlight {
  background: rgb(243 244 246);
  color: rgb(17 24 39);
}

.dark .tribute-container li:hover,
.dark .tribute-container li.highlight {
  background: rgb(55 65 81);
  color: rgb(243 244 246);
}

.tribute-container .tribute-no-match {
  display: block;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: rgb(107 114 128);
}

/* Quick insert buttons */
.variable-quick-insert {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  margin: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgb(55 65 81);
  background: rgb(243 244 246);
  border: 1px solid rgb(209 213 219);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}

.variable-quick-insert:hover {
  background: rgb(229 231 235);
  border-color: rgb(156 163 175);
}

.dark .variable-quick-insert {
  color: rgb(209 213 219);
  background: rgb(55 65 81);
  border-color: rgb(75 85 99);
}

.dark .variable-quick-insert:hover {
  background: rgb(75 85 99);
  border-color: rgb(107 114 128);
}