@import "woople-theme/variables.css.less";
@import "woople-theme/colours.css.less";

.outline {
  margin-bottom:20px;

  h2 {
    .outline-title();
  }

  p {
    padding-left:@leftColumnOffset;
    padding-right:@contentPadding;
  }

  .assessment {
    margin-left:@leftColumnOffset;
    margin-top:@contentPadding;
    text-transform:uppercase;
  }

  .completed {
    .action {
      display:none;
    }
  }

  .disabled td, p.disabled {
    .opacity(50);

    a:hover {
      text-decoration:none;
    }
  }

  tr.disabled {
   &:hover {
     td {
       background:none;
     }
   }

   td {
      background-color:transparent;
      text-shadow:none;
      color:@primaryTextColour;

      a {
        color:@primaryTextColour;
      }

      .action {
        display:none;
      }
    }
  }

  table {
    margin-bottom:0;

    th {
      color: @secondaryTextColour;
    }

    th, td {
      padding:@tableCellPadding;
      border-top:none;
      a {
        color:@primaryTextColour;
      }
    }

    .count {
      width:75px;
    }

    th {
      border-top:none;
    }

    tr > td:first-child, tr > th:first-child {
      padding-left:@contentPadding;
      width:@gridGutterWidth + @imageWidth - (@tableCellPadding * 2);
    }

    .action {
      display:block;
    }

    tr:hover {
      td {
        background-color:@highlightBackground;
      }
    }
  }
}

@media (max-width: 767px) {
  .outline {
    table {
      tr > td:first-child, tr > th:first-child {
        padding-left:@phoneMargin;
        text-indent:@phoneMargin * 1.5;

        > *:first-child {
          text-indent:0;
          margin-left:@phoneMargin;
        }

      }

    }

    h2 {
      .outline-title(@phoneLeftColumnOffset);
    }

    p {
      padding-left:@phoneLeftColumnOffset;
      padding-right:@phoneMargin;
    }

    .assessment {
      margin-left:@phoneLeftColumnOffset;
    }
  }
}