@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  h1 {
    @apply text-center font-bold font-heading text-4xl;
  }

  a, .a {
    @apply underline underline-offset-4	decoration-2 decoration-makers-turquoise hover:decoration-makers-turquoise-light;
  }

  .btn {
    @apply px-3 py-2 hover:cursor-pointer;
  }
  .btn-primary {
    @apply text-white bg-sky-700 hover:bg-sky-800 transition rounded-none no-underline;
  }
  pre.mermaid-copy button.copy-button {
    @apply fill-slate-800 dark:fill-slate-800 bg-transparent top-0 right-0 absolute p-1 hover:cursor-pointer;
  }
  .copy-button {
    @apply fill-white dark:fill-white bg-transparent top-0 right-0 absolute p-1 hover:cursor-pointer;
    background-color: #1e1e1e;
  }
  .coach-annotation, .coach-readme {
    @apply border-4 border-teal-400 bg-transparent; 
  }
  .sliderButton:focus + .slider, .sliderButton:focus ~ .icon {
    @apply ring-2 ring-blue-500 ring-offset-2;
  }
  .field:has(.field_with_errors input[type="checkbox"]) {
    @apply flex flex-row gap-x-1.5;
  }
  .icon {
    @apply h-[24px] w-[24px];
  }
  
  .collapsible-trigger {
    @apply text-xl font-bold cursor-pointer pr-4 relative flex;
  }

  .collapsible-trigger::before {
    /* Expand icon SVG */
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
    @apply h-[24px] w-[24px] block mt-[2px] mr-[0.2rem];
  }

  .collapsible-trigger[aria-expanded="true"]::before {
    /*  Collapse icon SVG */
    content: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
    @apply mt-0;
  }

  .dark .collapsible-trigger::before {
    /* Expand/collapse icon white in darkmode */
    @apply invert;
  }

  .correct-quiz-feedback {
    @apply text-lime-700 dark:text-lime-500 fill-lime-700 dark:fill-lime-500;
  }
  .incorrect-quiz-feedback {
    @apply text-pink-600 dark:text-pink-400 fill-pink-600 dark:fill-pink-400;
  }

  .partially-correct-quiz-feedback {
    @apply text-amber-600 dark:text-amber-400;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


*/
html, body {
  scroll-padding-top: 100px;
}
@font-face {
  font-family: "Gotham";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/Gotham-Book-93400536159b8e136a1d405d569bf104fae960ebb4748a33a653c5a0b714ede1.otf);
}

@font-face {
  font-family: "Gotham Bold";
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url(/assets/Gotham-Bold-bbbc8e1a351211f623c37600a0eba8c7783902c247b359e5b611942e708ee273.otf);
}

.prose pre {
  position: relative;
  overflow: auto;
  margin: 5px 0;
  padding:1em;
  border-radius: 10px;
  background-color: #1e1e1e;
  max-width:80vw;
}

.prose pre button:hover, summary {
  cursor: pointer;
}

#error_explanation {
  background-color: #ffcbcb;
  border-radius: 5px;
  padding: 1rem;
}

#error_explanation h2 {
  font-weight: bold;
}

#error_explanation ul {
  list-style: unset;
  margin-left: 2rem;
}

.cci-understand:after,
.cci-dont_understand:after,
.cci-missing:after {
  content: "";
  width: 15px;
  height: 15px;
  display: block;
  margin: 0 auto;
  border-radius: 30px;
}

.cci-dont_understand,
.cci-na,
.cci-missing {
  border-right: 0px solid #e7e5e4;
}

.cci-understand:after {
  background: #86EFAC;
}

.cci-dont_understand:after {
  background: #FDE68A;
}

.recent.cci-understand:after {
  border: 2px solid #47895f;
}

.recent.cci-dont_understand:after {
  border: 2px solid #8e7f43;
}

.dark .cci-understand:after {
  background: #359859;
}

.dark .cci-dont_understand:after {
  background: #C5AC48
}

.dark .recent.cci-understand:after {
  background: #86EFAC;
  border: none;
}

.dark .recent.cci-dont_understand:after {
  background: #FFE57E;
  border: none;
}

.dark .disclosure-trigger::before {
  border-top-color: var(--tw-prose-body);
}

.cci-missing:after {
  background: #f2f2f2;
}

.dark .cci-missing:after {
  background: #404040;
}

.tippy-content {
  white-space: pre-line;
}

.dark .tippy-box {
  background-color: #fafafa;
  color: black;
}
.dark .tippy-arrow {
  color: #fafafa;
}

.dark textarea {
  background-color: #f5f5f5;
  color: black;
}

label[required]::after {
  content: ' *';
  color: red;
}

/* These rules target tables in markdown for accessiblity when operating at zoom level of 400% */
.prose table {
  overflow-x: auto;
  max-width: 70vw;
  display: block;
}