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

/*
Add additional Tailwind styles to this file, for example with @layer:
https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
*/

/* Dark mode colors. */
:root {
  --sl-color-white: #ffffff;
  --sl-color-black: #000000;
  --sl-color-text-invert: var(--sl-color-black);
  --sl-color-text-accent: var(--sl-color-white);
  --sl-color-accent: var(--sl-color-white);
  --sl-color-bg-nav: var(--sl-color-black);
  --sl-color-bg-sidebar: var(--sl-color-black);
  --sl-color-hairline: var(--sl-color-gray-6);
  --sl-color-hairline-light: var(--sl-color-gray-6);
  --sl-color-hairline-shade: var(--sl-color-gray-6);

  --sl-nav-gap: 0.5rem;
}

/* Light mode colors. */
:root[data-theme="light"] {
  --sl-color-white: #000000;
  --sl-color-black: #ffffff;
  --sl-color-text-invert: var(--sl-color-black);
  --sl-color-text-accent: var(--sl-color-white);
  --sl-color-accent: var(--sl-color-white);
  --sl-color-bg-nav: var(--sl-color-black);
  --sl-color-bg-sidebar: var(--sl-color-black);
  --sl-color-hairline: var(--sl-color-gray-6);
  --sl-color-hairline-light: var(--sl-color-gray-6);
  --sl-color-hairline-shade: var(--sl-color-gray-6);
}

header.header div:has(> site-search) {
  @apply justify-end mr-3;
}

header.header site-search button[data-open-modal] {
  border-color: var(--sl-color-hairline);
  @apply max-w-[18rem];
}

div.right-sidebar {
  border-inline-start: 1px solid var(--sl-color-hairline-shade);
}

starlight-theme-select select {
  @apply outline-none;
}

.pagination-links a {
  border: 1px solid var(--sl-color-hairline);
  @apply text-xs py-2 px-3 shadow-none;
}

.pagination-links a .link-title {
  @apply text-base leading-3;
}
