.button.layer-filter {
    background:#FFF;
    border-radius:4px;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    padding:1.25rem;
    width:fit-content;
    cursor:pointer;
    font-size: calc((13/16) * 1rem);
    position:relative;
    grid-template-columns: auto 1fr;
    display: grid;
    grid-auto-rows: auto;
}

.button.layer-filter:before {
    content:'';
    display:inline-block;
    background:#82B541;
    
    mask-image: url('/img/icons/filters.svg');
    -webkit-mask-image: url('/img/icons/filters.svg');
    mask-position: center center;
    -webkit-mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    height:1rem;
    width:1rem;
    margin-right:1rem;
}

.button.layer-filter:after {
    content:attr(shown);
    display:block;
    position:absolute;
    right:-0.75rem;
    top:-0.75rem;
    font-size:calc((13/16) * 1rem);
    color:#FFF;
    background:#82B541;
    color:#82B541;
    background:#FFF;
    box-shadow: 0px 1px 3px 0px rgba(65, 65, 65, 0.2);
    width:1.5rem;
    height:1.5rem;
    line-height:1.5rem;
    text-align:center;
    border-radius:50%;
}