@tailwind base;

html {
  @apply subpixel-antialiased;
  font-size: 16px;
  font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1;
  /* scroll-behavior: smooth; */
}
body {
  @apply bg-white;
}
.dark body {
  @apply text-gray-100 bg-dark;
}

article h1 {
  @apply mt-2 text-4xl font-bold tracking-tight;
}
article h2 {
  @apply mt-10 text-3xl font-semibold tracking-tight;
  @apply pb-1;
}
/* .dark article h2 {
  @apply border-gray-900;
} */
article h3 {
  @apply mt-8 text-2xl font-semibold tracking-tight;
}
article h4 {
  @apply mt-8 text-xl font-semibold tracking-tight;
}
article h5 {
  @apply mt-8 text-lg font-semibold tracking-tight;
}
article h6 {
  @apply mt-8 text-base font-semibold tracking-tight;
}
a {
  @apply text-blue-500 underline;
  text-underline-position: under;
}
article p {
  @apply leading-7;
}
article p:not(:first-child),
article blockquote:not(:first-child),
article .table-container:not(:first-child) {
  @apply mt-6;
}
article hr {
  @apply my-8;
}
.dark article hr {
  @apply border-gray-900;
}
article code {
  @apply text-gray-600 bg-gray-300 bg-opacity-25 rounded;
  box-decoration-break: clone;
}
.dark article code {
  @apply text-gray-300 bg-gray-800;
}
article pre {
  @apply p-4 mt-6 mb-4 overflow-x-auto bg-gray-100 rounded-lg;
  @apply dark:bg-gray-800;
}
article pre code {
  @apply inline-block min-w-full p-0 text-sm text-black bg-transparent rounded-none;
}
article a code {
  @apply text-current no-underline;
}

@tailwind components;
@tailwind utilities;

.main-container {
  min-height: 100vh;
}

.sidebar {
  @apply select-none md:border-r;
}
.sidebar ul ul {
  @apply relative ml-5;
}
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  @apply ring;
}
.sidebar .active-anchor {
  @apply font-semibold text-gray-900 dark:text-white;
}
.sidebar li.active > a {
  @apply font-semibold text-black bg-gray-100;
}
.dark .sidebar li.active > a {
  @apply text-white bg-gray-800;
}
.sidebar button,
.sidebar a {
  @apply block w-full p-2 mt-1 text-sm text-left text-gray-600 no-underline rounded outline-none select-none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.dark .sidebar button,
.dark .sidebar a {
  @apply text-gray-500;
}
.sidebar a:hover,
.sidebar button:hover {
  @apply text-gray-900 bg-gray-100;
}
.dark .sidebar a:hover,
.dark .sidebar button:hover {
  @apply text-white bg-gray-900;
}
article ul {
  @apply mt-6 ml-6 list-disc;
}
article li {
  @apply mt-2;
}
article ol {
  @apply mt-6 ml-6 list-decimal;
}
article blockquote {
  @apply pl-6 italic text-gray-700 border-l-2 border-gray-300;
  @apply dark:border-gray-700 dark:text-gray-400;
}

article .subheading-anchor {
  margin-top: -84px;
  display: inline-block;
  position: absolute;
  width: 1px;
}

article .subheading-anchor + a:hover .anchor-icon {
  opacity: 1;
}
article .anchor-icon {
  opacity: 0;
  @apply ml-2 text-gray-500 select-none;
}
.dark article .anchor-icon {
  @apply text-gray-700;
}

article h2 a {
  @apply no-underline;
}

/* Navbar */
.nextra-container nav {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.nextra-container nav a:focus,
.nextra-container nav summary:focus {
  @apply outline-none select-none;
}
.nextra-container nav a:focus-visible,
.nextra-container nav summary:focus-visible {
  @apply outline-none select-none ring;
}

/* Search */
.nextra-search input {
  @apply text-gray-900 border-gray-300;
}
.dark .nextra-search input {
  @apply text-gray-100 border-gray-800 bg-dark;
}
.nextra-search input::placeholder {
  @apply text-gray-400;
}
.dark .nextra-search input::placeholder {
  @apply text-gray-700;
}
.nextra-search ul {
  @apply overflow-hidden text-gray-100 list-none bg-white border border-gray-300 divide-gray-300 rounded shadow-lg;
}
.dark .nextra-search ul {
  @apply text-gray-100 border-gray-700 divide-gray-700 bg-dark;
}
.nextra-search ul li {
  @apply text-gray-800;
}
.nextra-search ul li.active,
.nextra-search ul a:focus li {
  @apply bg-gray-200;
}
.dark .nextra-search ul li {
  @apply text-gray-300;
}
.dark .nextra-search ul li.active,
.dark .nextra-search ul a:focus li {
  @apply bg-gray-800;
}
.nextra-search ul li .highlight {
  @apply bg-yellow-300;
}
.dark .nextra-search ul li .highlight {
  @apply bg-yellow-700;
}
.search-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.nextra-search.nextra-stork ul {
  @apply left-0 overflow-auto md:-left-80 md:right-0;
  max-height: min(calc(100vh - 80px), 400px);
  max-width: min(calc(100vw - 2rem), calc(100% + 20rem));
  width: 100vw;
}

article code {
  font-size: 0.85em;
  padding: 0.2em 0.3em;
  @apply border;
}

.dark article code {
  @apply border-gray-700;
}

article pre code {
  @apply border-0;
}

/* Locale */
.locale-switch summary::-webkit-details-marker {
  content: "";
  display: none;
}
.locale-switch summary::marker {
  content: "";
  display: none;
}
.locale-switch[open] summary:before {
  content: " ";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: block;
  cursor: default;
  background: transparent;
}
article .locale-switch .locale-dropdown {
  position: absolute;
  z-index: 11;
}

/* Table */
article table {
  @apply p-0;
}
article table tr {
  @apply p-0 m-0 border-t border-gray-300;
  @apply dark:border-gray-700;
}
article table tr:nth-child(2n) {
  @apply bg-gray-100;
  @apply dark:bg-gray-900;
}
article table tr th {
  @apply font-semibold;
}
article table tr th[align="center"],
article table tr td[align="center"] {
  @apply text-center;
}
article table tr th[align="right"],
article table tr td[align="right"] {
  @apply text-right;
}
article table tr th,
article table tr td {
  @apply text-left;
  @apply px-4 py-2 m-0 border border-gray-300;
  @apply dark:border-gray-700;
}
article .table-container {
  overflow: auto;
}

article .contains-task-list {
  @apply ml-0 list-none;
}

article .contains-task-list input[type="checkbox"] {
  @apply mr-1;
}

article pre .prism-code {
  --c-highlight: #cce0f5;
}
.dark article pre .prism-code {
  --c-highlight: #3d4b61;
}
article pre .prism-code .token.plain,
article pre .prism-code .token.builtin,
article pre .prism-code .token.char,
article pre .prism-code .token.constant {
  color: #000 !important;
}
.dark article pre .prism-code .token.plain,
.dark article pre .prism-code .token.builtin,
.dark article pre .prism-code .token.char,
.dark article pre .prism-code .token.constant {
  color: #fff !important;
}
article pre .prism-code .token.string,
article pre .prism-code .token.url,
article pre .prism-code .token.attr-value {
  color: #028265 !important;
}
.dark article pre .prism-code .token.string,
.dark article pre .prism-code .token.url,
.dark article pre .prism-code .token.attr-value {
  color: #20bb98 !important;
}
article pre .prism-code .token.punctuation,
article pre .prism-code .token.operator {
  color: #333 !important;
}
.dark article pre .prism-code .token.punctuation,
.dark article pre .prism-code .token.operator {
  color: #bbb !important;
}
article pre .prism-code .token.number,
article pre .prism-code .token.function,
article pre .prism-code .token.tag:not(.script) {
  color: #0076ff !important;
}
.dark article pre .prism-code .token.number,
.dark article pre .prism-code .token.function,
.dark article pre .prism-code .token.tag:not(.script) {
  color: #1e86ff !important;
}

.post-item .post-item-date {
  @apply text-sm text-gray-300;
}
.post-item .post-item-more {
  @apply ml-1 text-gray-600;
}
.post-item .post-item-desc {
  margin-bottom: 0.5em;
  @apply text-gray-400;
}
.post-item .post-item-title {
  @apply text-2xl no-underline;
  color: unset;
}
.post-item .post-item-title:hover {
  @apply underline;
}

.meta-line {
  @apply flex items-center justify-end mb-8;
}
.meta {
  @apply flex-1 mr-8 text-gray-400;
}
.meta .tag {
  @apply inline-block px-1 mr-1 text-sm leading-5 text-gray-400 no-underline bg-gray-200 rounded-md select-none;
}
.dark .meta .tag {
  @apply text-gray-100 bg-gray-400;
}

.meta .tag:hover {
  @apply text-gray-800;
}
.meta .tag:active {
  @apply bg-gray-400;
}
.meta-line .meta-back {
  @apply text-gray-600;
}

.nav-line {
  @apply flex flex-row items-center justify-end mb-8 text-right;
}
.nav-line .nav-link {
  @apply ml-3 text-gray-600;
}
.nav-line span.nav-link {
  @apply ml-3 text-gray-400 cursor-default;
}
