/* ------------------------------
 * Details Summary
 * ------------------------------ */

details.is-style-plusminus > summary {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px 13px 30px;

    font-weight: bold;
    list-style: none;
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--primary);

    cursor: pointer;
}

/* details close state - hover effect */

details.is-style-plusminus:not([open]) > summary:hover {
    padding: 13px 28px 11px 27px;

    color: var(--wp--preset--color--secondary);
    background-color: var(--wp--preset--color--base);
    border: 2px solid var(--wp--preset--color--secondary);
}

/* details open state */

details.is-style-plusminus[open] > summary {
    color: var(--wp--preset--color--base);
    background-color: var(--wp--preset--color--secondary);
}

/* details close state - list style + hover effect */

details.is-style-plusminus > summary::after {
    content: '\2795';

    font-size: 1em;
    filter: var(--filter-base);
}

details.is-style-plusminus > summary:hover::after {
    filter: var(--filter-secondary);
}

/* details open state - list style */

details.is-style-plusminus[open] > summary::after {
    content: '\2796';

    font-size: 1em;
    filter: var(--filter-base);
}

/* ------------------------------
 * Details Paragraph
 * ------------------------------ */

details.is-style-plusminus > p {
    margin: 0;
    padding: 20px 30px;

    color: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--secondary);
    border-top: none;
}

/* ------------------------------
 * Responsiveness
 * ------------------------------ */

@media (max-width: 1100px) {
    details.is-style-plusminus {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}