[data-filter-category],
form[data-blog-filter-form] button {
    margin-bottom: .5rem;
    margin-right: .5rem;
    color: var(--blog-button-font-color, var(--color-background, var(--light, #fff)));
    border: 1px solid var(--blog-button-background-color, var(--color-background-text, var(--dark, #000)));
    background-color: var(--blog-button-background-color, var(--color-background-text, var(--dark, #000)));
}

[data-filter-category]:before,
form[data-blog-filter-form] button:before,
[data-filter-category]:after,
form[data-blog-filter-form] button:after {
    display: none;
}

[data-filter-category]:hover,
form[data-blog-filter-form] button:hover,
[data-filter-category]:active,
form[data-blog-filter-form] button:active,
[data-filter-category]:focus,
form[data-blog-filter-form] button:focus, 
[data-filter-category].active,
form[data-blog-filter-form] button.active {
    color: var(--blog-button-font-color-active, var(--color-background, var(--dark, #000)));
    background-color: var(--blog-button-background-color-active, var(--color-secondary, var(--secondary, #EDE8DD)));
}

/* reset framework styles */
form[data-blog-filter-form].default button {
    width: auto;
    margin-top: 0
}

/* filter background color  */
[data-blog-filter-form] {
    padding: var(--blog-filter-padding, 1rem);
    background-color: var(--blog-filter-background-color, var(--color-secondary, var(--secondary, #EDE8DD)));
}

[data-blog-posts] {
    height: fit-content !important;
}
[data-blog-posts] .shuffle-item {
    transform: translate(0) !important;
}

.blog-pagination-controls .blog-pagination-list {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}