.wp-block-better-loop-select {
    padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
}

    .wp-block-better-loop-select__buttons {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    @media (min-width: 360px) {
        .wp-block-better-loop-select__buttons {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 930px) {
        .wp-block-better-loop-select__buttons {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
    }

    .wp-block-better-loop-select__button,
    .wp-block-better-loop-select__button:not(:has(input:checked)):hover {
        --better-loop-button-bg: var(--wp--preset--color--purple-light);
        --better-loop-button-border: var(--wp--preset--color--purple-light);
        --better-loop-button-text: var(--wp--preset--color--site-bg);

        margin: 0 !important;
        padding: 0.1em 0.25em !important;
        border: 6px solid var(--better-loop-button-border) !important;
        background-color: var(--better-loop-button-bg) !important;
        color: var(--better-loop-button-text) !important;
        font-weight: 700;
        text-align: center;
    }

    .wp-block-better-loop-select__button:not(:has(input:checked)):hover {
        --better-loop-button-bg: var(--wp--preset--color--purple-dark);
        --better-loop-button-border: var(--wp--preset--color--purple-dark);
    }

    .wp-block-better-loop-select__button:has(input:checked) {
        --better-loop-button-bg: transparent;
        --better-loop-button-text: var(--wp--preset--color--purple-light);

        border-color: var(--better-loop-button-border) !important;
        background-color: var(--better-loop-button-bg) !important;
        color: var(--better-loop-button-text) !important;
    }

    .wp-block-better-loop-select__button:has(input[value="strategy"]) {
        --better-loop-button-bg: var(--wp--preset--color--orange-light);
        --better-loop-button-border: var(--wp--preset--color--orange-light);
        --better-loop-button-text: var(--wp--preset--color--purple-light);
    }
    
    .wp-block-better-loop-select__button:has(input[value="strategy"]):hover {
        --better-loop-button-bg: var(--wp--preset--color--orange-dark);
        --better-loop-button-border: var(--wp--preset--color--orange-dark);
        --better-loop-button-text: var(--wp--preset--color--purple-dark);
    }

    .wp-block-better-loop-select__button:has(input[value="creativity"]) {
        --better-loop-button-bg: var(--wp--preset--color--yellow-light);
        --better-loop-button-border: var(--wp--preset--color--yellow-light);
        --better-loop-button-text: var(--wp--preset--color--purple-light);
    }

    .wp-block-better-loop-select__button:has(input[value="creativity"]):hover {
        --better-loop-button-bg: var(--wp--preset--color--yellow-dark);
        --better-loop-button-border: var(--wp--preset--color--yellow-dark);
        --better-loop-button-text: var(--wp--preset--color--purple-dark);
    }

    .wp-block-better-loop-select__button:has(input[value="community"]) {
        --better-loop-button-bg: var(--wp--preset--color--turquoise-light);
        --better-loop-button-border: var(--wp--preset--color--turquoise-light);
        --better-loop-button-text: var(--wp--preset--color--purple-light);
    }

    .wp-block-better-loop-select__button:has(input[value="community"]):hover {
        --better-loop-button-bg: var(--wp--preset--color--turquoise-dark);
        --better-loop-button-border: var(--wp--preset--color--turquoise-dark);
        --better-loop-button-text: var(--wp--preset--color--purple-dark);
    }

    .wp-block-better-loop-select__button:has(input[value="learning"]) {
        --better-loop-button-bg: var(--wp--preset--color--pink-light);
        --better-loop-button-border: var(--wp--preset--color--pink-light);
        --better-loop-button-text: var(--wp--preset--color--purple-light);
    }

    .wp-block-better-loop-select__button:has(input[value="learning"]):hover {
        --better-loop-button-bg: var(--wp--preset--color--pink-dark);
        --better-loop-button-border: var(--wp--preset--color--pink-dark);
        --better-loop-button-text: var(--wp--preset--color--purple-dark);
    }

    .wp-block-better-loop-select__button:has(input[value="strategy"]:checked),
    .wp-block-better-loop-select__button:has(input[value="creativity"]:checked),
    .wp-block-better-loop-select__button:has(input[value="community"]:checked),
    .wp-block-better-loop-select__button:has(input[value="learning"]:checked) {
        --better-loop-button-bg: transparent;
    }

    .wp-block-better-loop-select__button:has(input[value="uncategorized"]) {
        display: none !important;
    }