/*
 * Copyright (c) Facebook, Inc. and its affiliates.
 */

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

@layer base {
  @font-face {
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Source-Code-Pro-Regular.woff2') format('woff2');
  }

  /* Latin */

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_MdIt.woff2')
      format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_SBd.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_SBdIt.woff2')
      format('woff2');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_W_BdIt.woff2')
      format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_Rg.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_It.woff2')
      format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_MdIt.woff2')
      format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_W_BdIt.woff2')
      format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }

  /* Arabic */

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_SBd.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Arbc_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Rg.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Arbc_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF;
  }

  /* Cyrillic */

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_SBd.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Cyrl_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Rg.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Cyrl_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0400-045F, U+2116;
  }

  /* Devanagari */

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_SBd.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Deva_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Rg.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Deva_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
      U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
  }

  /* Vietnamese */

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_SBd.woff2')
      format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  @font-face {
    font-family: 'Optimistic Display';
    src: url('https://react.dev/fonts/Optimistic_Display_Viet_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Rg.woff2')
      format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Md.woff2')
      format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  @font-face {
    font-family: 'Optimistic Text';
    src: url('https://react.dev/fonts/Optimistic_Text_Viet_W_Bd.woff2')
      format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
  }

  /* Write your own custom base styles here */
  html {
    color-scheme: light;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
  }

  html.dark {
    color-scheme: dark;
  }

  html .dark-image {
    display: none;
  }

  html .light-image {
    display: block;
  }

  html.dark .dark-image {
    display: block;
  }

  html.dark .light-image {
    display: none;
  }

  /* Hide all content that's relevant only to a specific platform */
  html.platform-mac [data-platform='win'] {
    display: none;
  }

  html.platform-win [data-platform='mac'] {
    display: none;
  }

  html,
  body {
    padding: 0;
    margin: 0;
  }

  @media screen and (max-width: 1023px) {
    body {
      overflow-x: hidden;
    }
  }

  /* Start purging... */
  /* Force GPU Accelerated scrolling, credit: Twitter Lite */
  .scrolling-gpu {
    transform: translateZ(0);
  }

  @layer utilities {
    .text-7xl {
      font-size: 5rem;
    }

    .text-8xl {
      font-size: 6rem;
    }
  }

  a > code {
    color: #087ea4 !important; /* blue-50 */
    text-decoration: none !important;
  }

  html.dark a > code {
    color: #149eca !important; /* blue-40 */
  }

  .text-code {
    font-size: calc(1em - 10%) !important;
  }

  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    box-decoration-break: clone;
    background-repeat: no-repeat;
    color: transparent;
  }

  .text-gradient-electric-blue {
    background-image: linear-gradient(45deg, #61dafb, #0072ff);
  }
  /* Stop purging. */
  /* Your own custom utilities */

  details {
    margin-bottom: 1rem;
  }

  table {
    width: 100%;
    margin-bottom: 1rem;
    display: block;
    overflow-x: auto;
  }

  table td,
  table th {
    padding: 0.75rem;
    vertical-align: top;
    border: 1px solid #dee2e6;
    overflow: auto;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  /*
   * Hopefully when scrollbar-color lands everywhere,
   * (and not just in FF), we'll be able to keep just this.
   */
  html .no-bg-scrollbar {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  }
  html.dark .no-bg-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
  /*
   * Until then, we have ... this.
   * If you're changing this, make sure you've tested:
   * - Different browsers (Chrome, Safari, FF)
   * - Dark and light modes
   * - System scrollbar settings ("always on" vs "when scrolling")
   * - Switching between modes should never jump width
   * - When you interact with a sidebar, it should always be visible
   * - For each combination, test overflowing and non-overflowing sidebar
   * I've spent hours picking these so I expect no less diligence from you.
   */
  html .no-bg-scrollbar::-webkit-scrollbar,
  html .no-bg-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
  }
  html .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: 4px solid transparent;
    background-clip: content-box;
    border-radius: 10px;
  }
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.35) !important;
  }
  html.dark .no-bg-scrollbar:hover::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:focus-within::-webkit-scrollbar-thumb,
  html.dark .no-bg-scrollbar:active::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
  }
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:hover,
  html.dark .no-bg-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.35) !important;
  }
}

@layer utilities {
  [class*='space-x-'] {
    @apply rtl:space-x-reverse;
  }
}

.code-step * {
  color: inherit !important;
}

.code-step code {
  background: none !important;
  padding: 2px !important;
}
html.dark .code-step * {
  color: inherit !important;
}

.mdx-heading {
  scroll-margin-top: calc(4rem + 20px);
  /* Space for the anchor */
  padding-inline-end: 1em;
}

.mdx-heading:before {
  height: 6rem;
  margin-top: -6rem;
  visibility: hidden;
  content: '';
}
.mdx-heading .mdx-header-anchor {
  /* Prevent the anchor from
     overflowing to its own line */
  height: 0px;
  width: 0px;
}
.mdx-heading .mdx-header-anchor svg {
  display: inline;
}
.mdx-heading .mdx-header-anchor svg {
  visibility: hidden;
}
.mdx-heading:hover .mdx-header-anchor svg {
  visibility: visible;
}
.mdx-heading .mdx-header-anchor:focus svg {
  visibility: visible;
}

.mdx-blockquote > span > p:first-of-type {
  margin-bottom: 0;
}
.mdx-blockquote > span > p:last-of-type {
  margin-bottom: 1rem;
}
.mdx-illustration-block {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: stretch;
  align-items: stretch;
  gap: 42px;
}
ol.mdx-illustration-block {
  gap: 60px;
}
.mdx-illustration-block li {
  display: flex;
  align-items: flex-start;
  align-content: stretch;
  justify-content: space-around;
  position: relative;
  padding: 1rem;
}
.mdx-illustration-block figure {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;

  justify-content: space-between;
  position: relative;
  height: 100%;
}
.mdx-illustration-block li:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 50%;
  inset-inline-end: 100%;
  transform: translateY(-50%);
  width: 60px;
  height: 49px;
  background: center / contain no-repeat url('/images/g_arrow.png');
}
.mdx-illustration-block li:first-child:after {
  content: ' ';
  display: none;
}
.mdx-illustration-block img {
  max-height: 250px;
  width: 100%;
}
@media (max-width: 680px) {
  .mdx-illustration-block {
    flex-direction: column;
  }
  .mdx-illustration-block img {
    max-height: 200px;
    width: auto;
  }
  .mdx-illustration-block li:after {
    top: 0;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translateX(-50%) translateY(-100%) rotate(90deg);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animation-pulse-button {
  animation: pulse-button 2s infinite;
}

.animation-pulse-shadow {
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-button {
  0% {
    transform: scale(0.9);
  }
  70% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes pulse-shadow {
  0% {
    transform: scale(0.65);
    opacity: 1;
  }

  70% {
    transform: scale(1);
    opacity: 0;
  }

  100% {
    transform: scale(0.65);
    opacity: 0;
  }
}

@keyframes progressbar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
