/* QCM */
@use 'variable' as var;

ol.squareItems {
    padding: 0;
    margin: 1rem 0;
    li {
        color: var.$primary;
        background-color: var.$sidenav-content;
        background-image: none;
        border: 1px solid var.$dark;
        cursor: pointer;
        float: left;
        list-style-type: none;
        margin: 0.17em;
        padding: 0.34em 0;
        text-align: center;
        width: 33px;
        height: 33px;
        &.active {
            border-color: var.$info;
        }
        &.valid {
            color: var.$sidenav-content;
            border-color: var.$success;
            background-color: var.$primary;
        }
        &.defer {
            border-color: var.$info-dark;
            background-color: var.$navy-light;
        }
        &.error {
            border-color: var.$purple-light;
            background-color: var.$secondary;
        }
    }
}