@import "tailwindcss";
@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans:
    Roboto, sans-serif, ui-sans-serif, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@utility card-base {
  @apply rounded-(--radius-large) overflow-hidden bg-(--card-bg) transition;
}

@utility card-shadow {
  @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)];
}

@utility expand-animation {
  @apply relative before:ease-out before:transition active:bg-none hover:before:bg-(--btn-plain-bg-hover) active:before:bg-(--btn-plain-bg-active) z-0
        before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
}

@utility link {
  @apply transition rounded-md p-1 -m-1 expand-animation;
}

@utility link-lg {
  @apply transition rounded-md p-1.5 -m-1.5 expand-animation;
}

@utility float-panel {
  @apply top-21 rounded-(--radius-large) overflow-hidden bg-(--float-panel-bg) transition shadow-xl dark:shadow-none;
}

@utility float-panel-closed {
  @apply -translate-y-1 opacity-0 pointer-events-none;
}

@utility search-panel {
  & mark {
    @apply bg-transparent text-(--primary);
  }
}

@utility btn-card {
  @apply transition flex items-center justify-center bg-(--card-bg) hover:bg-(--btn-card-bg-hover)
        active:bg-(--btn-card-bg-active);
  &.disabled {
    @apply pointer-events-none text-black/10 dark:text-white/10;
  }
}

@utility disabled {
  &.btn-card {
    @apply pointer-events-none text-black/10 dark:text-white/10;
  }
}

@utility btn-plain {
  @apply transition relative flex items-center justify-center bg-none
        text-black/75 hover:text-(--primary) dark:text-white/75 dark:hover:text-(--primary);
  &:not(.scale-animation) {
    @apply hover:bg-(--btn-plain-bg-hover) active:bg-(--btn-plain-bg-active);
  }
  &.scale-animation {
    @apply expand-animation;
    &.current-theme-btn {
      @apply before:scale-100 before:opacity-100 before:bg-(--btn-plain-bg-hover) text-(--primary);
    }
  }
}

@utility btn-regular {
  @apply transition flex items-center justify-center bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) active:bg-(--btn-regular-bg-active)
        text-(--btn-content) dark:text-white/75;
}

@utility link-underline {
  @apply transition underline decoration-2 decoration-dashed decoration-(--link-underline)
        hover:decoration-(--link-hover) active:decoration-(--link-active) underline-offset-[0.25rem];
}

@utility toc-hide {
  @apply opacity-0 pointer-events-none;
}

@utility toc-not-ready {
  @apply opacity-0 pointer-events-none;
}

@utility hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility text-90 {
  @apply text-black/90 dark:text-white/90;
}

@utility text-75 {
  @apply text-black/75 dark:text-white/75;
}

@utility text-50 {
  @apply text-black/50 dark:text-white/50;
}

@utility text-30 {
  @apply text-black/30 dark:text-white/30;
}

@utility text-25 {
  @apply text-black/25 dark:text-white/25;
}

@utility meta-icon {
  @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-(--btn-regular-bg)
        text-(--btn-content) mr-2;
}

@utility with-divider {
  @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-(--meta-divider) before:text-sm
        before:font-medium first-of-type:before:hidden before:transition;
}

@utility btn-regular-dark {
  @apply flex items-center justify-center
        bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
        dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))];
  &.success {
    @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
  }
}

@utility success {
  &.btn-regular-dark {
    @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
  }
}

@layer components {
    h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
        @apply transition;
    }

    #toc-inner-wrapper {
        mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
    }
}

.custom-md img, #post-cover img {
    @apply cursor-zoom-in
}

::selection {
    background-color: var(--selection-bg)
}

.dash-line {
    position: relative;
}

.dash-line::before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    left: calc(50% - 1px);
    border-left: 2px dashed var(--line-color);
    pointer-events: none;
    transition: all 0.3s;
    transform: translateY(-50%);
}

.collapsed {
    height: var(--collapsedHeight);
}
