test.css

.test {
}

woah.css

/* Checkboxes */

:root {
    --Checkbox-color-unchecked: var(--color-gray);
    --Checkbox-color-checked: var(--color-green);
    --Checkbox-color-highlighted: var(--color-white);
    --Checkbox-color-understated: var(--color-very-light-gray);
    --Checkbox-margin: 1.6em;
    --Checkbox-line-height: 1.26563;
    --Checkbox-check-margin-left: -1.7em;
    --Checkbox-check-margin-top: .2em;
}


/* Hide the actual input */

.Checkbox-input {
    opacity: 0;
    position: absolute;
    margin: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
    left: 0;
    pointer-events: none;
}

.Checkbox {
    display: block;
    margin-left: var(--Checkbox-margin);
    line-height: var(--Checkbox-line-height);
}

.Checkbox--noInput {
    margin-left: 0px;
}

.Checkbox--noInput .Checkbox-label, .Checkbox--noInput .Checkbox-label:matches(--enter) {
    color: var(--color-white);
}

.Checkbox-label {
    vertical-align: top;
    position: relative;
    top: 3px;
    cursor: pointer;
    padding-left: 0;
    color: var(--Checkbox-color-understated);
}

.Checkbox--lowContrast .Checkbox-label {
    color: color(var(--color-gray) l(65%));
}

.Checkbox-label:hover {
    color: var(--Checkbox-color-highlighted);
}


/*
 * 1. Sets checkbox to the left of label text
 * 2. Visually aligns top of checkbox to top of label text
 */

.Checkbox-check {
    position: relative;
    float: left;
    margin-left: var(--Checkbox-check-margin-left); /* 1 */
    margin-top: var(--Checkbox-check-margin-top); /* 2 */
    height: 15px;
    width: 15px;
    border: 2px solid var(--Checkbox-color-understated);
    border-radius: 2px;
    overflow: hidden;
    z-index: 1;
}


/* Small Cards! */

.Checkbox-check--small {
    height: 13px;
    width: 13px;
    margin-top: 1px;
    margin-left: -0.9rem;
}

.Checkbox--discrete .Checkbox-check {
    border: 2px solid var(--color-medium-gray);
}


/* Pseudo element to make a visible checkbox */

.Checkbox-check::before {
    margin-top: -6px;
    margin-left: 4px;
    color: var(--Checkbox-color-unchecked);
    position: absolute;
    content: "";
    transform: rotate(45deg);
    display: block;
    width: 0;
    height: 0;
    box-shadow:
        0 0 0 0,
        0 0 0 0,
        0 0 0 0,
        0 0 0 0,
        0 0 0 0,
        0 0 0 0 inset;
}


/**
 * Checked
 */

.Checkbox-input:checked+.Checkbox-label {
    color: var(--Checkbox-color-highlighted);
}

.Checkbox-input:not(:checked)+.Checkbox-label .Checkbox-check {
    border-color: var(--Checkbox-color-understated);
}

.Checkbox-input:checked+.Checkbox-label .Checkbox-check {
    color: var(--Checkbox-color-checked);
    border-color: var(--Checkbox-color-checked);
}

.Checkbox-input:checked+.Checkbox-label .Checkbox-check::before {
    color: var(--Checkbox-color-checked);
    box-shadow:
        0 0 0 10px,
        10px -10px 0 10px,
        32px 0 0 20px,
        0px 32px 0 20px,
        -5px 5px 0 10px,
        20px -12px 0 11px;
}

.Checkbox-input:checked+.Checkbox-label .Checkbox-check--small::before {
    color: var(--Checkbox-color-checked);
    box-shadow:
        0 0 0 8px,
        7px -7px 0 7px,
        21px 0 0 11.2px,
        0px 20.1px 0 10.2px,
        -5px 5px 0 10px,
        20px -10px 0 12.5px;
}


/**
 * Animations
 */

.Checkbox-input+.Checkbox-label .Checkbox-check {
    transition: border-color 0.3 ease-in-out;
}

.Checkbox-input:checked+.Checkbox-label .Checkbox-check::before {
    animation: checkbox-on 0.3s forwards;
}

.Checkbox-input:checked+.Checkbox-label .Checkbox-check--small::before {
    animation: checkbox-on--small 0.3s forwards;
}

.Checkbox-input:not(:checked)+.Checkbox-label .Checkbox-check::before {
    animation: checkbox-off 0.3s forwards;
}

.Checkbox-input:not(:checked)+.Checkbox-label .Checkbox-check--small::before {
    animation: checkbox-off--small 0.3s forwards;
}

@keyframes checkbox-on {
    0% {
        color: var(--Checkbox-color-unchecked);
        box-shadow:
            0 0 0 10px,
            10px -10px 0 10px,
            32px 0 0 20px,
            0px 32px 0 20px,
            -5px 5px 0 10px,
            15px 2px 0 11px;
    }
    20% {
        color: var(--Checkbox-color-checked);
    }
    50% {
        box-shadow:
            0 0 0 10px,
            10px -10px 0 10px,
            32px 0 0 20px,
            0px 32px 0 20px,
            -5px 5px 0 10px,
            20px 2px 0 11px;
    }
    100% {
        color: var(--Checkbox-color-checked);
        box-shadow:
            0 0 0 10px,
            10px -10px 0 10px,
            32px 0 0 20px,
            0px 32px 0 20px,
            -5px 5px 0 10px,
            20px -12px 0 11px;
    }
}

@keyframes checkbox-off {
    0% {
        color: var(--Checkbox-color-checked);
        box-shadow:
            0 0 0 10px,
            10px -10px 0 10px,
            32px 0 0 20px,
            0px 32px 0 20px,
            -5px 5px 0 10px,
            20px -12px 0 11px;
    }
    80% {
        color: var(--Checkbox-color-checked);
        box-shadow:
            0 0 0 10px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            20px 1px 0 12.5px;
    }
    100% {
        color: var(--Checkbox-color-unchecked);
        box-shadow:
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0 inset;
    }
}

@keyframes checkbox-on--small {
    0% {
        box-shadow:
            0 0 0 8px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            15px 1px 0 12.5px;
    }
    50% {
        box-shadow:
            0 0 0 8px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            20px 1px 0 12.5px;
    }
    100% {
        box-shadow:
            0 0 0 8px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            20px -10px 0 12.5px;
    }
}

@keyframes checkbox-off--small {
    0% {
        color: var(--Checkbox-color-checked);
        box-shadow:
            0 0 0 8px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            20px -10px 0 12.5px;
    }
    80% {
        color: var(--Checkbox-color-checked);
        box-shadow:
            0 0 0 8px,
            7px -7px 0 7px,
            21px 0 0 11.2px,
            0px 20.1px 0 10.2px,
            -5px 5px 0 10px,
            20px 1px 0 12.5px;
    }
    100% {
        color: var(--Checkbox-color-unchecked);
        box-shadow:
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0,
            0 0 0 0 inset;
    }
}