@charset "UTF-8";

html,
body,
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

* {
  padding: 0;
  margin: 0;
}

.todo-wrap {
  width: 400px;
  margin: 50px auto 0;
  border: 1px solid #cfcfcf;
  background: #f0f0f0;
  border-radius: 4px;
  padding: 0 30px;
  .title {
    text-align: center;
    font-size: 22px;
    padding: 20px;
  }
  .list-wrap {
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    overflow: auto;
    margin-bottom: 20px;
    max-height: 400px;
    .todo-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 20px;
      background: #fff;
      height: 40px;
      font-size: 14px;
      &:not(:last-of-type) {
        border-bottom: 1px solid #cfcfcf;
      }
      padding-bottom: 0px;
      .col-1 {
        flex: 0 0 40px;
        text-align: center;
      }
      .col-2 {
        flex: auto;
        &.on {
          text-decoration: line-through;
          color: #666;
        }
      }
      .col-3 {
        flex: 0 0 66px;
        text-align: center;
        .btn {
          border: 1px solid #cfcfcf;
          padding: 3px 10px;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          user-select: none;
          background: #f0f0f0;
          color: #666;
          transition: 0.4s;
          &:hover {
            background: #ff8c28;
            color: #fff;
            border-color: #ff6c3c;
          }
        }
      }
    }

    .no-task {
      background: #fff;
      text-align: center;
      line-height: 40px;
      font-size: 14px;
      color: #666;
    }
  }

  .input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 20px;
    .input {
      flex: auto;
      line-height: 34px;
      border: none;
      outline: none;
      padding: 0 10px;
    }
    .save {
      flex: 0 0 60px;
      text-align: center;
      background: #5abaff;
      line-height: 34px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }
}