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

html {
  @apply scroll-smooth;
}

.medium-zoom-image--opened {
  @apply rounded-xl shadow-xl;
}

.article {
  p {
    @apply leading-relaxed;
  }

  img {
    @apply rounded-xl;
  }

  a:not(.not-link) {
    @apply px-0.5 rounded-md font-medium;
    color: oklch(var(--p));
    transition:
      background-color 0.3s,
      background-size 0.3s,
      background-position 0.3s ease;
    box-decoration-break: clone;
    background-image: linear-gradient(oklch(var(--p)), oklch(var(--p)));
    background-size: 100% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  a:hover {
    background-color: oklch(var(--p) / 0.3);
    background-size: 0% 2px;
  }

  a :active {
    background-color: oklch(var(--p) / 0.2);
    background-size: 0% 2px;
  }

  a {
    svg {
      @apply inline-block;
      vertical-align: -0.25rem;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply my-2 mb-1 font-semibold;
  }

  h1 {
    @apply text-4xl leading-normal mt-5;
  }

  h2 {
    @apply text-3xl leading-relaxed mt-4;
  }

  h3 {
    @apply text-2xl leading-relaxed mt-3;
  }

  h4 {
    @apply text-2xl leading-relaxed mt-3;
  }

  strong,
  b {
    @apply font-bold my-2;
  }

  em {
    @apply my-2;
  }

  code {
    font-family:
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      Liberation Mono,
      Courier New,
      monospace;
  }

  blockquote {
    @apply alert px-6;
  }

  pre>code {
    all: unset;
  }

  hr {
    @apply my-2;
  }

  li::marker,
  .toc-number {
    color: oklch(var(--p));
  }

  ol {
    @apply pl-[20px] list-decimal;
  }

  ul {
    @apply pl-[20px] list-disc;
  }

  summary {
    list-style: none;
  }

  textarea,
  input {
    @apply text-base;
  }
}

.title-anchor {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.3s,
    color 0.3s,
    transform 0.3s ease;
}

a:hover .title-anchor {
  opacity: 1;
  color: oklch(var(--p));
  transform: translateX(0);
  transition:
    opacity 0.3s,
    color 0.3s,
    transform 0.3s ease;
}

.anchor {
  @apply p-0.5 rounded-xl font-medium;
  margin-left: 4px;
  color: oklch(var(--p));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 1.25em;
  height: 1.25em;
  opacity: 0;
  transition:
    opacity 0.3s,
    background-color 0.3s,
    color 0.3s,
    text-decoration 0.3s ease;

  svg {
    @apply inline-block;
    vertical-align: -0.25rem;
  }
}

.anchor:hover {
  background-color: oklch(var(--p) / 0.3);
  background-size: 1;
}

.anchor:active {
  background-color: oklch(var(--p) / 0.2);
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
  opacity: 1;
}

.shiki {
  @apply mockup-code px-6 my-4 overflow-x-auto;
}

.swup-progress-bar {
  background-color: oklch(var(--p));
}

.unopen {
  opacity: 0;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  overflow: hidden;
}

.open {
  opacity: 1;
  transition:
    max-height 0.5s ease,
    opacity 0.5s ease;
  overflow: hidden;
}