/* Overrides for Tailwind & others */
@import url('overrides.css');

/* Useful modules */
@import url('utilities.css');
@import url('modals.css');

/* Prism styles */
@import url('prism-light-theme.css');
@import url('prism-dark-theme.css');

/* Custom styles for individual pages */
@import url('pages/affiliate-link-page.css');
@import url('pages/code-walkthrough-page.css');
@import url('pages/course-stage-solution-page.css');

body {
  font-family: Montserrat, sans-serif; /* Required for fonts to work on Percy */
}

.ember-basic-dropdown-trigger {
  outline: none !important;
}

.ember-basic-dropdown-content {
  background: none !important;
}

.top-to-bottom-scroll-mask {
  background: linear-gradient(to bottom, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 100%) 20%, rgb(255 255 255 / 0%) 100%);
  mix-blend-mode: lighten;
}

.bottom-to-top-scroll-mask {
  background: linear-gradient(to top, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 100%) 20%, rgb(255 255 255 / 0%) 100%);
  mix-blend-mode: lighten;
}

.copyable-code .border-text-mask {
  background: linear-gradient(to left, rgb(241 245 249 / 100%) 0%, rgb(241 245 249 / 100%) 20%, rgb(241 245 249 / 0%) 100%);
}

@keyframes progress-donut {
  from {
    stroke-dashoffset: 56.55;
  }

  to {
    stroke-dashoffset: var(--target-offset);
  }
}

.progress-donut-circle {
  stroke-dasharray: 56.55 56.55;
  stroke-dashoffset: 56.55;
  animation: progress-donut 400ms ease-out forwards;
}

.top-50-percent {
  top: 50%;
}

.prose code {
  overflow-wrap: break-word;
  text-wrap: auto;
}

.prose pre code {
  white-space: pre;
}

.vertical-mask {
  background: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 0%) 30%,
    rgb(255 255 255 / 100%) 80%,
    rgb(255 255 255 / 100%) 100%
  );
}

.dark\:vertical-mask-invert:is(.dark *) {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 100%) 80%, rgb(0 0 0 / 100%) 100%);
}

.dark\:vertical-mask-gray-900:is(.dark *) {
  background: linear-gradient(to bottom, rgb(15 23 42 / 0%) 0%, rgb(15 23 42 / 0%) 30%, rgb(15 23 42 / 100%) 80%, rgb(15 23 42 / 100%) 100%);
}

.dark\:vertical-mask-gray-800:is(.dark *) {
  background: linear-gradient(to bottom, rgb(30 41 59 / 0%) 0%, rgb(30 41 59 / 0%) 30%, rgb(30 41 59 / 100%) 80%, rgb(30 41 59 / 100%) 100%);
}

.dark\:vertical-mask-gray-850:is(.dark *) {
  background: linear-gradient(to bottom, rgb(23 32 51 / 0%) 0%, rgb(23 32 51 / 0%) 30%, rgb(23 32 51 / 100%) 80%, rgb(23 32 51 / 100%) 100%);
}

.syntax-highlighted-code pre {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  overflow-x: scroll;
  white-space: pre;
}

.syntax-highlighted-code pre code {
  min-width: 100%;
}

.syntax-highlighted-code.with-line-numbers pre code {
  counter-reset: step;
  counter-increment: step 0;
}

.syntax-highlighted-code.with-line-numbers pre code .line::before {
  content: counter(step);
  counter-increment: step;
  width: 1rem;
  margin-right: 1rem;
  display: inline-block;
  text-align: right;
  color: #94a3b8;
  font-size: 0.875em;
}

.syntax-highlighted-code pre code .line {
  padding-left: 1rem;
  padding-right: 1rem;
}

.syntax-highlighted-code pre code .line.highlighted {
  background-color: rgb(255 255 255 / 10%);
}

.code-walkthrough-prose h1 {
  margin-top: 1em !important;
}

.diff-highlight .removed-marker {
  color: rgb(186 0 103);
}

.diff-highlight .inserted-marker {
  color: #690;
}

.diff-highlight .removed-line {
  background-color: rgb(255 0 0 / 10%);
  user-select: none;
}

.dark .diff-highlight .removed-line {
  background-color: rgb(255 0 0 / 15%);
}

.diff-highlight .added-line {
  background-color: rgb(0 255 0 / 15%);
}

.number-input-with-no-controls::-webkit-outer-spin-button,
.number-input-with-no-controls::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.number-input-with-no-controls {
  appearance: textfield;
}

.blurred-overlay {
  filter: blur(4px);
}

.badge-earned-modal-prose b {
  /* medium */
  font-weight: 500;
}

.markdown-list ul {
  list-style-type: disc;
  padding-left: 1.5em;
}

.metabase-iframe {
  margin-left: -1rem;
  margin-right: -1rem;
}

@media screen and (width >= 80em) {
  .metabase-iframe {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
}

.has-prism-highlighting pre[class*='language-'] {
  background-color: #f1f5f9; /* slate-100 */
}

/* Override prism's 1em font-size */
.prose pre[class*='language-'] {
  font-size: 0.875em !important;
}

.prose.prose-sm pre[class*='language-'] {
  font-size: 1em !important;
}

.has-prism-highlighting pre[class*='language-']:is(.dark *) {
  background-color: #1e293b; /* slate-800 */
}

.sortable-item {
  transition: all 0.06s;
}

.sortable-item.is-dragging {
  transition-duration: 0s;
  z-index: 10;
}

.sortable-item.is-dragging .highlight-while-dragging {
  background: #f8fafc;
}

.sortable-item.is-dropping .highlight-while-dragging {
  background: #f1f5f9;
  z-index: 10;
}

.ember-tooltip,
.ember-popover {
  z-index: 1000;
}

.ember-popover {
  background: #3a3c47;
  color: #fff;
  padding: 6px 10px;
  border: none;
  max-width: 200px; /* match tooltip for now */
}

.ember-popover[x-placement^='top'] .ember-popover-arrow {
  border-top-color: #3a3c47;
}

.ember-popover[x-placement^='right'] .ember-popover-arrow {
  border-right-color: #3a3c47;
}

.ember-popover[x-placement^='bottom'] .ember-popover-arrow {
  border-bottom-color: #3a3c47;
}

.ember-popover[x-placement^='left'] .ember-popover-arrow {
  border-left-color: #3a3c47;
}
