/*
 * 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.
 */

/* Styles for IconSet component */
@layer components {
    .icon-set-card {
        background: var(--color-surface);
        border-radius: var(--radius-xl);
        padding: var(--space-m);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        display: flex;
        flex-direction: column;
        gap: var(--space-s);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s;
        cursor: pointer;
        min-height: 300px;

        &:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        & .icon-set-card__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-s);
        }

        & .icon-set-card__title {
            font-size: var(--size-step-1);
            font-weight: 700;
            color: var(--color-text);
            margin: 0;
        }

        & .icon-set-card__badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 0.4rem 0.8rem;
            border-radius: 2rem;
            background: var(--colorset-bg, var(--clr-gray-100));
            color: var(--colorset-primary, #64748b);
            white-space: nowrap;
            text-decoration: none;

            & svg {
                opacity: 0.6;
            }
        }

        & .icon-set-card__description {
            font-size: 0.95rem;
            color: #64748b;
            margin: 0;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 3rem;
        }

        & .icon-set-card__preview {
            border: 1px solid var(--colorset-border, #e2e8f0);
            border-radius: var(--radius-l);
            padding: 0;
            margin-top: auto;
            overflow: hidden;
            transition: background-color 0.2s;
        }

        & .icon-set-card__grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            width: 100%;
        }

        & .icon-set-card__icon {
            background: var(--colorset-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--space-xs);
            color: var(--colorset-primary, #64748b);
            transition: transform 0.2s, color 0.2s, background-color 0.2s;
            aspect-ratio: 1 / 1;

            &:hover {
                background: var(--clr-white);
                color: var(--colorset-primary);
                z-index: 1;
            }

            & svg {
                width: 32px;
                height: 32px;
                stroke-width: 1.5;
            }
        }
    }
}

@media (prefers-color-scheme: dark) {
    .icon-set-card {
        & .icon-set-card__badge {
            background: var(--colorset-bg, rgba(255, 255, 255, 0.05));
            color: var(--colorset-primary, #94a3b8);
        }

        & .icon-set-card__preview {
            border-color: var(--colorset-border, rgba(255, 255, 255, 0.1));
        }

        & .icon-set-card__icon {
            &:hover {
                background: rgba(255, 255, 255, 0.05);
            }
        }

        & .icon-set-card__description {
            color: #94a3b8;
        }
    }
}