/* Use postcss-nesting */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Color scheme configuration to prevent Chrome's auto dark theme */
:root,
[data-theme-type="light"] {
  color-scheme: light dark; /* This prevents Chrome's auto dark theme from taking effect */
}

[data-theme-type="dark"] {
  color-scheme: dark;
}

/* Global styles with nesting support */
html {
  @apply scroll-smooth;
}

kbd {
  @apply kbd;
}

code {
  font-size: 0.875em;
}

.scrollbar-none {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
}

.frosti-heading {
  @apply text-2xl leading-normal pt-0 font-bold text-base-content bg-clip-text bg-gradient-to-r from-primary to-secondary duration-300 hover:text-transparent;
}

.btn-category {
  @apply bg-primary/5 hover:bg-primary text-primary hover:text-primary-content border-none hover:scale-110;
}

.btn-tag {
  @apply bg-secondary/5 hover:bg-secondary text-secondary hover:text-secondary-content border-none hover:scale-110;
}

.btn-copy {
  @apply px-1 text-base-content/80;
}

.frosti-code {
  @apply relative my-6 rounded-xl border border-base-300/20 bg-transparent overflow-hidden;

  &-toolbar {
    @apply sticky top-0 z-10 flex justify-between items-center px-4 py-2 bg-base-200 border-b border-base-content/20;
    &-language {
      @apply text-sm font-semibold text-base-content/80;
    }
  }

  &-content {
    @apply overflow-x-auto p-4 bg-transparent;

    pre {
      @apply bg-transparent;
      counter-reset: line;
    }

    .line {
      counter-increment: line;

      &::before {
        content: counter(line);
        @apply text-current mr-4 inline-block w-4 text-right;
      }
    }
  }
}

// Shared components and styles for blog pages
// ===================================================

// Footnotes styles
// ---------------------------------------------------
.footnotes {
  @apply mt-12 p-6 rounded-xl bg-base-200/50 backdrop-blur-sm border border-base-content/20 shadow-sm;

  // Footnote list item
  li {
    @apply text-sm text-base-content/80 relative;
  }
}

// Animation keyframes
@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Common container for blog pages
.blog-container {
  @apply p-4 rounded-2xl bg-base-200/30 backdrop-blur-md border border-base-300/20;
}

// Common stats box
.stats-box {
  @apply stats shadow mb-8 w-full bg-base-200/50 backdrop-blur-sm border border-base-content/20;

  .stat-figure {
    @apply text-primary;

    svg {
      @apply w-8 h-8;
    }
  }

  .stat-value {
    @apply text-primary;
  }
}

// Empty state component
.empty {
  &-state {
    @apply flex flex-col items-center justify-center min-h-[200px] p-8 text-center text-base-content/60 bg-base-100/50 rounded-xl border border-dashed border-base-300/20;
  }

  &-icon {
    @apply w-12 h-12 opacity-60 mb-4;
  }

  &-text {
    @apply text-lg;
  }
}

// Categories Page Components
// ===================================================

// Category component styles
.categories {
  &-container {
    @extend .blog-container;
  }

  &-grid {
    @apply grid gap-6;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

// Category card component
.category {
  &-card {
    @apply opacity-0 translate-y-5;
    animation: fadeIn 0.8s ease-out forwards;

    // Generate animation delays
    @for $i from 0 through 100 {
      &[data-index="#{$i}"] {
        animation-delay: #{0.1 + ($i * 0.05)}s;
      }
    }
  }

  &-inner {
    @apply rounded-2xl overflow-hidden bg-base-100 shadow-md border border-base-300/20 transition-transform duration-300 ease-in-out;

    &:hover {
      @apply -translate-y-1 shadow-lg;
    }

    &.expanded {
      @apply shadow-xl;
    }
  }

  &-header {
    @apply p-4 cursor-pointer flex justify-between items-center;
  }

  &-title {
    @apply flex items-center gap-3;

    h2 {
      @apply text-lg font-semibold m-0;
    }
  }

  &-icon {
    @apply flex items-center justify-center w-10 h-10 rounded-full flex-shrink-0;

    svg {
      @apply w-5 h-5;
    }
  }

  &-count {
    @apply inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full text-xs font-bold;
  }

  &-divider {
    @apply h-px bg-base-300/50 mx-4;
  }

  &-content {
    @apply max-h-0 overflow-y-auto;
    transition: max-height 0.8s;
  }
}

// Toggle button
.toggle {
  &-btn {
    @apply bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-base-content/70;
  }

  &-icon {
    @apply w-6 h-6 transition-transform duration-500;
  }
}

// Post list
.post {
  &-list {
    @apply list-none p-4 m-0 bg-base-100/70;
  }

  &-item {
    @apply mb-2 truncate;

    &:last-child {
      @apply mb-0;
    }
  }

  &-link {
    @apply flex justify-between items-center p-3 rounded-lg bg-base-200/50 transition-transform;

    &:hover {
      @apply bg-base-200 translate-x-1;

      .post-title {
        @apply text-primary;
      }
    }
  }

  &-title {
    @apply flex-1 min-w-0 font-medium overflow-hidden text-ellipsis whitespace-nowrap text-base-content/90;
  }

  &-date {
    @apply text-xs text-base-content/60 whitespace-nowrap py-1 px-2 rounded-full bg-base-300/30 shrink-0 ml-2;
  }
}

// Mixin for creating category color variants
@mixin category-color-variant($color-var) {
  .category-#{$color-var} {
    .category-header {
      background: linear-gradient(120deg, oklch(var(--#{$color-var}) / 0.1), oklch(var(--#{$color-var}) / 0.05));
    }

    .category-icon {
      background-color: oklch(var(--#{$color-var}) / 0.15);
      color: oklch(var(--#{$color-var}));
    }

    .category-count {
      background-color: oklch(var(--#{$color-var}) / 0.15);
      color: oklch(var(--#{$color-var}));
    }

    &.expanded {
      border-color: oklch(var(--#{$color-var}) / 0.3);
    }
  }
}

// Apply color variants
@include category-color-variant("p");
@include category-color-variant("s");
@include category-color-variant("a");
@include category-color-variant("in");
@include category-color-variant("su");
@include category-color-variant("wa");
@include category-color-variant("er");

// Rename for clarity in the component
.category-primary {
  @extend .category-p;
}
.category-secondary {
  @extend .category-s;
}
.category-accent {
  @extend .category-a;
}
.category-info {
  @extend .category-in;
}
.category-success {
  @extend .category-su;
}
.category-warning {
  @extend .category-wa;
}
.category-error {
  @extend .category-er;
}

// Tags Page Components
// ===================================================

.tags {
  &-container {
    @extend .blog-container;
  }

  &-cloud {
    @apply flex flex-wrap justify-center gap-3 min-h-[200px];
  }

  &-item {
    @apply relative opacity-0 translate-y-2 inline-flex items-center gap-2 rounded-full;
    animation: fadeIn 0.8s ease-out forwards;

    // Height fix - improved tag height
    @apply h-auto py-0;

    // Apply staggered animation with loop
    @for $i from 0 through 100 {
      &[data-index="#{$i}"] {
        animation-delay: #{0.05 + ($i * 0.02)}s;
      }
    }
  }

  &-content {
    @apply flex items-center gap-2 px-4 py-2 rounded-full bg-base-100 shadow-sm border border-transparent;
  }

  &-icon {
    @apply w-4 h-4 flex-shrink-0;
  }

  &-count {
    @apply inline-flex items-center justify-center min-w-6 h-6 px-2 text-xs font-bold rounded-full bg-base-300/30 text-base-content/80 duration-300;
  }
}

// Tag color variants
.tag {
  &-high {
    .tags-content {
      @apply border-primary/20 bg-base-100 text-primary;
    }
    .tags-icon {
      @apply text-primary;
    }
  }

  &-medium-high {
    .tags-content {
      @apply border-secondary/20 bg-base-100 text-secondary;
    }
    .tags-icon {
      @apply text-secondary;
    }
  }

  &-medium {
    .tags-content {
      @apply border-accent/20 bg-base-100 text-accent;
    }
    .tags-icon {
      @apply text-accent;
    }
  }

  &-medium-low {
    .tags-content {
      @apply border-base-content/20 bg-base-100;
    }
    .tags-icon {
      @apply text-base-content/80;
    }
  }

  &-low {
    .tags-content {
      @apply border-base-300/20 bg-base-100;
    }
    .tags-icon {
      @apply text-base-content/60;
    }
  }
}

// Archives Page Components
// ===================================================

.archives {
  &-container {
    @extend .blog-container;
  }

  &-timeline {
    @apply relative pl-8 ml-4;

    &::before {
      content: "";
      @apply absolute top-0 bottom-0 left-1 w-1 rounded bg-gradient-to-b from-primary to-secondary;
    }
  }
}

.timeline {
  &-year {
    @apply relative mb-12;

    &:last-child {
      @apply mb-0;
    }
  }

  &-month {
    @apply mb-10 relative;

    &:last-child {
      @apply mb-0;
    }
  }
}

.year {
  &-header {
    @apply relative mb-6;
  }

  &-badge {
    @apply relative -left-12 bg-primary text-primary-content font-bold text-lg py-2 px-4 rounded-full inline-block shadow-md z-10;
  }

  &-content {
    @apply relative;
  }
}

.month {
  &-title {
    @apply flex items-center gap-2 text-xl font-semibold mb-5 text-secondary pb-2 border-b border-base-content/20;
  }

  &-icon {
    @apply w-5 h-5;
  }

  &-count {
    @apply inline-flex items-center justify-center bg-secondary text-secondary-content text-xs font-bold min-w-6 h-6 rounded-full px-2 ml-2;
  }
}

.archive {
  &-posts {
    @apply list-none p-0 m-0 relative;
  }

  &-item {
    @apply relative mb-4 pl-6 flex flex-col;

    &:last-child {
      @apply mb-0;
    }
  }

  &-marker {
    @apply absolute -left-2 top-4 w-8 h-8 flex items-center justify-center bg-base-100 border-2 border-primary rounded-full z-10;
  }

  &-icon {
    @apply w-4 h-4 text-primary;
  }

  &-card {
    @apply block p-5 bg-base-100 border border-base-content/20 rounded-xl shadow-sm transition-transform duration-300;

    &:hover {
      @apply -translate-y-1 shadow-md border-primary/50 bg-base-200;

      .archive-title {
        @apply text-primary;
      }
    }
  }

  &-date {
    @apply text-sm text-base-content/60 mb-1;
  }

  &-title {
    @apply font-semibold mt-1 text-base-content line-clamp-2;
  }

  &-description {
    @apply text-sm text-base-content/70 mt-2 line-clamp-2;
  }
}

// Responsive styles for all pages
@media (max-width: 768px) {
  .blog-container {
    @apply p-3;
  }

  // Categories responsive
  .categories-grid {
    @apply grid-cols-1 gap-4;
  }

  .category-header {
    @apply py-3 px-4;
  }

  .category-icon {
    @apply w-8 h-8;

    svg {
      @apply w-4 h-4;
    }
  }

  // Tags responsive
  .tags-cloud {
    @apply gap-2;
  }

  .tags-content {
    @apply px-3 py-1.5;
  }

  // Archives responsive
  .archives-timeline {
    @apply pl-6 ml-0;
  }

  .year-badge {
    @apply -left-10 text-base py-1.5 px-3;
  }

  .archive-card {
    @apply p-4;
  }

  .archive-marker {
    @apply w-7 h-7 -left-2;
  }

  .archive-icon {
    @apply w-3.5 h-3.5;
  }
}

@media (max-width: 480px) {
  .blog-container {
    @apply p-2;
  }

  // Categories responsive
  .category-title h2 {
    @apply text-base;
  }

  .post-link {
    @apply py-2 px-3 flex-col items-start gap-1;
  }

  .post-date {
    @apply self-start;
  }

  // Tags responsive
  .tags-item {
    // Fixed height for small screens
    font-size: 0.9rem !important;
  }

  .tags-icon {
    @apply w-3.5 h-3.5;
  }

  .tags-count {
    @apply min-w-5 h-5 text-[0.65rem];
  }

  // Archives responsive
  .archives-timeline {
    @apply pl-5;
  }

  .year-badge {
    @apply -left-9 text-sm py-1 px-2.5;
  }

  .month-title {
    @apply text-lg;
  }
}

/* Pagefind UI customization with oklch colors */
#pagefind-search {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: oklch(var(--a));
  --pagefind-ui-text: oklch(var(--bc));
  --pagefind-ui-background: oklch(var(--b1));
  --pagefind-ui-border: oklch(var(--bc) / 0.2);
  --pagefind-ui-tag: oklch(var(--b2));
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0.5rem;
  --pagefind-ui-image-border-radius: 0.5rem;
  --pagefind-ui-image-box-ratio: 3/2;
  --pagefind-ui-font: var(--font-sans, system-ui, sans-serif);

  .pagefind-ui__search-input {
    @apply input input-bordered w-full;
    border: 1px solid oklch(var(--bc) / 0.2);
  }

  .pagefind-ui__search-clear {
    @apply hidden;
  }

  .pagefind-ui__result {
    @apply p-4 border rounded-lg mb-4;
    border: 1px solid var(--pagefind-ui-border);
  }

  .pagefind-ui__result-title {
    @apply text-lg font-bold mb-2;
  }

  .pagefind-ui__result-link {
    @apply text-primary hover:underline;
  }

  .pagefind-ui__result-excerpt {
    @apply text-sm text-base-content opacity-75;
  }

  .pagefind-ui__result-excerpt mark {
    @apply bg-accent text-accent-content px-1 rounded;
  }

  .pagefind-ui__button {
    @apply btn btn-primary;
  }

  .pagefind-ui__message {
    @apply text-sm text-base-content opacity-75 my-4;
  }

  .pagefind-ui__message:empty::before {
    content: "No results found. Try a different search term.";
    @apply block text-center py-8 text-base-content opacity-50;
  }
}
