// Table of Contents
//
// 01. Debates
// 02. Index
// 03. Show
// 04. New
// 05. Comments
//

// 01. Debates
// - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin votes {
  background: $votes-bg;
  border-top: 1px solid $votes-border;
  margin: 0 rem-calc(-12);
  padding: rem-calc(14) rem-calc(12);
  position: relative;

  .icon-like {
    background: white;
    border: 2px solid $votes-border;
    border-radius: rem-calc(3);
    color: $text-light;
    display: inline-block;
    font-size: rem-calc(30);
    line-height: rem-calc(30);
    padding: rem-calc(3) rem-calc(6);
    position: relative;

    &:hover {
      background: $votes-like;
      border-color: white;
      color: white;
      cursor: pointer;
      opacity: 1 !important;
    }

    &:active {
      border-color: $votes-like-act;
    }
  }

  .icon-unlike {
    background: white;
    border: 2px solid $votes-border;
    border-radius: rem-calc(3);
    color: $text-light;
    display: inline-block;
    font-size: rem-calc(30);
    line-height: rem-calc(30);
    padding: rem-calc(3) rem-calc(6);
    position: relative;

    &:hover {
      background: $votes-unlike;
      border-color: white;
      color: white;
      cursor: pointer;
      opacity: 1 !important;
    }

    &:active {
      border-color: $votes-unlike-act;
    }
  }

  .like {
    line-height: rem-calc(48);
    vertical-align: super;

    span {
      color: white;
      display: inline-block;
      font-size: rem-calc(16);
      font-weight: lighter;
      line-height: $line-height*2;
      padding-left: rem-calc(8);
      vertical-align: top;
    }
  }

  .unlike {
    @extend .like;
  }

  .voted {
    .icon-like {
      @extend .icon-like;
      background: $votes-like;
      border-color: white;
      color: white;
    }

    .icon-unlike {
      @extend .icon-unlike;
      background: $votes-unlike;
      border-color: white;
      color: white;
    }
  }

  .no-voted {
    .icon-like, .icon-unlike {
      opacity: .5;
    }
  }

  .total-votes {
    color: white;
    float: right;
    line-height: $line-height*2;
  }

  .divider {
    margin: 0 rem-calc(6);
  }

  .not-logged {
    background: rgba(22,99,135,.9);
    color: white;
    height: 100%;
    left: 0;
    line-height: $line-height*2;
    padding-top: rem-calc(12);
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;

    a {
      color: white;
      text-decoration: underline;
    }
  }
}

// 02. Index
// - - - - - - - - - - - - - - - - - - - - - - - - -

.debate-featured {

  .panel {
    background: white;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: rem-calc(3);
    margin-bottom: rem-calc(24);
    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);

    .debate-content {
      min-height: rem-calc(353);
    }

    .label {
      background: none;
      clear: both;
      color: $debates;
      display: block;
      font-weight: bold;
      text-transform: uppercase;
      padding-left: 0;
      padding-top: 0;
    }

    .icon-debates {
      color: $debates;
      font-size: rem-calc(36);
      line-height: $line-height;
      position: absolute;
      right: rem-calc(18);
      top: rem-calc(12);
    }

    h3 {
      font-weight: bold;
      margin: rem-calc(8) 0 0 0;
      min-height: rem-calc(65);

      a {
        clear: both;
        color: $text;
        display: block;
        font-size: rem-calc(16);
        line-height: $line-height;
      }
    }

    .debate-info {
      color: $text-medium;
      font-weight: lighter;
      margin-bottom: 0;

      .icon-comments {
        font-size: rem-calc(16);
        vertical-align: top;
      }

      a {
        color: $text-medium;
      }
    }

    .debate-description {
      color: $text;
      font-size: rem-calc(13);
      height: rem-calc(156);
      line-height: $line-height;
      margin-bottom: rem-calc(12);
      margin-top: rem-calc(24);
      overflow: hidden;
      position: relative;

      a {
        color: $text;
      }
    }

    .truncate {
      background: url('truncate.png');
      background-repeat: repeat-x;
      bottom: 0;
      height: 24px;
      position: absolute;
      width: 100%;
    }

    p {
      color: $text;
      font-size: rem-calc(13);
      line-height: $line-height;
      margin-bottom: rem-calc(12);
    }
  }

  .votes {
    @include votes;
  }
}

.debates-list {
  margin-bottom: rem-calc(48);
}

.debate {
  @extend .debate-featured;
  margin-bottom: 0;
  margin-top: 0;

  .panel {
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    min-height: rem-calc(192);
    padding: 0 rem-calc(12) rem-calc(2) rem-calc(12);

    &:first-child {
      padding-top: rem-calc(24);
    }

    .label {
      line-height: $line-height;
      padding-bottom: 0;
    }

    h3 {
      margin-top: 0;
      min-height: rem-calc(48);
    }

    p {
      text-align: justify;
    }

    .debate-content {
      margin: 0;
      min-height: 0;

      .tags {
        display: block;
      }
    }

    .icon-debates {
      font-size: rem-calc(18);
      left: rem-calc(60);
      top: 0;
    }

    .debate-description {
      height: rem-calc(72);
      margin-top: 0;
    }
  }

  .votes {
    border: 1px solid $votes-border;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin: 0 rem-calc(-24) 0 rem-calc(12);

    &:after {
      content: "";
      position: absolute;
      display: block;
      border-style: solid;
      border-color: #166387 transparent transparent transparent;
      bottom: rem-calc(-14);
      border-left-width: 0;
      border-right-color: transparent;
      right: rem-calc(-1);
      border-width: 1em 1em 0 0;
    }

    .total-votes {
      display: block;
      float: none;
      line-height: $line-height;
    }

    .like {

      span {
        color: white;
        display: block;
        line-height: $line-height/2;
      }
    }

    .not-logged {
      line-height: $line-height;
      padding-top: rem-calc(36);
    }
  }
}

// 03. Show
// - - - - - - - - - - - - - - - - - - - - - - - - -

.debate-show {
  background: white;
  padding: rem-calc(24) rem-calc(12) 0;

  .back {
    @include back;
  }

  .icon-angle-left {
   @extend .back;
  }

  h1 {
    clear: both;
    font-size: rem-calc(24);
    font-weight: bold;
    margin: 0;
  }

  .debate-info {
    clear: both;
    color: $text-medium;
    font-weight: lighter;
    line-height: $line-height*2;
    text-align: justify;

    a {
        color: $text-medium;
    }

    p {
      font-size: rem-calc(14);
      line-height: $line-height;
      margin-bottom: 0;
    }
  }

  .author-photo {
    line-height: $line-height*2;
    margin-right: rem-calc(6);
    vertical-align: middle;
    width: 32px;
  }

  .author {
    color: $text;
    font-weight: bold;
  }

  h3 {
    border-top: 1px solid $votes-border;
    display: inline-block;
    font-size: rem-calc(16);
    margin: -1px 0 rem-calc(12);
    padding-top: rem-calc(6);
    text-transform: uppercase;
  }

  .votes {
    @include votes;
    border: 1px solid $votes-border;
    border-radius: rem-calc(3);
    margin: 0;

    .total-votes {
      display: block;
      float: none;
      line-height: $line-height;
    }

    .not-logged {
      line-height: $line-height;
      padding: rem-calc(24);
    }
  }

  .leave-comment {
    display: inline-block;
    margin-top: rem-calc(24);
  }

  .tags {
    display: block;
    margin-top: rem-calc(24);

    a {
      margin-right: rem-calc(6);
    }
  }
}

.bullet {
  color: $border;
}

// 04. New
// - - - - - - - - - - - - - - - - - - - - - - - - -

.debate-new {
  background: white;
  padding-top: rem-calc(24);

  .back {
    @include back;
  }

  h1 {
    clear: both;
    font-size: rem-calc(36);
    font-weight: bold;
    line-height: $line-height*2;
    margin-bottom: rem-calc(24);
  }

  .icon-debates {
    color: $debates;
    font-size: rem-calc(60);
    line-height: $line-height;
    opacity: .5;
  }

  h2 {
    clear: both;
    font-size: rem-calc(20);
    font-weight: bold;
    line-height: $line-height;
    margin: 0;
  }

  .recommendations {
    list-style-type: none;
    margin-left: 0;
    margin-top: rem-calc(24);

    li {
      font-size: rem-calc(12);
      margin: rem-calc(12) 0;

      &:before {
        color: $debates;
        content: "l ";
        font-family: "icons" !important;
      }
    }
  }
}

// 05. Comments
// - - - - - - - - - - - - - - - - - - - - - - - - -

.comments {
  background: $white;
  background-repeat: repeat-x;
  padding-top: rem-calc(24);
  padding-bottom: rem-calc(96);

  h2 {
    margin: 0;
    font-weight: bold;

    span {
      font-size: rem-calc(18);
      font-weight: normal;
      opacity: .8;
    }
  }

  .comment {
    margin: rem-calc(6) 0;

    p {
      margin-bottom: 0;
    }

    .comment-votes {
      color: $text-medium;
      font-weight: lighter;
      margin: rem-calc(15) rem-calc(6) 0;

      a {
        color: $text-light;
        display: inline-block;
        vertical-align: top;

        &:hover {
          color: $text-medium;
        }
      }

      [class^="icon-"] {
        font-size: rem-calc(20);
        vertical-align: top;
      }
    }

    .comment-body {
      margin-left: rem-calc(42);

      .reply {
        background: white;
        border: 1px solid $border;
        font-size: rem-calc(12);
        margin: rem-calc(6) 0;
        padding: rem-calc(6);
      }

      .comment-user {
        margin-top: rem-calc(6);
        padding: rem-calc(6) 0;

        @each $n in ("1", "2", "3","4", "5") {
          &.level-#{$n} {
            @if $n == "5" {
              background: $comment-level-5;
              padding: rem-calc(6) rem-calc(12);
            }
            @elseif $n == "1" {
              background: none;
              padding: rem-calc(6) rem-calc(12);
            }
            @else {
              background: $comment-official;
              padding: rem-calc(6) rem-calc(12);
            }
          }
        }

        &.is-author {
          background: $comment-author;
          padding: rem-calc(6) rem-calc(12);
        }

        &.is-admin {
          background: $comment-admin;
          padding: rem-calc(6) rem-calc(12);
        }

        &.is-moderator {
          @extend .is-admin;
        }
      }
    }

    .comment-children {
      border-left: 1px dashed $border;
      margin-left: rem-calc(42);
      padding-left: rem-calc(6);

      @media only screen and (max-width: 40em) {
        margin-left: rem-calc(16);
      }
    }

    .comment-info {
      color: $text-light;
      font-size: rem-calc(13);
      font-weight: lighter;
      margin-top: rem-calc(6);
      vertical-align: middle;

      span.user-name {
        color: $text;
        font-weight: bold;
      }
    }
  }
}

.faded {
  opacity: 0.4;
}