/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

@layer components {
  .icon-sets {
    & .icon-sets__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-l);
      margin-top: var(--space-xl);
    }

    & .icon-sets__title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-text);
      margin: 0;
    }

    & .icon-sets__link {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
      color: #64748b;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 500;
      transition: color 0.2s;

      &:hover {
        color: var(--color-primary);
      }
    }

    & .icon-sets__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: var(--space-l);

      /* Prefixes / Colorsets */
      .icon-set-card:nth-child(1),
      .icon-set-card:nth-child(6) {
        --colorset-primary: var(--color-purple-primary);
        --colorset-bg: var(--color-purple-bg);
        --colorset-border: var(--color-purple-border);
        & .icon-set-card__title { color: var(--colorset-primary); }
      }

      .icon-set-card:nth-child(2) {
        --colorset-primary: var(--color-green-primary);
        --colorset-bg: var(--color-green-bg);
        --colorset-border: var(--color-green-border);
        & .icon-set-card__title { color: var(--colorset-primary); }
      }

      .icon-set-card:nth-child(3) {
        --colorset-primary: var(--color-blue-primary);
        --colorset-bg: var(--color-blue-bg);
        --colorset-border: var(--color-blue-border);
        & .icon-set-card__title { color: var(--colorset-primary); }
      }

      .icon-set-card:nth-child(4) {
        --colorset-primary: var(--color-sky-primary);
        --colorset-bg: var(--color-sky-bg);
        --colorset-border: var(--color-sky-border);
        & .icon-set-card__title { color: var(--colorset-primary); }
      }

      .icon-set-card:nth-child(5) {
        --colorset-primary: var(--color-orange-primary);
        --colorset-bg: var(--color-orange-bg);
        --colorset-border: var(--color-orange-border);
        & .icon-set-card__title { color: var(--colorset-primary); }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  .icon-sets {
    /* Ak by sme potrebovali špecifické dark mode štýly pre IconSets */
  }
}