.checkbox-login-remember {
    position: absolute;
    z-index: -1;
    opacity: 0;

    &+label {
        display: inline-flex;
        align-items: center;
        user-select: none;

        &::before {
            content: '';
            transition: all var(--transition-duration-02);
            display: inline-block;
            width: 1.2em;
            height: 1.2em;
            flex-shrink: 0;
            flex-grow: 0;
            border: 2px solid var(--color-dark-50);
            border-radius: 0.3em;
            margin-right: 0.5em;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 60% 60%;
        }
    }

    &:checked+label::before {
        border-color: transparent;
        background-color: var(--color-accent);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }

    @media (hover: hover) {
        &:not(:disabled):not(:checked)+label:hover::before {
            border-color: var(--color-accent);
        }
    }

    @media (hover: none) {
        &:not(:disabled):not(:checked)+label:active::before {
            border-color: var(--color-accent);
        }
    }

    &:not(:disabled):active+label::before {
        border-color: transparent;
    }

    &:focus:not(:checked)+label::before {
        border-color: var(--color-dark-50);
    }

    &:disabled+label::before {
        background-color: lightgray;
        border: none;
    }
}