styles.scss

@import "./node_modules/bulma-helpers/css/bulma-helpers.min.css";

.root {
  max-width: 1200px;
  margin: auto;
}

.task-item {
  position: relative;
  padding-left: 15px;
  padding-right: 15px;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 7%;
    width: 86%;
    border-bottom: 1px solid #e8e8e8;
  }

  &:hover:not(.is-editing) {
    background: #fafafa;
    border-radius: 4px;
  }

  &.is-editing {
    box-shadow: 0px 2px 20px 0px #eee;
    transition: ease-in-out .25s all;
  }

  &.is-editing::after {
    border-bottom: transparent;
  }
}

.task-item-edit-input {
  padding-left: 0;
  box-shadow: none;

  &:focus {
    border-color: transparent;
    box-shadow: none;
  }
}

.task-item-note {
  padding: 0;
  box-shadow: none;

  &:focus {
    border-color: transparent;
    box-shadow: none;
  }
}

.task-details-column {
  &:hover {
    cursor: pointer;
  }
}

// .task-name {
//   &:hover {
//     cursor: text;
//     background: #f3f3f3;
//     border-radius: 4px;
//   }
// }

.delete-item-modal {
  .modal-content {
    max-width: 500px;
  }
}

.delete-item-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
}

.no-vmargin {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}