/* Variable Overrides */

:root{

  /* Primary */
  --wmx-discovery: #072D56;
  --wmx-midnight-oil: #002244;
  --wmx-daydream: #009FD4;
  --wmx-optimism: #46B756;
  --wmx-optimism-rgb: 70, 183, 86;
  
  /* Secondary */
  --wmx-blank-slate: #2E536C;
  --wmx-light-blue: #c9ebf6;
  --wmx-light-blue-hover: #A8DEF0;
  --wmx-sapphire: #1178A7;
  --wmx-sapphire-rgb: 17, 120, 167;
  --wmx-rose: #E0516C;
  --wmx-teal: #07B2AA;
  --wmx-grape: #884F9C;

  /* Neutral */
  --wmx-gray-light: #F4F2ED;
  --wmx-gray-dark: #5E6468;

  /* Bootstrap Overrides */

  --bs-primary-rgb: var(--wmx-sapphire-rgb);
  
  
  --bs-gray-700: #282c34;
  --bs-gray-900: #1B1D23;
  --bs-gray-900-rgb: 27, 29, 35;
  --bs-dark-rgb: var(--bs-gray-900-rgb);

  --bs-green: var(--wmx-optimism);
  --bs-success-rgb: var(--wmx-optimism-rgb);

  --bs-font-sans-serif: proxima-nova, sans-serif;
  --bs-font-monospace: fira-code, monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --bs-heading-color: var(--wmx-discovery);
  --bs-body-color: var(--wmx-blank-slate);
  --bs-link-color: var(--wmx-daydream);
  --bs-code-color: var(--wmx-optimism);

  --bs-backdrop-opacity: 0.65;
  
}

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

/* Alpine.js */

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

/* Body/Containers */

body {
  background-color: #F4F2ED;
}
.container{
  max-width: 864px;
  margin: 0 auto;
}

.brand-icon{
  height: 2.75rem;
}

.brand-icon{
  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(--wmx-discovery);
  background: var(--wmx-gray-light);
}

.form-check-input:checked{
  background-color: var(--wmx-blank-slate);
  border-color: var(--wmx-blank-slate);
}

.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(--wmx-midnight-oil);
}

/* 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(--wmx-light-blue);
  --bs-btn-color: var(--wmx-discovery);
  --bs-btn-border-color: #96D8ED;
  --bs-btn-hover-bg: var(--wmx-light-blue-hover);
  --bs-btn-hover-color: var(--wmx-discovery);
  --bs-btn-hover-border-color: #73CCE7;
  --bs-btn-focus-shadow-rgb: 203, 235, 246;
  --bs-btn-active-bg: var(--wmx-light-blue-hover);
  --bs-btn-active-color: var(--wmx-discovery);
  --bs-btn-active-border-color: var(--wmx-light-blue-hover);
}

.btn-primary{
  --bs-btn-bg: var(--wmx-blank-slate);
  --bs-btn-border-color: var(--wmx-discovery);
  --bs-btn-hover-bg: var(--wmx-discovery);
  --bs-btn-hover-border-color: var(--wmx-midnight-oil);
  --bs-btn-focus-shadow-rgb: 155, 189, 212;
  --bs-btn-active-bg: var(--wmx-midnight-oil);
  --bs-btn-active-border-color: var(--wmx-midnight-oil);
}

.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: #76d9e6 !important;
}
.ace_string{
  color: #e6d06c !important;
}
.ace_boolean{
  color: #a77afe !important;
}

.ace_line .ace_fold{
  /* padding: 2px !important; */
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
  background-color: #0284c7 !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;
  }
}