/*  COMPONENT: NEWSFILTER
//////////////////////////////////////////////////////////////////////////////*/

@layer components {
    .newsfilter {
        padding: var(--spacing-m) 0 var(--spacing-m) 0;
        border-top: 1px solid var(--color-mbz-grey-300);
        border-bottom: 1px solid var(--color-mbz-grey-300);
    }
    @media (min-width: 980px) {
        .newsfilter {
            position: sticky;
            top: 124px;
        }
    }
    .newsfilter ul {
        list-style: none;
        margin: 0 0 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .newsfilter .quantity {
        display: inline-block;
        margin-left: var(--spacing-xs);
        font-size: var(--font-size-s);
        text-decoration: underline;
        text-decoration-color: var(--color-white);
        opacity: 0.5;
    }
    .newsfilter a {
        display: block;
        padding-block: var(--spacing-xxs);
    }
    .newsfilter .active * {
        font-weight: var(--font-weight-bold);
        opacity: 1;
    }
    .newsfilter a:hover .quantity {
        opacity: 1;
    }
}