.root {
  position: relative;
  border-bottom: 1px solid #ccc;
  padding-left: 0.6rem;
}
.text {
  display: block;
  line-height: 1.2;
  padding: 25px 60px 25px 25px;
}
.toggle {
  text-align: center;
  width: 40px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto 0;
  border: none;
  appearance: none;
  &:after {
    display: block;
    content: '';
    width: 0.7rem;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 -18 100 136"><circle cx="50" cy="50" r="50" fill="none" stroke="#ccc" stroke-width="4"/></svg>') center no-repeat;
    background-size: 70% 70%;
  };

  &:checked:after {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 -18 100 136"><circle cx="50" cy="50" r="50" fill="none" stroke="#1abc9c" stroke-width="4"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>') center center no-repeat;
    background-size: 70% 70%;
  }
}

.completed {
  opacity: 0.5
}

.con {
  position: relative;
  opacity: 1;
  line-height: 1;
  text-transform: capitalize;
  cursor: pointer;
  transition: opacity 0.25s ease-out;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  &:after {
    content: '';
    position: absolute;
    display: block;
    width: calc( 100% + .5em );
    left: -.25em;
    height: 2px;
    top: 50%;
    border-radius: 1px;
    background: #2E2E2E;
    transform-origin: center right;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  }
}

.conComplete:after {
  transform: scaleX(1);
  transform-origin: center left;
}

.btns {
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
}

.btnCancel, .btnEdit, .btnDelete {
  padding: 0 30px;
  border: none;
  color: #fff;
}
.btnCancel {
  background: #999;
}
.btnEdit {
  background: #1abc9c;
}
.btnDelete {
  background: tomato;
}