/**
 * Handwritten CSS
 *
 * Styles here should be minimal; most of the stuff should go into
 * `build-tools/heroku/tailwind/styles.css` (and then run `build-tools/heroku/tailwind/generate-development-css` to regenerate
 * the generated css file).
 */

#output {
  white-space: pre-wrap;
}

.code-teacher {
  background-color: #dddddd;
  color: #000000;
  padding: 0.25rem;
  font-family: monospace;
  border-radius: 0.25rem;
}

.command-highlighted {
  background-color: #272822;
  color: #ff6188;
  padding: 0.25rem;
  font-family: monospace;
  border-radius: 0.25rem;
}

/* #868 hide ace's default mobile context menu until there is configuration to remove it */
.ace_mobile-menu {
  display: none;
}

input:checked ~ .dot {
  transform: translateX(100%);
  background-color: #48bb78;
}

#confetti{
  width: 100%;
  position: absolute;
  height: auto;
  top: 20%;
  left: 30%;
}

#repair_button:hover{
  content: url('../images/Hedylightbulb_2.svg');
}

/*Media Queries*/
@media only screen and (max-width: 1280px) {
  #repair_button{
    margin-left: 12rem !important;
  }
}

/*
https://github.com/ajaxorg/ace/issues/1104
Force the gutter to be smaller, looks better from 1-999 lines (probably all of our programs)
*/
#editor .ace_gutter {
    width: 32px !important;
}

body[dir='ltr'] #editor .ace_gutter {
    margin-right: auto;
    left: 0;
}

body[dir='rtl'] #editor .ace_gutter {
    margin-left: auto;
    right: 0;
}

body[dir='ltr'] #editor .ace_scroller {
    left: 32px !important;
    right: 0px !important;
}

body[dir='rtl'] #editor .ace_scroller {
    left: 0px !important;
    right: 32px !important;
}

/**
 * This solves the Ace editor's background initially being white on Safari (until you click it)
 *
 * Not quite sure why, but it seems to help.
 */
.ace_scroller {
    background-color: transparent !important;
}

#editor .ace_layer .ace_gutter-layer {
    width: 32px !important;
}

body[dir='ltr'] #editor .ace_gutter-layer > * {
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 2px;
    padding-right: 0px;
    text-align: left;
}

body[dir='rtl'] #editor .ace_gutter-layer > * {
    margin-left: 0px;
    margin-right: 2px;
    padding-left: 0px;
    padding-right: 2px;
    text-align: right;
}

.ace_gutter-cell.ace_breakpoint {
    visibility: hidden;
}

.ace_gutter-cell.ace_breakpoint::after {
    visibility: visible;
    border-radius: 14px 14px 14px 14px;
    width: 21px;
    content: "😴";
    z-index: 3;
    position: absolute;
    left: 0;
}

.ace_layer.ace_gutter-layer.ace_folding-enabled {
    width: 36px !important;
}

.ace-disabled {
    text-decoration: line-through;
}

.debugLine {
    position: absolute;
    background: #2D6099;
    z-index: 20
}

/* #grid-table td,
#grid-table th {
  width: 100px;
} */

/* Set the height of each row */
/* #grid-table tr {
  height: 50px;
} */

/* Remove any default padding and margin from the table */
/* #grid-table,
#grid-table td,
#grid-table th {
  padding: 0;
  margin: 0;
  border-collapse: collapse;
} */

/* Add some padding and a border to the table cells */
/* #grid-table td,
#grid-table th {
  padding: 8px;
  border: 1px solid #ddd;
} */

/* Add some background color to the header row */
/* #grid-table {
  width: 100%;
} */

.student_adventure_checkbox::before  {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.checkbox-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-wrapper {
  position: absolute;
  bottom: 1px;
  right: 3px;
}

div[data-te-input-notch-ref] {
  border-radius: 0.25rem;
  border: 1px rgb(104 211 145 / var(--tw-border-opacity))  solid;
}

.group[data-te-input-focused] {
  box-sizing: content-box;
  border-radius: 0.25rem;
  border: 2px black solid;
}

.group[data-te-input-focused] > * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 400px));
  grid-gap: 1.5rem;
  justify-content: center;
}

.current {
  font-weight: bold;
  background-color: #edf2f7;
}

.option {
  padding: 8px;
  cursor: pointer;
  
  &.selected {
    background-color: rgb(0 0 0 / 0.05);
  }

  &:not(.default).selected::after {
    content: "✓";
    margin: 1em;
  }

  &:hover {
    background-color: rgb(0 0 0 / 0.05);
  }
  
}

.ck-balloon-panel {
  display: none !important;
}


.ck-editor, .ck-editor__editable {
    min-height: 24rem;
    width: 100% !important;
}
.ck-toolbar__items, .ck-editor__editable {
    background-color: var(--tw-bg-gray-200) !important;
}

.ck-editor pre code {
  background-color: unset !important;
  color: var(--tw-bg-gray-300);
}

.ck-editor[dir=rtl] pre code {
  text-align: right;
}

.ck-editor[dir=rtl] pre[data-language]:after {
  left: 10px;
  right: unset !important;
}

.ck-editor {
  & ol, ul {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

kbd {
    display: inline-block;
    background: #f5f5f5;
    border: solid 1px #b5c6d2;
    border-bottom-color: #97afbf;
    box-shadow: inset 0 -1px 0 #97afbf;
    font-size: .8em;
    padding: 0.25em 0.5em;
    line-height: 1em;
    vertical-align: middle;
    border-radius: 3px;
}

.teacher-adv pre {
  max-height: 22rem;
  overflow-y: scroll;
}

.answer-block {
  pre {
    text-align: start;
  } 
}


#loading_spinner {
  border: 16px solid #f7f7f7;
  border-top: 16px solid #2977ff;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  z-index: 101;
  animation: spin 2s linear infinite;
  position: fixed;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading_mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
}

.teacher-table-shell {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.teacher-table {
  width: 100%;
  border-collapse: collapse;
}

.teacher-table-head {
  background-color: #edf2f7;
}

.teacher-table-head .teacher-table-th {
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

@media (min-width: 640px) {
  .teacher-table-head .teacher-table-th {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.teacher-table-head tr {
  border-bottom: 1px solid #cbd5e0;
}

.teacher-table-body {
  background-color: #ffffff;
}

.teacher-table-body tr + tr {
  border-top: 1px solid #edf2f7;
}

.teacher-table-td {
  padding: 0.75rem 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .teacher-table-td {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.teacher-menu-button {
  padding: 0.375rem;
  display: flex;
  justify-content: center;
  border-radius: 9999px;
}

.teacher-context-menu {
  z-index: 30;
  width: 14rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.teacher-context-menu-item {
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  color: #2c5282;
  transition: background-color 100ms ease-in;
}

.teacher-context-menu-item:hover {
  background-color: #edf2f7;
}

.teacher-context-menu-item:active {
  background-color: #cbd5e0;
}

.teacher-context-menu-item-danger,
.teacher-context-menu-item-danger span,
.teacher-context-menu-item-danger i {
  color: #c53030;
}


/* ---------------------------------------------------------------------------
   Editor explanation panel (adventure content / solution tabs)

   The glyphs in this panel illustrate CKEditor toolbar buttons; they are not
   controls. Teachers reported pressing them instead of the real toolbar
   buttons, so they deliberately carry no button chrome: no background, no
   border, no hover fill, no focus ring. Hovering or clicking one highlights
   the matching toolbar button instead of doing anything to the content.
   --------------------------------------------------------------------------- */

.hedy-tool-hint {
  margin: 0.75rem 0;
}

.hedy-tool-glyph {
  display: inline-flex;
  vertical-align: -0.15em;
  margin-inline-end: 0.35em;
  cursor: help;
}

.hedy-tool-glyph svg {
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
}

/* Spotlight applied to the real toolbar button while its glyph is hovered or
   was just clicked. Deliberately not one of CKEditor's own state classes, so
   it never reads as "this tool is currently on". */
.hedy-tool-spotlight {
  position: relative;
  outline: 2px solid #2b6cb0;
  outline-offset: 1px;
  border-radius: var(--ck-border-radius, 2px);
  animation: hedy-tool-pulse 0.6s ease-out 2;
}

@keyframes hedy-tool-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 108, 176, 0.5); }
  100% { box-shadow: 0 0 0 6px rgba(43, 108, 176, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hedy-tool-spotlight {
    animation: none;
  }
}