custom.css

@import 'tailwindcss/base';
@import './fonts.css';
@import './base.css';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

.code-block-removed-line {
  background-color: #ff000020;
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
  border-left: 3px solid #ff000080;
  text-decoration: line-through;
}

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: theme(colors.gray.1000);
  --ifm-color-primary-dark: theme(colors.gray.1000);
  --ifm-color-primary-darker: theme(colors.gray.1000);
  --ifm-color-primary-darkest: theme(colors.gray.1000);
  --ifm-color-primary-light: theme(colors.gray.1000);
  --ifm-color-primary-lighter: theme(colors.gray.1000);
  --ifm-color-primary-lightest: theme(colors.gray.1000);
  --ifm-code-font-size: 95%;
  --ifm-breadcrumb-item-background-active: transparent;
  --ifm-breadcrumb-padding-horizontal: 0;
  --ifm-list-paragraph-margin: 0;
  --ifm-spacing-horizontal: theme(spacing.7);
  --ifm-blockquote-border-color: theme(colors.gray.1000);
  --ifm-menu-link-padding-vertical: 0.6rem;
  --ifm-background-color: theme(colors.gray.0);
  --ifm-footer-link-color: var(--ifm-font-color-base);
  --ifm-menu-link-sublist-icon: url('~/img/ico-chevron.svg');
  --docsearch-searchbox-background: #f7f7f7;
  --docsearch-modal-background: theme(colors.card) !important;
  --ifm-navbar-height: 5.563rem;
  --ifm-navbar-sidebar-width: 100vw;
  --docsearch-highlight-color: theme(colors.fg) !important;
  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);

  /* temp: local search bar */
  --aa-primary-color-rgb: 0, 0, 0;

  @media screen and (prefers-reduced-motion) {
    transition: ;
  }
  --ifm-menu-color-background-active: none;
  --ifm-menu-color-background-hover: none;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme='dark'] {
  --ifm-color-primary: theme(colors.gray.0);
  --ifm-color-primary-dark: #e6e6e6;
  --ifm-color-primary-darker: #d9d9d9;
  --ifm-color-primary-darkest: #b3b3b3;
  --ifm-color-primary-light: theme(colors.gray.0);
  --ifm-color-primary-lighter: theme(colors.gray.0);
  --ifm-color-primary-lightest: theme(colors.gray.0);
  --ifm-background-color: theme(colors.gray.1000);
  --docusaurus-highlighted-code-line-bg: theme(colors.inactive);
  --docsearch-modal-background: theme(colors.gray.1000) !important;
  --docsearch-highlight-color: theme(colors.inactiveLight) !important;
  --docsearch-hit-background: theme(colors.lightfg) !important;
  --docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    #5d5d5d,
    #3c3c3c
  ) !important;
  --docsearch-key-shadow: inset 0 -2px 0 0 #353535, inset 0 0 1px 1px #7a7a7b,
    0 2px 2px 0 rgba(45, 45, 45, 0.3) !important;
  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, inset -1px 1px 0 0 #2c2e40, 0 3px 8px 0 theme(colors.gray.1000) !important
}

html {
  @apply bg-docusaurusBgColor;
  body > div {
    @apply max-w-[90rem] m-auto;
    @media (min-width: 997px) {
      @apply px-6;
    }
  }

  /* IGNT */
  .ignt-backlink {
    @apply text-2 text-muted pl-6 order-last;
    & > svg {
      @apply hidden;
    }
  }

  /* Banner */

  #__docusaurus > div[role='banner'] {
    @apply bg-gray-30 text-gray-1000 font-normal;
    & > div {
      @apply flex py-3;
    }
    a {
      @apply no-underline block w-full text-2;
    }
    @media (min-width: 997px) {
      @apply hidden;
    }
  }
  &[data-theme='dark'] #__docusaurus > div[role='banner'] {
    @apply bg-fg text-mutedLight font-normal;
  }

  /* MAINNAV */
  .navbar {
    @apply py-6 mx-6 px-0 h-auto border-b border-b-docusaurusColorBorder shadow-none bg-docusaurusBgColor;
    @media (min-width: 997px) {
      @apply mx-0;
    }
    &__toggle {
      border-radius: .5rem;
      @apply bg-card h-8 w-8 flex justify-center items-center;
      
      @media (min-width: 997px) {
        @apply hidden;
      }
    }
    &__brand {
      & + * {
        @apply ml-auto;
      }
    }
    &__link--active {
      @apply text-muted;
    }
    &__items:not(:last-child) {
      @apply justify-between;
      @media (min-width: 997px) {
        @apply justify-start px-3;
      }
      button {
        @apply order-2 mr-0;
      }
    }
    &__items--right > :last-child {
      @apply right-8.5;
    }
  }
  &[data-theme='dark'] .navbar__item {
    @apply text-mutedLight;
  }
  &[data-theme='dark'] .navbar__toggle {
    @apply bg-fg;
  }

  .github-icon {
    @apply hover:opacity-50;
  }

  /* SEARCHBAR */
  /* algolia */
  .DocSearch {
    &-Hits mark {
      @apply text-docusaurusColorBase;
    }
    &-Button {
      @apply text-inactive rounded-sm h-8 w-8 bg-card justify-center mr-3;
      @media (min-width: 997px) {
        @apply w-auto justify-between;
      }
      .DocSearch-Search-Icon {
        @media (min-width: 997px) {
          @apply hidden;
        }
      }
      .DocSearch-Button-Placeholder {
        @apply pr-8;
      }
      .DocSearch-Button-Key {
        background: none;
        @apply shadow-none bg-transparent border border-inactive text-inactive p-3 text-2 rounded-s h-6 w-6;
      }
      .DocSearch-Button-Keys,
      .DocSearch-Button-Placeholder {
        @apply hidden;
        @media (min-width: 997px) {
          @apply flex;
        }
      }
    }

    &-Search-Icon path {
      @apply fill-transparent;
    }
    path {
      @apply fill-transparent;
    }
    &-Logo path {
      @apply fill-docusaurusColorBase;
    }
  }

  .navbar-sidebar {
    @apply w-full;
    &__brand {
      @apply pb-7 pt-9 px-6 h-auto;
    }
    &__item {
      @apply px-6 w-full;
    }
    &__back {
      @apply px-0 hidden;
    }
    &__close {
      border-radius: .5rem;
      @apply bg-gray-1000 h-8 w-8 flex justify-center items-center ml-0;

      & > svg > g {
        @apply stroke-gray-0;
      }
    }
  }
  .navbar-sidebar {
    &__brand {
        @apply shadow-none relative;
      &::after {
        content: '';
        @apply absolute block h-px bg-border bottom-0 right-3 left-0 mx-6;
      }
    }
}
  &[data-theme='dark'] .navbar-sidebar {
    @apply bg-gray-1000;
    &__brand {
      &::after {
        content: '';
        @apply  bg-linkHover;
      }
    }
    &__close {
      @apply bg-gray-0;
      & > svg > g {
        @apply stroke-gray-1000;
      }
    }
  }
  &[data-theme='dark'] .DocSearch-Modal {
    @apply bg-gray-1000;
  }
  &[data-theme='dark'] .DocSearch-Footer {
    @apply bg-gray-1000;
  }
  &[data-theme='dark'] .DocSearch-Button {
    @apply bg-fg text-inactiveLight;
  }
  &[data-theme='dark'] .DocSearch-Button-Key {
    @apply text-inactiveLight border-inactiveLight;
  }

  /* BREADCRUMBS */
  .breadcrumbs__item {
    &:first-child {
      & > a {
        &::after {
          content: 'Docs';
        }
        & > svg {
          @apply hidden;
        }
      }
    }
    &:not(:last-child)::after {
      content: '>';
      @apply bg-none;
    }
  }
  .theme-doc-breadcrumbs {
    @media (min-width: 997px) {
      @apply pt-[calc(theme(spacing.7)-1rem)];
    }
  }
  .theme-doc-toc-mobile {
    @apply bg-card px-6 py-5.5 pb-0 rounded;
    & > button {
      @apply p-0 pb-5.5 flex justify-between;
      &::after {
        @apply order-last ml-5;
        background-image: var(--ifm-menu-link-sublist-icon);
        background-size: 70%;
      }
    }
    & ul li {
      @apply my-5 mx-0;
    }
  }
  &[data-theme='dark'] .theme-doc-toc-mobile {
    @apply bg-fg;
  }

  /* SIDEBAR */
  .theme-doc-sidebar-container {
    @media (min-width: 997px) {
      @apply border-r border-r-docusaurusColorBorder;
    }
    & > div:first-child > a {
      @apply m-0;
    }
    nav {
      @media (min-width: 997px) {
        @apply pt-7;
      }
    }
  }

  &[data-theme='dark'] .theme-doc-sidebar-menu .menu__list::before {
    @apply bg-inactiveLight;
  }
  .theme-doc-sidebar-menu {
    @apply font-normal;

    .menu__list {
      @apply relative pl-0;
      &::before {
        content: '';
        @apply absolute block left-3 top-0 h-full w-[2px] bg-border;
      }
      ul::before {
        @apply hidden;
      }
    }

    .menu__link {
      @apply pl-0 pr-5;
      &--active:not(.menu__link--sublist) {
        @apply text-docusaurusColorBase font-medium;
      }
    }

    li li {
      @apply pl-7;
      .menu__link--active:not(.menu__link--sublist) {
        @apply relative text-docusaurusColorBase font-medium;
        &::before {
          content: '';
          @apply absolute block left-0 top-0 h-full w-[2px] bg-docusaurusColorBase;
          @apply -left-[calc(theme(space.7)-theme(space.3))];
        }
      }
    }
    li li li {
      @apply pl-5;
    }
    li li li .menu__link--active:not(.menu__link--sublist)::before {
      @apply -left-[calc(theme(space.5)*1+theme(space.7)-theme(space.3))];
    }
    li li li li .menu__link--active:not(.menu__link--sublist)::before {
      @apply -left-[calc(theme(space.5)*2+theme(space.7)-theme(space.3))];
    }
    li li li li li .menu__link--active:not(.menu__link--sublist)::before {
      @apply -left-[calc(theme(space.5)*3+theme(space.7)-theme(space.3))];
    }
    li li li li li li .menu__link--active:not(.menu__link--sublist)::before {
      @apply -left-[calc(theme(space.5)*4+theme(space.7)-theme(space.3))];
    }
    li li li li li li li .menu__link--active:not(.menu__link--sublist)::before {
      @apply -left-[calc(theme(space.5)*5+theme(space.7)-theme(space.3))];
    }
  }

  &[data-theme='dark'] .menu__link {
    @apply text-mutedLight;
  }
  .theme-doc-sidebar-item-link .menu__link[target='_blank'] {
    &::after {
      content: '\2197';
      @apply ml-1;
    }
  }
  .menu__link {
    @apply text-muted;
    &:hover {
      text-shadow: 0.1px 0.1px 0 var(--ifm-font-color-base),
        -0.1px -0.1px 0 var(--ifm-font-color-base),
        0.1px -0.1px 0 var(--ifm-font-color-base),
        -0.1px 0.1px 0 var(--ifm-font-color-base),
        -0.1px 0 0 var(--ifm-font-color-base),
        0.1px 0 0 var(--ifm-font-color-base),
        0 0.1px 0 var(--ifm-font-color-base),
        0 -0.1px 0 var(--ifm-font-color-base);
      @apply text-docusaurusColorBase;
    }

    & > svg {
      @apply hidden;
    }
  }

  .menu__link--sublist-caret {
    @apply flex;
    &::after {
      background-size: 16px;
      background-repeat: no-repeat;
      @apply order-first ml-0 mr-4;
    }
  }
  .menu__list-item--collapsed .menu__link--sublist:after,
  .menu__list-item--collapsed .menu__caret:before {
    transform: rotateZ(0);
  }
  .menu__caret,
  li li .menu__link--sublist-caret::after {
    @apply hidden;
  }

  /* TOC */
  .table-of-contents__link:hover,
  .table-of-contents__link--active {
    text-shadow: 0.1px 0.1px 0 var(--ifm-font-color-base),
      -0.1px -0.1px 0 var(--ifm-font-color-base),
      0.1px -0.1px 0 var(--ifm-font-color-base),
      -0.1px 0.1px 0 var(--ifm-font-color-base),
      -0.1px 0 0 var(--ifm-font-color-base),
      0.1px 0 0 var(--ifm-font-color-base), 0 0.1px 0 var(--ifm-font-color-base),
      0 -0.1px 0 var(--ifm-font-color-base);
  }

  /* RELATED ARTICLES */
  &[data-theme='dark'] .pagination-nav > a {
    @apply bg-fg;
  }
  .pagination-nav {
    @apply pb-7 mt-9;
    & > a {
      box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.07);
      @apply border-transparent rounded pb-8.5 col-span-2 pt-6 px-6 hover:shadow-none;

      @media (min-width: 997px) {
        @apply col-span-1;
      }
    }

    .pagination-nav {
      &__link--next {
        @apply text-left;
        @media (min-width: 997px) {
          @apply text-right;
        }
      }
      &__sublabel {
        @apply mb-3.5 text-gray-1000 dark:text-docusaurusColorBase text-3;
      }
      &__label {
        @apply text-4 font-semibold;
      }
    }
  }

  /* FOOTER */
  .footer {
    background-color: var(--ifm-background-color);
    @apply border-t border-t-docusaurusColorBorder pt-10 mb-10;
    &__link-item {
      @apply hover:no-underline hover:text-linkHover;
    }
    &__bottom {
      margin: 0 calc(var(--ifm-spacing-horizontal) * -1);
    }
    &__copyright {
      @apply text-left mt-9 text-2;
      @media (min-width: 997px) {
        @apply grid grid-cols-5;
      }
      & > div {
        padding: 0 var(--ifm-spacing-horizontal);
        &:nth-child(2) {
          @apply col-span-4;
        }
      }
      & a {
        @apply pr-5 hover:text-linkHover hover:no-underline;
      }
    }
  }
  .footer__col:not(:first-child) {
    @apply basis-1/2;
    @media (min-width: 997px) {
      @apply basis-0;
    }
  }
  .footer__col:first-child .footer__title {
    @apply hidden;
  }
  .footer__link-item {
    & > svg {
      @apply hidden;
    }
  }

  .theme-back-to-top-button {
    @apply rotate-180;
    &::after {
      @apply w-1/2;
    }
  }

  /* MARKDOWN */
  .markdown {
    --ifm-heading-vertical-rhythm-bottom: 1;
    --ifm-h1-vertical-rhythm-bottom: 1;
  }
  .theme-doc-markdown {
    @apply mt-7 pb-8 border-b border-b-border;

    h1 {
      @apply text-7 font-bold leading-10 tracking-tight;
    }
    h2 {
      @apply text-6 font-bold leading-9 tracking-tight;
    }
    h3 {
      @apply text-4 font-semibold leading-7 tracking-tight;
    }
    p {
      @apply leading-relaxed;
    }
    p,
    ul,
    ol,
    code,
    blockquote {
      @apply text-[1.125rem];
    }
    code {
      @apply border-0 px-3;
    }
    blockquote {
      @apply my-7;
    }
    a {
      @apply underline underline-offset-2 hover:text-linkHover hover:decoration-linkHover;
    }
    ol,
    ul {
      @apply my-6;
    }
    ul li {
      @apply relative pl-6 mb-4 before:absolute before:block before:w-[4px] before:h-[4px] before:bg-current before:left-0 before:top-[calc(1em/2)];
    }
    ul li li {
      @apply last:mb-6 before:border before:border-current before:bg-transparent;
    }
    li:last-child li {
      @apply last:mb-0;
    }
    ol {
      list-style-type: none;
      counter-reset: item;
      & > li {
        @apply relative pl-8 mb-5.5;
        &::before {
          counter-increment: item;
          content: counters(item, '.', decimal-leading-zero) '.';
          @apply absolute flex left-0 top-[.2rem] text-3 font-semibold tracking-tight;
        }
      }
    }
    ol ol {
      counter-reset: subitem;
      & > li {
        &::before {
          counter-increment: subitem;
          content: counters(subitem, '.', decimal-leading-zero) '.';
        }
      }
    }
    li {
      & > ul,
      & > ol {
        @apply my-5;
      }
      & > p + .theme-code-block {
        @apply mt-3;
      }
    }
  }
}