/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --ifm-color-primary: theme("colors.brand");
  --ifm-color-primary-dark: #9f311b;
  --ifm-color-primary-darker: #962e19;
  --ifm-color-primary-darkest: #7c2615;
  --ifm-color-primary-light: #c33b21;
  --ifm-color-primary-lighter: #cc3e22;
  --ifm-color-primary-lightest: #dc4d31;
  --ifm-code-font-size: 95%;
}

html[data-theme="dark"] {
  --ifm-footer-background-color: #262626;
}

a code {
  @apply text-red-700 dark:text-red-300;
}

.table-of-contents__link--active,
.table-of-contents__link--active code,
.table-of-contents__link:hover,
.table-of-contents__link:hover code {
  @apply font-semibold;
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.header-github-link:hover {
  opacity: 0.6;
}

.header-github-link:before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

html[data-theme="dark"] .header-github-link:before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.anchored:target {
  @apply bg-amber-200 bg-opacity-50;
}
html[data-theme="dark"] .anchored:target {
  @apply bg-pink-200 bg-opacity-20;
}

.anchored:hover > .anchor-link::before {
  opacity: 1;
}
.anchored > .anchor-link::before {
  content: "*";
  @apply -ml-2 pr-2 absolute inset-y-0 opacity-0 float-left;
  color: var(--ifm-color-primary);
}

/* Remove .alert styles from Docusaurus */
.admonition.alert {
  border-radius: 0;
  border-width: 0;
}
.alert a {
  color: inherit;
}

.admonition {
  @apply mb-4 py-4 pr-8 pl-4;

  & .admonition-heading h5 {
    @apply flex items-center m-0 mb-2 uppercase text-lg;
  }

  & .admonition-icon {
    @apply inline-block align-middle mr-1 mt-1.5;

    & svg {
      @apply inline-block w-5 h-5;
      @apply fill-current stroke-current;
    }
  }
}

.admonition.admonition-note {
  @apply bg-note bg-opacity-10 border-solid border-l-8 border-note;

  & .admonition-heading {
    @apply text-note;
  }
  & .admonition-content {
    @apply text-note-content dark:text-note-content-dark;
  }
}

.admonition.admonition-tip {
  @apply bg-tip bg-opacity-10 border-solid border-l-8 border-tip;

  & .admonition-heading {
    @apply text-tip;
  }
  & .admonition-content {
    @apply text-tip-content dark:text-tip-content-dark;
  }
}

.admonition.admonition-info {
  @apply bg-info bg-opacity-10 border-solid border-l-8 border-info;

  & .admonition-heading {
    @apply text-info;
  }
  & .admonition-content {
    @apply text-info-content dark:text-info-content-dark;
  }
}

.admonition.admonition-warning {
  @apply bg-warning bg-opacity-10 border-solid border-l-8 border-warning;

  & .admonition-heading {
    @apply text-warning;
  }
  & .admonition-content {
    @apply text-warning-content dark:text-warning-content-dark;
  }
}

.admonition.admonition-caution,
.admonition.admonition-danger {
  @apply bg-caution bg-opacity-10 border-solid border-l-8 border-caution;

  & .admonition-heading {
    @apply text-caution;
  }
  & .admonition-content {
    @apply text-caution-content dark:text-caution-content-dark;
  }
}

html[data-theme="light"] .DocSearch {
  --docsearch-primary-color: theme("colors.red.500");
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
  --docsearch-logo-color: theme("colors.red.400");
}

html[data-theme="dark"] .DocSearch {
  --docsearch-primary-color: theme("colors.red.800");
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-highlight-color: var(--docsearch-primary-color);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(47, 55, 69, 0.7);
  --docsearch-logo-color: theme("colors.red.900");
  --docsearch-modal-background: var(--ifm-background-color);
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
  --docsearch-footer-background: var(--ifm-background-surface-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--ifm-color-emphasis-200) 0%,
    var(--ifm-color-emphasis-100) 100%
  );
}

html[data-theme="dark"] pre.github-light,
html[data-theme="light"] pre.github-dark-dimmed,
html[data-theme='dark'] img[src$='#gh-light-mode-only'],
html[data-theme='light'] img[src$='#gh-dark-mode-only'] {
  display: none;
}

html[data-theme="light"] pre.github-light {
  outline-style: solid;
  outline-width: 1px;
  outline-color: #d1d5db;
}
