/**
 * Module: Basic styling setup.
 */

@import './constants.css';

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

html,
body {
  -webkit-text-size-adjust: 100%;

  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

html {
  hanging-punctuation: first last;
  color-scheme: dark light;
}

[data-color-scheme='dark'] {
  color-scheme: dark;
}

[data-color-scheme='light'] {
  color-scheme: light;
}

/* Default scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}

:root {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-main);

  color: var(--cl-fg-100);
  border-color: var(--cl-bg-40);
  background-color: var(--cl-bg-100);

  &.dark {
    color: var(--cd-fg-100);
    border-color: var(--cd-bg-40);
    background-color: var(--cd-bg-100);
  }
}

@media only screen and (max-width: 639px) {
  :root {
    font-size: 12px;
    line-height: 18px;
  }
}

:focus,
:focus-visible,
:focus-within {
  outline-width: 2px;
  outline-style: solid;
  outline-color: transparent;
}

::selection {
  background: var(--cl-prim-bg-60);
  .dark & {
    background: var(--cd-prim-bg-60);
  }
  tr :hover& {
    background: var(--cl-red-bg-100);
    .dark & {
      background: var(--cd-red-bg-100);
    }
  }
}

::placeholder {
  color: var(--cl-fg-60);
  .dark & {
    color: var(--cd-fg-60);
  }
}

/* Wrapping headers */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* Limit text lines and setup wrapping */
p,
li {
  max-width: 75ch;
  text-wrap: pretty;
}

div:not(.dense) > p {
  @apply [&:not(:last-child)]:mb-2;
}

@layer components {
  h1 {
    @apply text-lg font-semibold text-center;
  }

  h2 {
    @apply [&:not(:first-child)]:mt-2 font-semibold text-center;
  }

  b {
    @apply font-semibold;
  }

  code {
    font-family: var(--font-math);
  }

  li {
    list-style-position: inside;
  }

  li::marker {
    content: '–\2009';
  }

  .border {
    @apply rounded;
  }

  .border,
  .border-x,
  .border-y,
  .border-b,
  .border-t,
  .border-l,
  .border-r,
  .border-2,
  .border-x-2,
  .border-y-2,
  .border-b-2,
  .border-t-2,
  .border-l-2,
  .border-r-2,
  .divide-x,
  .divide-y,
  .divide-x-2,
  .divide-y-2 {
    border-color: var(--cl-bg-40);
    @apply divide-inherit;
    .dark & {
      border-color: var(--cd-bg-40);
    }
  }

  .sticky {
    z-index: 20;
  }
}