.nav_colors {
    display: flex;
    grid-gap: 0.3rem;
}

    .nav_colors .item {
        height: 3rem;
        border-top: 1px solid #666666;
        border-right: 1px solid #666666;
        border-left: 1px solid #666666;
        border-radius: 0.25rem 0.25rem 0 0;
        flex-basis: 100%;
    }

    .nav_colors .black {
        background-color: #000000;
    }

    .nav_colors .white {
        background-color: #ffffff;
    }

    .nav_colors .gray {
        background-color: #666666;
    }

    .nav_colors .silver {
        background-color: #cccccc;
    }

    .nav_colors .red {
        background-color: #cc0000;
    }

    .nav_colors .green {
        background-color: #009900;
    }

    .nav_colors .blue {
        background-color: #0094ff;
    }

    .nav_colors .brown {
        background-color: #8a4903;
    }

    .nav_colors .yellow {
        background-color: #ffd425;
    }

    .nav_colors .mixed {
        background: linear-gradient(45deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    }

.item.checked, .item:hover {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polyline style="fill:none; stroke-linecap:round; stroke-linejoin:round;stroke:dimgray; stroke-width:14" points="10 50 45 80 90 25"/><polyline style="fill:none; stroke-linecap:round; stroke-linejoin:round;stroke:white; stroke-width:10" points="10 50 45 80 90 25"/></svg>');
}

.mixed.checked, .mixed:hover {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polyline style="fill:none; stroke-linecap:round; stroke-linejoin:round;stroke:dimgray; stroke-width:14" points="10 50 45 80 90 25"/><polyline style="fill:none; stroke-linecap:round; stroke-linejoin:round;stroke:white; stroke-width:10" points="10 50 45 80 90 25"/></svg>') no-repeat center, linear-gradient(45deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
