.todo-list {
  li{
    &.editing {
      border-bottom: none;  
      padding: 0;
      .edit {
        display: block;
        width: 506px;
        padding: 13px 17px 12px 17px;
        margin: 0 0 0 43px;
      }
      .view {
        display: none;
      }
    }

    &.editing:last-child {
      margin-bottom: -1px;
    }

      .toggle {
        text-align: center;
        width: 40px;
        /* auto, since non-WebKit browsers doesn't support input styling */
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        border: none;
        /* Mobile Safari */
        -webkit-appearance: none;
        appearance: none;
        &:after {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
        }
        &:checked:after {
          content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
        }
    }

      .destroy {
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto 0;
        font-size: 30px;
        color: #cc9a9a;
        margin-bottom: 11px;
        transition: color 0.2s ease-out;
        &:hover {
          color: #af5b5e;
        }
        &:after {
          content: '×';
        }
      }

      &:hover .destroy {
        display: block;
      }

      &.completed label {
        color: #d9d9d9;
        text-decoration: line-through;
      }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .todo-list li .toggle {
    background: none;
    height: 40px;
  }
}