.remember-me input:checked {
    background: black !important;
}

.remember-forgot {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.remember-me {
    display: grid;
    grid-template-columns: 1rem auto;
    gap: 0.6rem;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
}

.remember-me input {
    width: 1rem;
    height: 1rem;
    margin-right: 0.3rem;
    border: 1px solid var(--text-light);
    border-radius: 2px;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    background-color: white;
    transform: scale(0);
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.remember-me label {
    color: var(--text-dark);
    user-select: none;
}

.remember-forgot a {
    color: var(--primary);
}

.remember-forgot a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary);
}