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

@import './code.css';

@layer components {
  /* Applied styles for common HTML tags */
  h1 {
    @apply text-base-content text-4xl py-5 font-bold lg:text-6xl font-black;
  }
  h2 {
    @apply text-base-content text-3xl pt-4 pb-3 m-0 font-black lg:text-4xl;
  }
  h3 {
    @apply text-base-content text-2xl pt-3 pb-2 m-0 font-black lg:text-3xl;
  }
  h4 {
    @apply text-base-content text-xl pt-2 pb-1 m-0 font-black lg:text-2xl;
  }
  h5 {
    @apply text-base-content text-lg py-1 m-0 font-black lg:text-xl;
  }
  h6 {
    @apply text-base-content text-base py-0 m-0 font-black lg:text-lg;
  }
  p {
    @apply text-base-content my-1 py-2 text-base leading-6;
  }
  .btn {
    @apply normal-case;
  }

  /* Dropdowns */
  .navdrop {
    max-height: 80vh;
  }

  /* Keep spacing after headings between p and non-p consistent */
  h1 + p,
  h2 + p,
  h3 + p,
  h4 + p,
  h5 + p,
  h6 + p {
    padding-top: 0;
    margin-top: 0;
  }

  /* mdx styles */
  .mdx a {
    @apply underline decoration-2;
  }
  .mdx a:hover {
    @apply decoration-4;
  }
  .mdx ul {
    @apply pl-0 lg:pl-4  list-disc list-inside text-base-content;
  }
  .mdx ol ul,
  .mdx ul ul {
    @apply pl-2 lg:pl-4  list-disc list-inside text-base-content;
  }
  .mdx ol {
    @apply pl-0 lg:pl-4 list-decimal list-inside text-base-content;
  }
  .mdx ul ol,
  .mdx ol ol {
    @apply pl-2 lg:pl-4 list-decimal list-inside text-base-content;
  }
  .mdx code {
    @apply bg-neutral-content px-2 rounded text-neutral font-mono font-bold;
  }
  .mdx pre code {
    @apply bg-inherit;
  }
  .mdx a.heading-autolink {
    color: currentColor;
    text-decoration: none;
  }
  .mdx a.heading-autolink:after {
    content: '';
    color: hsl(var(--s));
    font-size: 75%;
    padding-left: 0.5rem;
  }
  .mdx a.heading-autolink:hover:after {
    content: '#';
  }
  /* Watch out of P tags in the toc list */
  .mdx-toc ul li p {
    margin: 0;
    padding: 0;
    display: inline;
  }
  /* Keep p tags in lists inline */
  .mdx ul li p,
  .mdx ol li p {
    margin: 0;
    padding: 0;
    display: inline;
  }
  /* Prevent inline code style from applying to code blocks */
  .mdx code.hljs {
    color: inherit;
    background-color: inherit;
    background-opacity: inherit;
  }
  .mdx table.mdx-table {
    margin: 2rem auto;
  }
  .mdx table.mdx-table tr td {
    padding: 0.25rem 0.5rem;
  }
  .mdx table.mdx-table thead th {
    padding: 8px;
    font-size: 110%;
    border-bottom: 2px solid hsl(var(--b3));
  }

  /* FreeSewing SVG output styles */
  .fs-stroke-fabric {
    stroke: var(--pattern-fabric);
  }
  .fs-stroke-lining {
    stroke: var(--pattern-lining);
  }
  .fs-stroke-interfacing {
    stroke: var(--pattern-interfacing);
  }
  .fs-stroke-canvas {
    stroke: var(--pattern-canvas);
  }
  .fs-stroke-various {
    stroke: var(--pattern-various);
  }
  .fs-stroke-mark {
    stroke: var(--pattern-mark);
  }
  .fs-stroke-contrast {
    stroke: var(--pattern-contrast);
  }
  .fs-stroke-note {
    stroke: var(--pattern-note);
  }
  svg.freesewing.pattern rect.fabric,
  svg.freesewing.pattern rect.stroke-fabric,
  svg.freesewing.pattern path.fabric,
  svg.freesewing.pattern path.stroke-fabric,
  svg.freesewing.pattern circle.fabric,
  svg.freesewing.pattern circle.stroke-fabric {
    @apply fs-stroke-fabric;
  }
  svg.freesewing.pattern rect.lining,
  svg.freesewing.pattern rect.stroke-lining,
  svg.freesewing.pattern path.lining,
  svg.freesewing.pattern path.stroke-lining,
  svg.freesewing.pattern circle.lining,
  svg.freesewing.pattern circle.stroke-lining {
    @apply fs-stroke-lining;
  }
  svg.freesewing.pattern rect.interfacing,
  svg.freesewing.pattern rect.stroke-interfacing,
  svg.freesewing.pattern path.interfacing,
  svg.freesewing.pattern path.stroke-interfacing,
  svg.freesewing.pattern circle.interfacing,
  svg.freesewing.pattern circle.stroke-interfacing {
    @apply fs-stroke-interfacing;
  }
  svg.freesewing.pattern rect.canvas,
  svg.freesewing.pattern rect.stroke-canvas,
  svg.freesewing.pattern path.canvas,
  svg.freesewing.pattern path.stroke-canvas,
  svg.freesewing.pattern circle.canvas,
  svg.freesewing.pattern circle.stroke-canvas {
    @apply fs-stroke-canvas;
  }
  svg.freesewing.pattern rect.various,
  svg.freesewing.pattern rect.stroke-various,
  svg.freesewing.pattern path.various,
  svg.freesewing.pattern path.stroke-various,
  svg.freesewing.pattern circle.various,
  svg.freesewing.pattern circle.stroke-various {
    @apply fs-stroke-various;
  }
  svg.freesewing.pattern rect.mark,
  svg.freesewing.pattern rect.stroke-mark,
  svg.freesewing.pattern path.mark,
  svg.freesewing.pattern path.stroke-mark,
  svg.freesewing.pattern circle.mark,
  svg.freesewing.pattern circle.stroke-mark {
    @apply fs-stroke-mark;
  }
  svg.freesewing.pattern rect.contrast,
  svg.freesewing.pattern rect.stroke-contrast,
  svg.freesewing.pattern path.contrast,
  svg.freesewing.pattern path.stroke-contrast,
  svg.freesewing.pattern circle.contrast,
  svg.freesewing.pattern circle.stroke-contrast {
    @apply fs-stroke-contrast;
  }
  svg.freesewing.pattern rect.note,
  svg.freesewing.pattern rect.stroke-note,
  svg.freesewing.pattern path.note,
  svg.freesewing.pattern path.stroke-note,
  svg.freesewing.pattern circle.note,
  svg.freesewing.pattern circle.stroke-note {
    @apply fs-stroke-note;
  }
  .fs-fill-fabric {
    fill: var(--pattern-fabric);
  }
  .fs-fill-lining {
    fill: var(--pattern-lining);
  }
  .fs-fill-interfacing {
    fill: var(--pattern-interfacing);
  }
  .fs-fill-canvas {
    fill: var(--pattern-canvas);
  }
  .fs-fill-various {
    fill: var(--pattern-various);
  }
  .fs-fill-mark {
    fill: var(--pattern-mark);
  }
  .fs-fill-contrast {
    fill: var(--pattern-contrast);
  }
  .fs-fill-note {
    fill: var(--pattern-note);
  }
  svg.freesewing.pattern rect.fill-fabric,
  svg.freesewing.pattern path.fill-fabric,
  svg.freesewing.pattern text.fill-fabric,
  svg.freesewing.pattern tspan.fill-fabric,
  svg.freesewing.pattern circle.fill-fabric {
    @apply fs-fill-fabric;
  }
  svg.freesewing.pattern rect.fill-lining,
  svg.freesewing.pattern text.fill-lining,
  svg.freesewing.pattern tspan.fill-lining,
  svg.freesewing.pattern path.fill-lining,
  svg.freesewing.pattern circle.fill-lining {
    @apply fs-fill-lining;
  }
  svg.freesewing.pattern rect.fill-interfacing,
  svg.freesewing.pattern text.fill-interfacing,
  svg.freesewing.pattern tspan.fill-interfacing,
  svg.freesewing.pattern path.fill-interfacing,
  svg.freesewing.pattern circle.fill-interfacing {
    @apply fs-fill-interfacing;
  }
  svg.freesewing.pattern rect.fill-canvas,
  svg.freesewing.pattern text.fill-canvas,
  svg.freesewing.pattern tspan.fill-canvas,
  svg.freesewing.pattern path.fill-canvas,
  svg.freesewing.pattern circle.fill-canvas {
    @apply fs-fill-canvas;
  }
  svg.freesewing.pattern rect.fill-various,
  svg.freesewing.pattern text.fill-various,
  svg.freesewing.pattern tspan.fill-various,
  svg.freesewing.pattern path.fill-various,
  svg.freesewing.pattern circle.fill-various {
    @apply fs-fill-various;
  }
  svg.freesewing.pattern rect.fill-mark,
  svg.freesewing.pattern path.fill-mark,
  svg.freesewing.pattern text.fill-mark,
  svg.freesewing.pattern tspan.fill-mark,
  svg.freesewing.pattern circle.fill-mark {
    @apply fs-fill-mark;
  }
  svg.freesewing.pattern rect.fill-contrast,
  svg.freesewing.pattern text.fill-contrast,
  svg.freesewing.pattern tspan.fill-contrast,
  svg.freesewing.pattern path.fill-contrast,
  svg.freesewing.pattern circle.fill-contrast {
    @apply fs-fill-contrast;
  }
  svg.freesewing.pattern rect.fill-note,
  svg.freesewing.pattern text.fill-note,
  svg.freesewing.pattern tspan.fill-note,
  svg.freesewing.pattern path.fill-note,
  svg.freesewing.pattern circle.fill-note {
    @apply fs-fill-note;
  }

  .fs-fill-bg {
    fill: var(--pattern-bg);
  }
  .fs-fill-current {
    fill: currentColor;
  }
  svg.freesewing.pattern .fill-bg {
    @apply fs-fill-bg;
  }
  svg.freesewing.pattern .fill-current {
    @apply fs-fill-current;
  }
  .fill-opacity-25 {
    fill-opacity: 0.25;
  }
  .fill-opacity-50 {
    fill-opacity: 0.5;
  }
  .pulse-fill {
    fill: currentColor;
    animation: pulsefill 3s infinite;
  }
  .pulse-stroke {
    stroke: currentColor;
    animation: pulsestroke 3s infinite;
  }
  .stroko-0 {
    stroke-opacity: 0;
  }
  .stroko-5 {
    stroke-opacity: 0.05;
  }
  .stroko-10 {
    stroke-opacity: 0.1;
  }
  .stroko-20 {
    stroke-opacity: 0.2;
  }
  .stroko-30 {
    stroke-opacity: 0.3;
  }
  .stroko-40 {
    stroke-opacity: 0.4;
  }
  .stroko-50 {
    stroke-opacity: 0.5;
  }
  .stroko-60 {
    stroke-opacity: 0.6;
  }
  .stroko-70 {
    stroke-opacity: 0.7;
  }
  .stroko-80 {
    stroke-opacity: 0.8;
  }
  .stroko-90 {
    stroke-opacity: 0.9;
  }
  .stroko-100 {
    stroke-opacity: 1;
  }
  .filo-0 {
    fill-opacity: 0;
  }
  .filo-5 {
    fill-opacity: 0.05;
  }
  .filo-10 {
    fill-opacity: 0.1;
  }
  .filo-20 {
    fill-opacity: 0.2;
  }
  .filo-30 {
    fill-opacity: 0.3;
  }
  .filo-40 {
    fill-opacity: 0.4;
  }
  .filo-50 {
    fill-opacity: 0.5;
  }
  .filo-60 {
    fill-opacity: 0.6;
  }
  .filo-70 {
    fill-opacity: 0.7;
  }
  .filo-80 {
    fill-opacity: 0.8;
  }
  .filo-90 {
    fill-opacity: 0.9;
  }
  .filo-100 {
    fill-opacity: 1;
  }

  /*
   * Deal with markdown formatting in pattern logs
   */
  .pattern-logs p {
    @apply p-0 m-0 inline;
  }
  .pattern-logs a {
    @apply underline decoration-2;
  }
  .pattern-logs a:hover {
    @apply cursor-pointer decoration-4;
  }
  .pattern-logs code {
    @apply px-1 rounded font-bold bg-neutral bg-opacity-10 font-mono;
  }
}

@keyframes pulsefill {
  0% {
    fill-opacity: 0;
  }
  50% {
    fill-opacity: 0.1;
  }
  100% {
    fill-opacity: 0;
  }
}
@keyframes pulsestroke {
  0% {
    stroke-opacity: 0;
  }
  50% {
    stroke-opacity: 0.3;
  }
  100% {
    stroke-opacity: 0;
  }
}

.animate-bounce-right {
  animation: bounceright 1s infinite;
}

@keyframes bounceright {
  0%,
  100% {
    transform: translateX(-12.5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateX(12.5%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
/* Override DaisyUI button text color */
.btn-info {
  color: var(--btn-info-content);
}
.btn-success {
  color: var(--btn-success-content);
}
.btn-warning {
  color: var(--btn-warning-content);
}
.btn-error {
  color: var(--btn-error-content);
}

/* Theme gradient */
.theme-gradient {
  background-image: var(--theme-gradient);
}
.theme-gradient.loading {
  animation-name: MOVE-BG;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  margin-top: 0;
  transition: margin-top 0.2s ease-out;
}
@keyframes MOVE-BG {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: -200vw;
  }
}

/* Lightbox */
.lightbox img {
  max-width: calc(100vw - 6rem);
  max-height: calc(100vh - 6rem);
}

/* Style for navigation */
details {
  user-select: none;
}
details > summary > svg.details-toggle {
  transform: rotate(90deg);
  opacity: 0.4;
}
details[open] > summary > svg.details-toggle {
  transform: rotate(-90deg);
  opacity: 0.8;
}
details[open] summary ~ * {
  animation: ease-opacity-t-b 0.5s ease;
}
summary {
  cursor: pointer;
}
svg.details-toggle {
  transition: all 0.2s ease-out;
}

/* TO JE TO - TO JE TAJ */
summary::-webkit-details-marker {
  display: none;
}

input[type='range']::-moz-range-track {
  background: #3071a9;
}

input[type='range']::-ms-track {
  background: transparent;
}
input[type='range']::-ms-fill-lower {
  background: #2a6495;
}
input[type='range']:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type='range']::-ms-fill-upper {
  background: #3071a9;
}
input[type='range']:focus::-ms-fill-upper {
  background: #367ebd;
}
/* Style for patterns */
@import './svg-freesewing-draft.css';

/* Style for jargon terms */
.jargon-term {
  text-decoration: underline 3px dotted hsl(var(--s));
  font-weight: 500;
}
summary.jargon-term {
  list-style: none;
}
.jargon-term::after {
  content: '?';
  font-weight: bold;
  display: inline-block;
  transform: translate(0, -0.5em);
  font-size: 75%;
  color: hsl(var(--s));
  margin-left: -0.1rem;
}
.jargon-term:hover {
  position: relative;
  text-decoration: underline 3px solid hsl(var(--s));
  cursor: pointer;
}
details.jargon-details[open] {
  border: 1px solid hsl(var(--s));
  background: hsl(var(--s) / 0.05);
  padding: 1rem 2rem;
  margin: 1rem auto;
  border-radius: 4px;
}
details.jargon-details[open] summary {
  font-size: 200%;
  padding: 0.5rem 0 1rem;
  font-style: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
details.jargon-details[open] summary::after {
  display: none;
}
details.jargon-details[open] .jargon-term,
details.jargon-details[open] .jargon-term:hover {
  text-decoration: none;
}
details svg.jargon-close {
  display: none;
}
details.jargon-details[open] svg.jargon-close {
  display: inline;
  border-radius: 50%;
  padding: 0.1rem;
  opacity: 0.6;
}

/*
 * Fix slider styles that for some reason are ugly
 */
.range::-moz-range-thumb {
  border-radius: 100%;
}
input[type='range']::-moz-range-track {
  background-color: hsla(var(--bc) / 0.1);
}
.range {
  border-radius: 1rem;
}

/*
 * Smooth scrolling
 */
html {
  scroll-behavior: smooth;
}

/*
 * This should be possible with Tailwind's named groups but it does not seem to work
 */
details[open] > summary > svg.summary-chevron {
  transform: rotate(90deg);
}
details > summary:hover > svg.summary-chevron {
  stroke-width: 5;
}