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

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/

.input {
  @apply block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm;

  .dark & {
    @apply bg-white/5 text-white placeholder-gray-500 border-white/5 focus:border-indigo-500 focus:ring-indigo-500;
  }
}

.input--large {
  @apply px-4 py-2 text-base;
}

.input.input--error {
  @apply border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500;
}

.button {
  @apply flex w-full justify-center rounded-md border border-transparent bg-primary py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 cursor-pointer;
}

.cta {
  @apply border border-primary bg-primary hover:bg-primary/90 text-white text-center text-lg md:text-xl inline-block font-medium py-2.5 px-5 md:py-4 md:px-8 rounded-lg md:rounded-xl transition-colors;

  .dark & {
    @apply bg-indigo-600 hover:bg-indigo-600/90;
  }
}

.cta--outline {
  @apply border-primary text-primary !bg-transparent border;

  .dark & {
    @apply border-white text-white;
  }
}

.cta--small {
  @apply text-base rounded-lg md:text-lg py-1.5 px-4 md:py-2.5 md:px-6;
}

.cta--tiny {
  @apply rounded-lg text-white py-1.5 md:py-2.5 px-4 -ml-2 font-normal text-sm;
}

.button--inline {
  @apply inline-flex items-center w-auto;
}

.button.button--outline {
  @apply border-primary text-primary !bg-transparent border;

  .dark & {
    @apply border-white text-white;
  }
}

.button.button--secondary {
  @apply bg-white text-indigo-700 hover:text-indigo-900;
}

.button.button--large {
  @apply py-2 px-6 text-base;
}

.button[disabled] {
  @apply opacity-75 cursor-not-allowed;
}

.label {
  @apply block text-sm font-medium text-gray-700;
}

.navlink {
  @apply relative py-2 text-sm md:text-base;
}
.navlink::after {
  position: absolute;
  bottom: 0;
  content: '';
  display: block;
  width: 0;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  transition: width 0.3s;
}

.navlink:hover::after {
  width: 100%;
}

.Carousel-1 {
  animation: carousel1 500s linear infinite;
}
.Carousel-2 {
  animation: carousel2 500s linear infinite;
}

.Carousel-1--slow,
.Carousel-2--slow {
  animation-play-state: paused;
}

@keyframes carousel1 {
  0% {
    transform: translateX(-800%);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-800%);
  }
}

@keyframes carousel2 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-800%);
  }
  100% {
    transform: translateX(0);
  }
}

.enterAnimation {
  opacity: 0;
  transform: translateY(16px) translateZ(0) scale(0.99);
}
.enterAnimation--end {
  transition:
    opacity 0.7s ease-out,
    transform 0.6s ease-out;
  opacity: 1;
  transform: translateY(0) translateZ(0) scale(1);
}

.BlogPost {
  @apply max-w-2xl mx-auto text-lg;
  h1 {
    @apply mt-8 mb-4 font-bold font-sans;
  }
  p {
    @apply mb-3;
  }
  p.introduction {
    @apply text-xl leading-relaxed;
  }
  h2 {
    @apply text-2xl font-bold mb-2 mt-8;
  }
  ul {
    @apply list-disc pl-6;
  }
  ol {
    @apply list-decimal pl-6;
  }
  h3 {
    @apply text-xl font-semibold mb-2 mt-6;
  }
  pre {
    @apply bg-orange-50 text-gray-900 p-4 rounded-lg whitespace-pre-wrap my-6 text-base;
  }
}

.TabLink {
  @apply border-transparent;

  &--active {
    @apply border-b lg:border-b-2 border-primary dark:border-white;
  }
}

.grow-wrap {
  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
  display: grid;
}
.grow-wrap::after {
  /* Note the weird space! Needed to preventy jumpy behavior */
  content: attr(data-replicated-value) ' ';

  /* This is how textarea text behaves */
  white-space: pre-wrap;

  /* Hidden from view, clicks, and screen readers */
  visibility: hidden;
}
.grow-wrap > textarea {
  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
  resize: none;

  /* Firefox shows scrollbar on growth, you can hide like this. */
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  /* Identical styling required!! */
  padding: 0.5rem;
  font-size: 1.15rem;

  /* Place on top of each other */
  grid-area: 1 / 1 / 2 / 2;
}

.logo-container {
  position: relative;
  overflow: hidden;
  height: 48px;
  min-width: 96px;
}

.logo-container img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Center the image */
  margin: auto;
  height: 100%;
  width: 100%;
  object-fit: contain;

  /* Ensure the image is not visible by default */
}

/* All logos transition their transform and opacity */
.LogoItem {
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
  display: block;
}

/* The hidden logo starts below (translateY(100%)) and invisible */
.LogoItem--hidden {
  transform: translateY(100%);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Slide-out animation: move upward and fade out */
.slide-out {
  transform: translateY(-100%);
  opacity: 0;
}

/* Slide-in animation: move into place from below and become visible */
.slide-in {
  transform: translateY(0);
  opacity: 1;
}
/* A 11 Y Light | https://highlightjs.org/static/demo/ */
/* .hljs {
  background: #fefefe;
  color: #545454;
} */
.hljs-comment,
.hljs-quote {
  color: #696969;
}
.hljs-deletion,
.hljs-name,
.hljs-regexp,
.hljs-selector-class,
.hljs-selector-id,
.hljs-tag,
.hljs-template-variable,
.hljs-variable {
  color: #d91e18;
}
.hljs-attribute,
.hljs-built_in,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-type {
  color: #e68004;
}
.hljs-addition,
.hljs-bullet,
.hljs-string,
.hljs-symbol {
  color: green;
}
.hljs-section,
.hljs-title {
  color: #007faa;
}
.hljs-keyword,
.hljs-selector-tag {
  color: #7928a1;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}
@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-quote,
  .hljs-string,
  .hljs-symbol,
  .hljs-type {
    color: highlight;
  }
  .hljs-keyword,
  .hljs-selector-tag {
    font-weight: 700;
  }
}

.dark {
  /* A 11 Y Dark | https://highlightjs.org/static/demo/ */
  /* .hljs {
    background: #2b2b2b;
    color: #f8f8f2;
  } */
  .hljs-comment,
  .hljs-quote {
    color: #d4d0ab;
  }
  .hljs-deletion,
  .hljs-name,
  .hljs-regexp,
  .hljs-selector-class,
  .hljs-selector-id,
  .hljs-tag,
  .hljs-template-variable,
  .hljs-variable {
    color: #ffa07a;
  }
  .hljs-built_in,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-type {
    color: #f5ab35;
  }
  .hljs-attribute {
    color: gold;
  }
  .hljs-addition,
  .hljs-bullet,
  .hljs-string,
  .hljs-symbol {
    color: #abe338;
  }
  .hljs-section,
  .hljs-title {
    color: #00e0e0;
  }
  .hljs-keyword,
  .hljs-selector-tag {
    color: #dcc6e0;
  }
  .hljs-emphasis {
    font-style: italic;
  }
  .hljs-strong {
    font-weight: 700;
  }
  @media screen and (-ms-high-contrast: active) {
    .hljs-addition,
    .hljs-attribute,
    .hljs-built_in,
    .hljs-bullet,
    .hljs-comment,
    .hljs-link,
    .hljs-literal,
    .hljs-meta,
    .hljs-number,
    .hljs-params,
    .hljs-quote,
    .hljs-string,
    .hljs-symbol,
    .hljs-type {
      color: highlight;
    }
    .hljs-keyword,
    .hljs-selector-tag {
      font-weight: 700;
    }
  }
}
.MarkdownBlock {
  a {
    @apply text-primary;
    text-decoration: underline;

    .dark & {
      @apply text-blue-400;
    }
  }

  h1,
  h2,
  h3,
  h4 {
    font-weight: 600;
  }

  p,
  ul,
  ol,
  pre,
  code,
  blockquote {
    margin-bottom: 16px;
  }

  p:last-child {
    margin-bottom: 0;
  }

  h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 500;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 1.125rem;
    margin-bottom: 0.66rem;
  }

  h3 {
    font-size: 1rem;
    margin-bottom: 0.33rem;
  }

  h4 {
    margin-bottom: 2px;
  }

  strong {
    font-weight: 500;
  }

  code {
    @apply bg-white dark:bg-[rgba(19,20,24,0.93)] border dark:border-gray-600;
    font-family: monospace;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 4px;
  }

  pre {
    @apply bg-white dark:bg-[rgba(19,20,24,0.93)] border dark:border-gray-600;
    font-family: monospace;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: 4px;
    overflow-x: auto;
    position: relative;

    code {
      background: transparent;
      border: none;
      font-family: monospace;
      font-size: 14px;
      padding: 0;
      border-radius: 0;
    }
  }

  hr {
    margin: 1rem 0;
  }

  em {
    font-style: italic;
  }

  ol {
    list-style: decimal;
    padding-left: 20px;
  }

  ul {
    list-style: disc;
    padding-left: 20px;
  }

  table {
    font-size: 13px;
    margin-bottom: 16px;
    border-collapse: collapse;
  }

  table td,
  table th {
    @apply border;
    padding: 4px 8px;
    background: transparent !important;
  }

  table thead th {
    font-weight: 600;
    text-align: left;
  }

  math[display='block'] {
    margin: 2rem 0 1.5rem 0;
  }

  br + .katex {
    display: inline-block;
    margin: 0.5rem 0;
  }
  p + .katex {
    display: inline-block;
    margin-bottom: 1rem;
  }
}
/*
 * 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.
 *


 */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital@0;1&display=swap');

.sortable th {
  cursor: pointer;
}
.sortable th.no-sort {
  pointer-events: none;
}
.sortable th::after,
.sortable th::before {
  transition: color 0.1s ease-in-out;
  font-size: 1.2em;
  color: transparent;
}
.sortable th::after {
  margin-left: 3px;
  content: '▸';
}
.sortable th:hover::after {
  color: inherit;
}
.sortable th.dir-d::after {
  color: inherit;
  content: '▾';
}
.sortable th.dir-u::after {
  color: inherit;
  content: '▴';
}
.sortable th.indicator-left::after {
  content: '';
}
.sortable th.indicator-left::before {
  margin-right: 3px;
  content: '▸';
}
.sortable th.indicator-left:hover::before {
  color: inherit;
}
.sortable th.indicator-left.dir-d::before {
  color: inherit;
  content: '▾';
}
.sortable th.indicator-left.dir-u::before {
  color: inherit;
  content: '▴';
}

.tilt-hover {
  perspective: 800px;
  transform-style: preserve-3d;
}

.tilt-hover svg {
  transform-origin: center;
  transition: transform 0.1s ease;
}

.strike-price {
  text-decoration: none;
  position: relative;
}
.strike-price::before {
  top: 50%; /*tweak this to adjust the vertical position if it's off a bit due to your font family */
  background: red; /*this is the color of the line*/
  opacity: 0.6;
  content: '';
  width: 110%;
  position: absolute;
  height: 0.25rem;
  border-radius: 0.1rem;
  left: -5%;
  white-space: nowrap;
  display: block;
  transform: rotate(-12deg);
}

.AnimatedGradient {
  background: linear-gradient(-45deg, #4f46e5, #ac66a7, #4f46e5);
  border: transparent;
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}