.checklist-item{
    border-radius: 3px;
    clear: both;
    padding-left: 40px;
    position: relative;
    transform-origin: left bottom;
    transition-duration: .14s;
    transition-property: transform,opacity,height,padding,margin;
    transition-timing-function: ease-in;
    position: relative;
    top: 0px;
    left: 0px;
    &:hover{
        cursor: pointer;
        background-color: #091e420a;
    }
    &-checkbox{
        background-color: #fafbfc;
        border-radius: 2px;
        box-shadow: inset 0 0 0 2px #dfe1e6;
        // cursor: pointer;
        flex-shrink: 0;
        height: 16px;
        left: 0;
        margin: 6px;
        overflow: hidden;
        position: relative;
        position: absolute;
        text-align: center;
        top: 5px;
        transition: all .2s ease-in-out;
        white-space: nowrap;
        width: 16px;
        &:hover{
            background-color: #ebecf0;
            box-shadow: inset 0 0 0 2px #dfe1e6;
        }
        &-check{
            background-color: #0079bf;
            content:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='-3 -4 16 16'%3E%3Cpath d='M1.49 3.215a.667.667 0 0 0-.98.903l2.408 2.613c.358.351.892.351 1.223.02l.243-.239a1689.645 1689.645 0 0 0 2.625-2.589l.027-.026a328.23 328.23 0 0 0 2.439-2.429.667.667 0 1 0-.95-.936c-.469.476-1.314 1.316-2.426 2.417l-.027.026a1368.126 1368.126 0 0 1-2.517 2.482L1.49 3.215z'/%3E%3C/svg%3E");
            height: 16px;
            opacity: 1;
            width: 16px;
            &:hover{
                background-color: #5ba4cf;
                box-shadow: inset 0 0 0 2px #5ba4cf;
            }
        }
    }
    &-details{
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        .checklist-item-row{
            display: flex;
            flex-direction: row;
            .checklist-item-text-and-controls{
                display: inline-flex;
                padding: 6px 0;
                width: 100%;
                .checklist-item-details-text {
                    align-self: center;
                    flex: 1;
                    margin-bottom: 0;
                    min-height: 20px;
                    &.completed{
                        color: #5e6c84;
                        text-decoration: line-through;
                    }
                }
                .checklist-item-controls{
                    display: flex;
                    .icon-close{
                        &::before{
                            content: "\e91c";
                        }
                    }
                }
            }
        }
    }
}