site/_includes/styles/pages/services.css

/* ╭───────────────────────────────────────╮
/  │                      _                │
/  │  ___  ___ _ ____   _(_) ___ ___  ___  │
/  │ / __|/ _ \ '__\ \ / / |/ __/ _ \/ __| │
/  │ \__ \  __/ |   \ V /| | (_|  __/\__ \ │
/  │ |___/\___|_|    \_/ |_|\___\___||___/ │
/  ╰───────────────────────────────────────╯
/  services - styling for managing the services page */

article#services {
    details[styled] {
        services-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;

            sf-category, sf-publicity {
                margin-right: auto;
            }
        }
    }

    /* frontends */
    &:not(:has(input#service-frontend:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[cloud-network]) {
            display: none;
        }
    }

    /* search */
    &:not(:has(input#service-search:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[search]) {
            display: none;
        }
    }

    /* social */
    &:not(:has(input#service-social:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[social]) {
            display: none;
        }
    }

    /* fun */
    &:not(:has(input#service-fun:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[mood-smile]) {
            display: none;
        }
    }

    /* chat */
    &:not(:has(input#service-chat:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[message]) {
            display: none;
        }
    }

    /* sharing */
    &:not(:has(input#service-sharing:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[database-share]) {
            display: none;
        }
    }

    /* git */
    &:not(:has(input#service-git:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[brand-git]) {
            display: none;
        }
    }

    /* personal */
    &:not(:has(input#service-personal:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[user]) {
            display: none;
        }
    }

    /* public */
    &:not(:has(input#service-public:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[planet]) {
            display: none !important;
        }
    }

    /* private */
    &:not(:has(input#service-private:checked)) {
        card-container card-entry:has(h3 span[status] icon-tabler[lock]) {
            display: none !important;
        }
    }
}