/* Variable Overrides */

:root{
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-red-900: oklch(39.6% .141 25.723);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-amber-100: lab(95.916% -1.21653 23.111);
  --color-amber-200: lab(91.7203% -.505269 49.9084);
  --color-amber-300: lab(86.4156% 6.13147 78.3961);
  --color-amber-400: lab(80.1641% 16.6016 99.2089);
  --color-amber-500: lab(72.7183% 31.8672 97.9407);
  --color-amber-600: lab(60.3514% 40.5624 87.1228);
  --color-amber-700: lab(47.2709% 42.9082 69.2966);
  --color-amber-800: lab(37.8822% 37.1699 52.2718);
  --color-amber-900: lab(31.2288% 30.2627 40.0378);
  --color-amber-950: lab(15.8111% 20.9107 23.3752);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-teal-50: oklch(98.4% .014 180.72);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-teal-500: oklch(70.4% .14 182.503);
  --color-teal-600: oklch(60% .118 184.704);
  --color-cyan-50: oklch(98.4% .019 200.873);
  --color-cyan-400: oklch(78.9% .154 211.53);
  --color-cyan-600: oklch(60.9% .126 221.723);
  --color-cyan-800: oklch(45% .085 224.283);
  --color-cyan-900: oklch(39.8% .07 227.392);
  --color-purple-50: oklch(97.7% .014 308.299);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-purple-900: oklch(38.1% .176 304.987);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% .001 286.375);
  --color-zinc-200: oklch(92% .004 286.32);
  --color-zinc-200-rgb: 224, 224, 231;
  --color-zinc-300: oklch(87.1% .006 286.286);
  --color-zinc-400: oklch(70.5% .015 286.067);
  --color-zinc-500: oklch(55.2% .016 285.938);
  --color-zinc-600: oklch(44.2% .017 285.786);
  --color-zinc-700: oklch(37% .013 285.805);
  --color-zinc-800: oklch(27.4% .006 286.033);
  --color-zinc-900: oklch(21% .006 285.885);
  --color-black: #000;
  --color-white: #fff;

  /* Bootstrap Overrides */

  --bs-primary-rgb: 8, 145, 178;

  --bs-gray-700: var(--color-zinc-700);
  --bs-gray-900: var(--color-zinc-800);
  --bs-gray-900-rgb: 24, 24, 27;
  --bs-dark-rgb: var(--bs-gray-900-rgb);

  --bs-green: var(--color-emerald-500);
  --bs-success-rgb: 16, 185, 129;

  --bs-font-sans-serif: "Berkeley Mono Variable", monospace;
  --bs-font-monospace: "Berkeley Mono Variable", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-heading-color: var(--color-zinc-800);
  --bs-body-color: var(--color-zinc-700);
  --bs-link-color: var(--color-cyan-600);
  --bs-code-color: var(--color-cyan-400);

  --bs-border-radius: 0;

  --bs-backdrop-opacity: 0.65;

  /* Consent Banner */
  --consent-border-radius: var(--bs-border-radius) !important;
  --consent-button-border-radius: var(--consent-border-radius) !important;
  
}

@font-face {
  font-family: "Berkeley Mono Variable";
  src: 
    url("fonts/BerkeleyMonoVariable.woff2") 
    format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.fill-zinc-700 {
  fill: var(--color-zinc-700);
}

.text-zinc-800 {
  color: var(--color-zinc-800);
}

.fill-amber-400 {
  fill: var(--color-amber-400);
}

.bg-zinc-50 {
  background-color: var(--color-zinc-50);
}
.bg-zinc-700 {
  background-color: var(--color-zinc-700);
}
.bg-zinc-900 {
  background-color: var(--color-zinc-900);
}

[data-consent-placement*="bottom"]{
  bottom: 5.25rem !important;
}

/* Alpine.js */

[x-cloak] { display: none !important; }

/* Body/Containers */

body {
  background-color: var(--color-zinc-100);
}
.container{
  max-width: 864px;
  margin: 0 auto;
}

.brand-icon{
  position: relative;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
/* .brand-icon::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  height: 100%;
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  background-size: cover;
  background-image: url(ios-icon-mask-border.svg);
  z-index: 2;
} */

.brand-icon svg{
  z-index: 1;
  height: 2.75rem;
}

/* .brand-icon svg{
  mask-image: url(ios-icon-mask.svg);
  mask-size: cover;
} */

/* Text */

.text-muted{
  color: var(--wmx-gray-dark) !important;
}

/* Custom Utilities */

.absolute-center{
  position: absolute;
  top: 50%; left: 50%; 
  transform: translate(-50%, -50%);
}
.aspect-1\:1{
  aspect-ratio: 1 / 1;
}
.bg-editor{
  background-color: #282c34;
}
.bg-gray-700{
  background-color: var(--bs-gray-700)
}
.bg-gray-900{
  background-color: var(--bs-gray-900)
}
.border-style-dashed {
  border-style: dashed;
}
.filter-invert\:1{
  filter: invert(1)
}
.focus\:none:focus,
.focus\:none:focus-within{
  box-shadow: none !important;
}
.fw\:800{
  font-weight: 800;
}
.hocus\:text-optimism:hover,
.hocus\:text-optimism:focus{
  color: var(--wmx-optimism) !important;
}

.hocus\:text-grape:hover,
.hocus\:text-grape:focus{
  color: var(--wmx-grape) !important;
}

.hover\:text-underline:hover{
  text-decoration: underline !important;
}

.resize-x{
  resize: horizontal;
}
.shadow-sm\:up{
  box-shadow: 0 -0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.smaller{
  font-size: 0.75em;
}
.transition\:color{
  transition: color 0.25s ease-in-out;
}
.w-1\/3{
  width: 33.33333%;
}
.w-2\/3{
  width: 66.66667%;
}

/* Inputs and Form Controls */

.form-control.font-monospace::placeholder{
  font-family: var(--bs-font-monospace);
  font-size: 0.9rem;
}
.input-group-text{
  /* min-width: 4.15rem; */
  justify-content: center;
  color: var(--color-zinc-700);
  background: var(--color-zinc-100);
}

.form-check-input:checked{
  background-color: var(--color-cyan-600);
  border-color: var(--color-cyan-600);
}

.bg-dark .form-control.bg-transparent{
  color: #fff;
}
.bg-dark .form-control.bg-transparent::placeholder{
  color: #ccc;
  opacity: 0.5;
  font-size: 1rem !important;
}
.bg-dark .form-control.bg-transparent:focus-within::placeholder{
  opacity: 1;
}

/* Badges */

.badge{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.25rem;
  font-size: 0.65em;
  padding: 0 0.65rem;
  height: 1.25rem;
}

/* Tooltips */

.tooltip{
  --bs-tooltip-bg: var(--color-zinc-800);
}

/* Icons */

.icon{
  height: 1.25rem;
  width: 1.25rem;
  flex-shrink: 0;
  fill: currentColor;
}

/* Buttons */

.btn{
  --bs-btn-font-weight: 500;
}

.btn-secondary{
  --bs-btn-bg: var(--color-amber-200);
  --bs-btn-color: var(--color-amber-800);
  --bs-btn-border-color: var(--color-amber-500);
  --bs-btn-hover-bg: var(--color-amber-300);
  --bs-btn-hover-color: var(--color-amber-900);
  --bs-btn-hover-border-color: var(--color-amber-600);
  --bs-btn-focus-shadow-rgb: 203, 235, 246;
  --bs-btn-active-bg: var(--color-amber-300);
  --bs-btn-active-color: var(--color-amber-900);
  --bs-btn-active-border-color: var(--color-amber-600);
}

.btn-primary{
  --bs-btn-bg: var(--color-zinc-700);
  --bs-btn-border-color: var(--color-zinc-800);
  --bs-btn-hover-bg: var(--color-zinc-800);
  --bs-btn-hover-border-color: var(--color-zinc-900);
  --bs-btn-focus-shadow-rgb: 155, 189, 212;
  --bs-btn-active-bg: var(--color-zinc-800);
  --bs-btn-active-border-color: var(--color-zinc-900);
}

.btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  height: 2.75rem;
  width: 2.75rem;
}

/* Code Highligting & Editors */

[data-testbench-console] [data-ace-editor]{
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
}
[data-ace-editor].is-loaded{
  opacity: 1;
}

.ace_search{
  padding: 1rem;
  border: 0;
  background: var(--bs-dark);
}

.ace_search,
.ace_search * {
  font-family: var(--bs-font-monospace);
  box-sizing: border-box;
}

.ace_search_form,
.ace_search_options{
  margin-right: 2.35rem;
}

.ace_search_form{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.ace_search_form.ace_nomatch{
  outline: none;
}

.ace_search_form.ace_nomatch .ace_search_field{
  background: #fef3c7;
  color: #92400e;
}

.ace_search_form > *{
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  line-height: 1;
  border: 0;
  height: 2.5rem;
}
.ace_search_field{
  border-right: 1px solid #E1E0E1;
}
.ace_searchbtn + .ace_searchbtn {
  border-left: 1px solid #E1E0E1;
}

.ace_search_options{
  padding-top: 0.25rem;
  margin-bottom: 0;
}

.ace_searchbtn_close{
  width: 1.5rem;
  height: 1.5rem;
  top: 1.45rem;
  right: 1rem;
  color: #fff;
  padding: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-x' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  background-size: cover !important;
  background-position: top center !important;
}
.ace_searchbtn_close:hover{
  background-position: bottom center !important;
}

.ace_button{
  border: 0;
  background: #fff;
  padding: 0.25rem 0.25rem 0.2rem;
  border-radius: 3px;
  line-height: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  min-width: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.ace_button.checked{
  background: var(--wmx-optimism);
  color: var(--wmx-midnight-oil);
}

.ace_search_counter{
  padding-left: 0;
  margin-top: 3px;
  color: #fff;
}
.ace_selected-word{
  position: relative;
  outline: 2px solid var(--wmx-optimism);
}
.ace_selected-word::after{
  content: '';
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(var(--wmx-optimism-rgb), 0.1);
}

.ace_editor{
  font-family: var(--bs-font-monospace) !important;
  font-size: 0.9rem !important;
}
.ace_variable{
  color: var(--color-cyan-400) !important;
}
.ace_string{
  color: var(--color-amber-300) !important;
}
.ace_boolean{
  color: var(--color-purple-400) !important;
}

.ace_line .ace_fold{
  /* padding: 2px !important; */
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-color: var(--color-cyan-600) !important;
  border: 0 !important;
  height: 1rem !important;
  width: 1.75rem !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M1.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L2.707 7.5h10.586l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L13.293 8.5H2.707l1.147 1.146a.5.5 0 0 1-.708.708z'/%3E%3C/svg%3E") !important;
}

.ace_gutter-cell.ace_error, .ace_icon.ace_error, .ace_icon.ace_error_fold{
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E") !important; */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E") !important;
}

/* Animations */

.animate\:pulse{
  animation: pulse 0.5s alternate;
  animation-iteration-count: 2;
}

@keyframes pulse {
  from {
    box-shadow: 0 0 0.25rem -0.25rem rgba(var(--wmx-optimism-rgb), 0.2);
  }
  to {
    box-shadow: 0 0 0.25rem 0.25rem rgba(var(--wmx-optimism-rgb), 0.2);
  }
}

[data-testbench-html]{
  container-type: inline-size;
  container-name: testbench-html;
}

[data-testbench-controls]{
  flex-wrap: wrap;
}

[data-testbench-controls] h1{
  min-height: 2.75rem;
}

[data-testbench-controls] > *{
  flex-basis: 100%;
}

[data-testbench-actions] {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

[data-testbench-html] footer a{
  text-decoration: none;
  color: var(--wmx-sapphire);
}

@container testbench-html (min-width: 1100px) {
  [data-testbench-controls] {
    flex-wrap: nowrap;
  }
  [data-testbench-controls] h1{
    margin-right: 2rem;
  }
  [data-testbench-controls] > *{
    flex-basis: auto;
  }
  [data-testbench-actions] {
    position: static;
    top: auto;
    right: auto;
  }
  .input-group-text{
    min-width: auto;
    justify-content: flex-start;
  }
  [name="config"]{
    width: 10rem !important;
  }
  [name="container_id"]{
    width: 7rem !important;
  }
}