/* Icons css */
@import url('variables.css');

:root {
    --icon-size: 2rem;
    /* Default size, can be overridden in other pages */
    --icon-bar-color: white;
    /* Default bar color */
    --icon-primary-color: var(--xinshengBlue);
    /* Default primary color */
    --icon-secondary-color: var(--xinshengGreen);
    /* Default secondary color */
}

/* Category Icon */
.category-icon {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: var(--icon-size, 2rem);
    height: var(--icon-size, 2rem);
    font-size: calc(var(--icon-size, 2rem) / 2);
}

.category-icon .bar {
    background-color: var(--icon-bar-color);
    border-radius: 0.125em;
    position: relative;
    left: 10%;
}

.category-icon .b11,
.category-icon .b12,
.category-icon .b21 {
    background-color: var(--icon-primary-color);
    width: 0.9375em;
    height: 0.9375em;
}

.category-icon .b12 {
    margin-left: 0.1875em;
}

.category-icon .b21,
.category-icon .b22 {
    margin-top: 0.1875em;
}

.category-icon .b22 {
    width: 0.75em;
    height: 0.75em;
    margin-top: 0.3125em;
    margin-left: 0.3125em;
    background-color: var(--icon-secondary-color);
    transform: rotate(45deg);
}

.products-category-icon {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    width: var(--icon-size, 2rem);
    height: var(--icon-size, 2rem);
    font-size: calc(var(--icon-size, 2rem) / 2);
    gap: 0.125em;
}

.products-category-icon .bar {
    background-color: var(--icon-bar-color);
    position: relative;
    left: 10%;
}

.products-category-icon .b11{
    border-radius: 30% 20% 0 20%;
}
.products-category-icon .b12{
    border-radius: 20% 30% 20% 0;
}
.products-category-icon .b21{
    border-radius: 20% 0 20% 30%;
}
.products-category-icon .b22{
    border-radius: 0 20% 30% 20%;
}