/* ==============================
    COMMON SVG ICON SYSTEM
============================== */
.svg-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--dark-blue);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.25s ease;
}

/* Hover */
a:hover .svg-icon,
button:hover .svg-icon,
.svg-icon:hover {
    background-color: var(--dark-blue);
}

/* ==============================
    SEARCH
============================== */
.icon-search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.search .icon-search {
    background-color: var(--white);
}

/* ==============================
    PLUS
============================== */
.icon-plus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==============================
    MINUS
============================== */
.icon-minus {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ==============================
    compare
============================== */
.icon-compare {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7h11.17l-2.59-2.59L17 3l5 5-5 5-1.41-1.41L18.17 9H7V7Zm10 10H5.83l2.58 2.59L7 21l-5-5 5-5 1.41 1.41L5.83 15H17v2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7h11.17l-2.59-2.59L17 3l5 5-5 5-1.41-1.41L18.17 9H7V7Zm10 10H5.83l2.58 2.59L7 21l-5-5 5-5 1.41 1.41L5.83 15H17v2Z'/%3E%3C/svg%3E");
}

/* ==============================
    HEART / WISHLIST
============================== */
.icon-heart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C12 20.5 4 15.8 4 9.5C4 6.9 6 5 8.5 5C10 5 11.3 5.8 12 7C12.7 5.8 14 5 15.5 5C18 5 20 6.9 20 9.5C20 15.8 12 20.5 12 20.5Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5C12 20.5 4 15.8 4 9.5C4 6.9 6 5 8.5 5C10 5 11.3 5.8 12 7C12.7 5.8 14 5 15.5 5C18 5 20 6.9 20 9.5C20 15.8 12 20.5 12 20.5Z' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
}

/* ==============================
    cart
============================== */
.icon-cart {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h2.4l2.1 11.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H7.2l-.4-2H22l-2.8 9a4 4 0 0 1-3.8 2.8H9.5a4 4 0 0 1-3.9-3.2L3.7 5H3V3Zm7 16a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm10 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 3h2.4l2.1 11.2a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H7.2l-.4-2H22l-2.8 9a4 4 0 0 1-3.8 2.8H9.5a4 4 0 0 1-3.9-3.2L3.7 5H3V3Zm7 16a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm10 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
}

/* ==============================
    user
============================== */
.icon-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 10c-5 0-9 2.7-9 6v2h18v-2c0-3.3-4-6-9-6Zm0 2c3.9 0 6.5 1.9 6.9 4H5.1c.4-2.1 3-4 6.9-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 10c-5 0-9 2.7-9 6v2h18v-2c0-3.3-4-6-9-6Zm0 2c3.9 0 6.5 1.9 6.9 4H5.1c.4-2.1 3-4 6.9-4Z'/%3E%3C/svg%3E");
}

/* ==============================
    PLAY
============================== */
.icon-play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10-6.5L8 5.5Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10-6.5L8 5.5Z' fill='black'/%3E%3C/svg%3E");
}
.video-thumb-wrapper .icon-play{
    background-color: var(--light-green);
    width: 25px;
    height: 25px;
}

/* ==============================
    svg sizes
============================== */
.svg-icon-sm {
    width: 14px;
    height: 14px;
}
.svg-icon-md {
    width: 18px;
    height: 18px;
}
.svg-icon-lg {
    width: 24px;
    height: 24px;
}