.task {
    transition: 0.3s ease color, 0.3s ease background-color;
    padding: rem(12px) rem(12px) rem(8px) rem(12px);
    margin-bottom: rem(8px);
    position: relative;
    background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
    border-radius: var(--mantine-radius-md);
    border: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));

    @mixin hover {
        color: light-dark(var(--mantine-color-dark-4), var(--mantine-color-white));
        background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));

        .actions {
            opacity: 0.5;
        }

        .user {
            border: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
        }
    }
}

.name {
    cursor: pointer;
    padding-right: rem(20px);
}

.actions {
    opacity: 0;
    transition: 0.3s ease opacity;
    position: absolute;
    top: rem(5px);
    right: rem(5px);
}

.completed {
    opacity: 0.35;
}