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

@layer base {
  * {
    @apply box-border font-body font-medium scroll-smooth scroll-m-8;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-headers font-black;
  }

  a {
    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark cursor-pointer;
  }

  *::selection {
    @apply bg-dark text-light;
  }

  mark {
    @apply bg-mid px-2;
  }

  /* SCROLLBARS STYLING */

  * {
    @apply [scrollbar-color:theme(colors.dark)_transparent] [scrollbar-width:thin];
  }

  *::-webkit-scrollbar {
    @apply w-3 mobile:w-0;
  }

  *::-webkit-scrollbar-track {
    @apply bg-light;
  }

  *::-webkit-scrollbar-thumb {
    @apply bg-dark rounded-full border-[3px] border-solid border-light;
  }

  /* CHANGE FORMATTED DEFAULTS */

  .formatted h1,
  .formatted h2,
  .formatted h3,
  .formatted h4,
  .formatted h5,
  .formatted h6 {
    @apply text-center;
  }

  .formatted h1 {
    @apply text-4xl my-16;
  }

  .formatted h1 + h2 {
    @apply -mt-10;
  }

  .formatted h2 {
    @apply text-3xl my-12;
  }

  .formatted h2 + h3 {
    @apply -mt-8;
  }

  .formatted h3 {
    @apply text-2xl my-8;
  }

  .formatted h3 + h4 {
    @apply -mt-6;
  }

  .formatted h4 {
    @apply text-xl my-6;
  }

  .formatted h5 {
    @apply text-lg my-4;
  }

  .formatted p,
  .formatted strong {
    @apply my-2 text-justify;
  }

  .formatted footer {
    @apply border-t-[3px] border-dotted pt-6;
  }

  .formatted footer > div {
    @apply my-2 px-6 py-4 rounded-xl;
  }

  .formatted footer > div:target {
    @apply bg-mid shadow-inner-sm shadow-shade;
  }

  .formatted li::marker {
    @apply text-dark;
  }

  .formatted blockquote {
    @apply border-l-dark;
  }

  .formatted ul {
    @apply list-disc pl-4;
  }

  .formatted ol {
    @apply list-decimal pl-4;
  }

  /* INPUT */

  input {
    @apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all;
  }

  input::placeholder {
    @apply text-dark opacity-60;
  }

  input:focus-visible {
    @apply outline-none bg-mid shadow-inner-sm;
  }
}

@layer components {
  .texture-paper-dots {
    @apply [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)] bg-local bg-[length:10cm];
  }
}

.tippy-box[data-animation="fade"][data-state="hidden"] {
  @apply opacity-0;
}
[data-tippy-root] {
  max-width: calc(100vw - 10px);
}
.tippy-box {
  @apply relative bg-light drop-shadow-shade-xl rounded-lg transition-[transform,_visibility,_opacity];
}
.tippy-box[data-placement^="top"] > .tippy-arrow {
  @apply bottom-0;
}
.tippy-box[data-placement^="top"] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow {
  top: 0;
}
.tippy-box[data-placement^="bottom"] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}
.tippy-box[data-placement^="left"] > .tippy-arrow {
  right: 0;
}
.tippy-box[data-placement^="left"] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}
.tippy-box[data-placement^="right"] > .tippy-arrow {
  left: 0;
}
.tippy-box[data-placement^="right"] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}
.tippy-box[data-inertia][data-state="visible"] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}
.tippy-arrow {
  @apply h-4 w-4 text-light;
}
.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}
.tippy-content {
  @apply relative px-6 py-4 z-10;
}