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

.outline {
  overflow:hidden;
  border-bottom:solid 1px fade(@contentBorder, 35%);

  h2 {
    .outline-title();
  }

  .assessment {
    margin-top:@contentPadding / 2;
    position:relative;

    -webkit-perspective: 2000px;
    -moz-perspective: 2000px;

    h3 {
      .content-title();
      padding:@contentPadding / 2;
      padding-bottom:0;
    }

    h4 {
      .outline-title();
    }

    .assessment-attributes {
      padding:@contentPadding / 2;
    }

    .alert {
      margin:@contentPadding / 2;
    }

    .badge {
      .woople-badge();
    }

    .assessment-start {
      .btn {
        margin:@contentPadding / 2;
      }
    }

    .flip-action, .flip-action-back {
      width:75px;
      padding:@contentPadding / 2;

      a {
        cursor: pointer;
      }
    }

    &.flip .front {
      z-index: 900;

      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
    }

    .front {
      position:relative;
      z-index:900;
      background:white;
      border-bottom:solid 1px transparent;

      .box-shadow(@default-shadow);

      -webkit-transform: rotateY(0deg);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;

      -moz-transform: rotateY(0deg);
      -moz-transform-style: preserve-3d;
      -moz-backface-visibility: hidden;

      -o-transition: -o-transform .4s ease-in-out;
      -ms-transition: -ms-transform .4s ease-in-out;
      -moz-transition: -moz-transform .4s ease-in-out;
      -webkit-transition: -webkit-transform .4s ease-in-out;
      transition: transform .4s ease-in-out;
    }

    .front.completed {
      background-image:url(/assets/woople-theme/completed-triangle.png);
      background-position:top right;
      background-repeat:no-repeat;
    }

    &.flip .back {
      z-index:1000;
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
    }

    .back {
      position:absolute;
      z-index:800;
      background:white;
      top:0;
      left:0;
      width:100%;
      /*height:100%;*/

      .box-shadow(@default-shadow);

      -webkit-transform: rotateY(-180deg);
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;

      -moz-transform: rotateY(-180deg);
      -moz-transform-style: preserve-3d;
      -moz-backface-visibility: hidden;

      /* -- transition is the magic sauce for animation -- */
      -o-transition: -o-transform .4s ease-in-out;
      -ms-transition: -ms-transform .4s ease-in-out;
      -moz-transition: -moz-transform .4s ease-in-out;
      -webkit-transition: -webkit-transform .4s ease-in-out;
      transition: transform .4s ease-in-out;
    }

    .assessment-pad {
      .assessment-history {

        a {
          color: @primary;
        }
      }
    }

    .outline {
      border:none;
    }
  }

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

  .disabled td {
    .opacity(50);

    a:hover {
      text-decoration:none;
    }

    .action {
      display: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 {
      .back {
        table tr > td:first-child, tr > th:first-child {
          text-indent:0;
        }
      }
    }
  }
}

.no-csstransforms3d {

  .back {
    display:none;
  }

  .flip .back {
    display:block;
  }
}