[class*=icon-] {
	display: inline-block;
	mask-position: center;
	mask-size: contain;
    mask-repeat: no-repeat;
	width: 1.5rem;
	height: 1.5rem;
}

.icon-bag {
    mask-image: url(../img/winkeltas.svg);
    background-color: var(--color-blue);
    height: 2.5rem;
    width: 2.5rem;

    &.hovered {
        mask-image: url(../img/winkeltas-toevoegen.svg);
    }
}

.icon-bars {
    mask-image: url(../img/icon-bars.svg);
    background-color: var(--color-black);
    width: 2.5rem;
    height: 2.5rem;
}

.icon-bag-count {
    mask-image: url(../img/winkeltas.svg);
    background-color: var(--color-blue);
    width: 2rem;
    height: 2rem;
}

.icon-chevron-down {
    mask-image: url(../img/icon-chevron-down.svg);
    background-color: #333;

    &.active {
        background-color: var(--color-blue);
    }
}

.icon-chevron-up {
    mask-image: url(../img/icon-chevron-up.svg);
    background-color: #333;
}

.icon-close {
    mask-image: url(../img/icon-close.svg);
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.icon-glasses {
    mask-image: url(../img/brilletje.svg);
    width: 3rem;
    height: 3rem;
    background-color: var(--color-blue);
}

.icon-grid {
    mask-image: url(../img/boekjes-mode-when-acive.svg);
    background-color: #333;
}

.icon-list {
    mask-image: url(../img/lijst-mode-go-to.svg);
    background-color: #333;
}

.icon-menu {
    mask-image: url(../img/icon-menu.svg);
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: clamp(.25rem, .5vh, .5rem);
    right: clamp(0.25rem, -0.2581rem + 2.2581vw, 2rem);
    background-color: #333;

    @media (width > 60rem) {
        display: none;
    }
}

.icon-search {
    mask-image: url(../img/icon-search.svg);
    width: 2.2rem;
    height: 2.2rem;
    background-color: var(--color-blue);
}

.icon-up {
    mask-image: url(../img/icon-up.svg);
    width: 3rem;
    height: 3rem;
    position: fixed;
    bottom: 2rem;
    right: .75rem;
    opacity: .7;
    background-color: var(--color-blue);
}

.snipcart-base-button {
    width: 100%;
    height: auto;
}

.icon-facebook {
    mask-image: url(../img/icon-facebook.svg);
    background-color: black;
}

.icon-instagram {
    mask-image: url(../img/icon-instagram.svg);
    background-color: black;
}