﻿.custom-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.checkbox-label {
    display: inline-block;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    border: 2px solid transparent;
}

/* Visible keyboard focus indicator */
.custom-checkbox:focus-visible + .checkbox-label {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}

.checkbox-label-burn {
    background-image: url('/img/burn.webp');
}

.custom-checkbox-burn:checked + .checkbox-label-burn {
    border: 2px solid red;
}

.checkbox-label-freeze {
    background-image: url('/img/frozentop.webp');
}

.custom-checkbox-freeze:checked + .checkbox-label-freeze {
    border: 2px solid red;
}

.checkbox-label-attack {
    background-image: url('/img/attack.webp');
}

.custom-checkbox-attack:checked + .checkbox-label-attack {
    border: 2px solid red;
}
