@import (reference) '../../../Style/App.less';

@todo-remove-width: 28px;

.TodoList {
  position: relative;

  .CommonPanel-header {
    text-align: center;
  }

  .TodoList-teaser {
    margin: 0;
  }

  .TodoItem {
    line-height: @button-height;

    & > .TodoItem-main {
      padding-right: @todo-remove-width + 2 * @default-padding;
    }

    & > .TodoItem-actions {
      position: absolute;
      right: @default-padding;
      top: 0;
      visibility: collapse;

      & > .btn {
        width: @todo-remove-width;
      }
    }

    &:hover > .TodoItem-actions {
      visibility: visible;
    }

    &.completed {
      .TodoItem-content {
        text-decoration: line-through;
      }
    }
  }
}