/*to use global variables, import them into your component stylesheet*/
@import "./../../../styles/global.scss";

.checkbox {
    display: block;
    width: 18px;
    height: 18px;
    border: solid $grey-medium 1px;
    cursor: pointer;
    transition: background 0.1s ease-out, border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38),
        box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
}

.checkbox.checked {
    border: solid $green 1px;
    background-color: $green;
}

.checkbox:active {
    border: solid $blue 1px;
    box-shadow: 0 0 0 1px $blue;
}

.checkbox.checked:before {
    color: $white;
    content: "done";
    font-family: "Material Icons", serif;
    font-weight: bolder;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
}