consul/consul

// Table of Contents
//
// 01. Hero
// 02. Legislation process navigation
// 03. Debate list
// 04. Debate quiz
// 05. Legislation allegations
// 06. Legislation changes
// 07. Legislation comments
// 08. Legislation draft comment
// 09. Legislation proposals
//

// 01. Hero
// --------

.legislation-hero {
  @include full-width-background;

  .title {
    font-weight: bold;
    text-transform: uppercase;
  }

  .description li p {
    display: inline;
  }
}

// 02. Legislation process navigation
// ----------------------------------

.legislation-process-list {
  @include full-width-border(bottom, 1px solid $border);
}

.key-dates {
  list-style-type: none;
  margin: 0 rem-calc(-10);

  @include breakpoint(large) {
    margin: 0;
  }

  li {
    border: 1px solid $border;
    display: block;
    margin: rem-calc(-1) 0;
    min-height: $line-height * 3;
    position: relative;
    vertical-align: top;

    @include breakpoint(large down) {

      &::after {
        content: "\63";
        font-family: "icons" !important;
        font-size: rem-calc(24);
        pointer-events: none;
        position: absolute;
        right: 12px;
        top: 12px;
      }
    }

    @include breakpoint(large) {
      background: #fafafa;
      display: inline-block;
      border-bottom: 0;
      border-top-left-radius: rem-calc(6);
      border-top-right-radius: rem-calc(6);
      margin-bottom: 0;
      margin-right: calc(#{$line-height} / 4);
      margin-top: 0;

      &:hover:not(.is-active) {
        background: $highlight;
      }

      &::after {
        content: "";
      }
    }

    a {
      display: block;
      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);

      @include breakpoint(large) {
        display: inline-block;
      }

      &:hover {
        text-decoration: none;
      }

      h4 {
        margin-bottom: 0;
      }
    }
  }

  span {
    color: $text-medium;
    font-size: $small-font-size;
  }

  .is-active {
    background: $highlight;
    position: relative;

    @include breakpoint(large) {
      background: none;
      border: 1px solid $border;
      border-bottom-color: $body-background;
      z-index: 1;
    }
  }
}

// 03. Debate list
// ----------------

.debate-chooser {
  padding: rem-calc(32) rem-calc(16);

  @include breakpoint(medium) {
    .debate-chooser {
      padding: rem-calc(32) rem-calc(48);
    }
  }

  .debate-block {
    margin-bottom: rem-calc(40);

    .debate-type {
      @include brand-color;
      text-transform: uppercase;
      font-weight: 700;
      font-size: $small-font-size;

      .icon-debates {
        margin-left: rem-calc(3);
      }
    }

    .debate-title a {
      @include brand-color;
    }
  }

  .debate-meta,
  .debate-meta a {
    font-size: $small-font-size;
    color: #6d6d6d;
  }

  .debate-info {
    padding: rem-calc(16);
    background: #f4f4f4;
  }
}

// 04. Debate quiz
// ---------------

.debate-questions {

  .comments {
    margin-top: $line-height * 2.5;
  }

  .quiz-header {
    margin-bottom: $line-height;

    .quiz-title,
    .quiz-next {
      padding: $line-height;

      @include breakpoint(medium) {
        height: $line-height * 4;
      }
    }

    .quiz-title {
      background: $highlight;

      .quiz-header-title {
        font-size: $small-font-size;
        font-weight: 700;
        margin-bottom: 0;
        text-transform: uppercase;
      }

      a {
        @include brand-color;
        @include header-font-size(h4);
        text-decoration: none;
      }
    }

    .quiz-next-link {
      display: block;

      &:hover,
      &:active {
        text-decoration: none;
      }
    }

    .quiz-next {
      @include brand-color;
      background: #ccdbe5;
      font-size: $small-font-size;
      font-weight: bold;
      text-align: right;
      text-transform: uppercase;
      transition: background 0.25s ease-out, background 0.25s ease-out;

      .icon-angle-right {
        vertical-align: middle;
      }

      &:hover,
      &:active {
        @extend %brand-background;
        text-decoration: none;
      }
    }
  }

  .quiz-question {
    @include header-font-size(h2);
    margin-bottom: $line-height;
  }

  .debate-questions {
    position: relative;
    list-style: none;

    .control {
      background: #fff;
      border: 1px solid $border;
      border-radius: rem-calc(4);
      color: #555;
      cursor: pointer;
      display: inline-block;
      margin-bottom: calc(#{$line-height} / 2);
      margin-right: $line-height;
      padding: calc(#{$line-height} / 2)  $line-height * 2;
      position: relative;
    }

    .is-active {
      background: #ccdbe6;
      border: 0;
    }

    .control input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }

    .control input:checked ~ .control-indicator {
      @include brand-background;
      border: 0;
    }

    .radio .control-indicator {
      border-radius: 50%;
    }

    .control-indicator {
      position: absolute;
      top: 15px;
      left: 15px;
      display: block;
      width: rem-calc(16);
      height: rem-calc(16);
      line-height: rem-calc(16);
      font-size: 65%;
      text-align: center;
      border: 2px solid #9c9c9c;
      pointer-events: none;
      user-select: none;
    }
  }
}

// 05. Legislation allegations
// ---------------------------

.draft-panels {
  position: relative;
  padding: rem-calc(32) 0;

  .draft-chooser {

    h3 {
      vertical-align: top;
      display: inline-block;
      font-weight: 400;
      margin-right: rem-calc(8);
    }

    span {
      margin-left: rem-calc(4);
      font-style: italic;
      font-size: $small-font-size;
      color: $text-medium;
      vertical-align: top;
      line-height: rem-calc(37);
    }

    .select-box {
      position: relative;

      @include breakpoint(medium) {
        display: inline-block;
      }

      select {
        margin-bottom: 0;
        display: block;
      }

      span {
        vertical-align: inherit;
        font-style: normal;
      }

      .see-changes {
        color: $text-medium;
        text-decoration: underline;
      }
    }

    .button {
      margin-top: rem-calc(16);

      @include breakpoint(medium) {
        margin-top: 0;
      }
    }
  }

  .draft-allegation {

    @include breakpoint(medium) {
      display: flex;

      .calc-index {
        max-width: calc(35% - 25px);

        .draft-index {
          @supports (position: sticky) {
            max-height: 100vh;
            overflow-y: auto;
            position: sticky;
            top: $line-height;
          }
        }

        > * {
          padding-right: rem-calc(20);
        }
      }

      .calc-text {
        flex: 1;
      }

      .calc-comments {
        min-width: 15rem;
        width: calc(35% - 25px);

        > * {
          padding-left: rem-calc(20);
        }
      }
    }

    .border-right {
      @include breakpoint(medium) {
        border-right: 1px solid $border;
      }
    }

    .border-left {
      @include breakpoint(medium) {
        border-left: 1px solid $border;
      }
    }

    .draft-panel {
      text-transform: uppercase;
      font-weight: 700;
      padding: rem-calc(8) rem-calc(16);
      color: #696969;
      background: #f2f2f2;
      font-size: $small-font-size;

      .icon-comments {
        margin-right: rem-calc(4);
      }

      .icon-banner {
        line-height: 0;
        color: $text-medium;
        vertical-align: sub;
      }
    }

    .draft-index {
      ul:first-child {
        font-size: rem-calc(16);
        text-decoration: underline;
        margin-left: rem-calc(36);
        margin-top: $line-height;
      }

      ul {
        list-style: none;

        li {
          margin-bottom: rem-calc(16);
        }

        .open::before {
          cursor: pointer;
          position: absolute;
          margin-left: rem-calc(-20);
          font-family: "icons";
          content: "\58";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        .closed::before {
          cursor: pointer;
          position: absolute;
          margin-left: rem-calc(-20);
          font-family: "icons";
          content: "\5a";
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      }
    }

    .draft-text {
      position: relative;
      padding: rem-calc(16);

      @include breakpoint(medium) {
        margin: 0 auto;
        max-width: calc(3 * #{$grid-row-width} / 4);
        padding: rem-calc(32) rem-calc(32) rem-calc(32) rem-calc(48);
      }

      table {
        @include table-scroll;
      }

      h2 {
        font-weight: 400;
        margin-bottom: rem-calc(32);
        margin-top: rem-calc(32);
      }

      h3 {
        font-weight: 400;
        margin-bottom: rem-calc(16);
      }

      .anchor::before {
        display: none;
        content: "#";
        color: $text-medium;
        position: absolute;
        left: 0;

        @include breakpoint(medium) {
          left: 24px;
        }
      }

      a {
        color: inherit;

        &:hover,
        &:active,
        &:focus {
          text-decoration: none;

          h3 {
            color: inherit;
          }

          .anchor::before {
            display: block;
          }
        }
      }
    }

    .calc-comments {
      position: relative;
    }

    summary {
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    details:not([open]) {
      background: #f2f2f2;

      @include breakpoint(small only) {
        border-bottom: 1px solid #d4d4d4;
      }

      @include breakpoint(medium) {
        min-width: auto;
        width: rem-calc(50);

        .draft-panel {
          line-height: 1;
          display: block;
          font-size: $small-font-size;
          text-transform: uppercase;
          font-weight: 700;
          color: #696969;
          padding: 0;
          text-align: center;

          .icon-banner::before,
          .icon-comments::before {
            display: block;
            margin: rem-calc(24) auto rem-calc(36);
          }

          .panel-title {
            display: block;
            transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
          }
        }
      }
    }

    .calc-text {
      border-right: 0;

      .show-comments {
        width: 105%;
        background: #fafafa;
        padding: rem-calc(4) rem-calc(40) rem-calc(4) rem-calc(4);
        border: 1px solid $border;
        margin-bottom: rem-calc(16);

        p {
          margin-bottom: 0;
        }
      }

    }

    .calc-comments {
      cursor: auto;

      @include breakpoint(small only) {
        summary {
          display: none;
        }
      }

      &:not([open]) {
        border-left: 1px solid #d4d4d4;
      }

      .comments-box-container {
        position: relative;
        top: rem-calc(180);
      }

      .comment-box {
        padding: rem-calc(4);
        background: #f9f9f9;
        border: 1px solid $border;
        display: block;
        margin-bottom: rem-calc(32);

        .button {
          font-size: $small-font-size;
          padding: rem-calc(10) rem-calc(20);
        }

        .publish-comment {
          float: right;
        }

        .comment-header {
          padding-bottom: rem-calc(8);
          margin-bottom: rem-calc(16);
          border-bottom: 1px solid $border;

          a .icon-expand {
            color: #838383;
            font-size: $small-font-size;
            float: right;
          }
        }

        .comments-wrapper {
          position: relative;
        }

        .comment-input {
          padding-bottom: rem-calc(64);
          margin-bottom: rem-calc(16);
          margin-top: rem-calc(16);
          border-bottom: 1px solid $border;

          .comment-advice {
            border-top: 1px solid #d0d0d0;
            border-right: 1px solid #d0d0d0;
            border-left: 1px solid #d0d0d0;
            width: 100%;
            padding: rem-calc(8);
            display: inline-block;
            font-size: $small-font-size;
            background: #dfdfdf;

            .icon-proposals {
              color: #838383;
            }

            a {
              color: #87a3b9;
              text-decoration: underline;
            }
          }

          textarea {
            border-radius: 0;
            box-shadow: none;
            border-bottom: 1px solid #d0d0d0;
            border-right: 1px solid #d0d0d0;
            border-left: 1px solid #d0d0d0;
            width: 100%;
            height: rem-calc(200);
            margin-bottom: rem-calc(8);
          }

          .comment-actions {
            .cancel-comment {
              color: #87a3b9;
              text-decoration: underline;
              font-size: $small-font-size;
              display: inline-block;
            }
          }
        }

        .comment {
          border-bottom: 1px solid $border;
          padding-bottom: calc(#{$line-height} / 2);
          margin-bottom: rem-calc(16);
          font-size: $small-font-size;

          .comment-text {
            margin-bottom: rem-calc(8);

            p {
              line-height: 1.5;
              font-size: $small-font-size;

              &:last-child {
                margin-bottom: rem-calc(8);
              }
            }
          }

          .comment-meta {

            .comment-more-info {
              display: inline-block;

              .comment-expand {
                display: inline-block;

                &::after {
                  content: "|";
                  color: #838383;
                }
              }

              .comment-replies {
                display: inline-block;
              }
            }

            .comment-votes {
              color: #838383;
              float: right;
              display: inline-block;

              .comment-votes-number {
                margin-right: rem-calc(4);
                display: inline-block;

                &::after {
                  margin-left: rem-calc(4);
                  content: "|";
                }
              }
            }
          }
        }
      }
    }
  }
}

// 06. Legislation changes
// -----------------

.legislation-changes {

  ul {
    list-style: none;
    margin-left: 0;

    li {
      margin-bottom: rem-calc(16);

      &::before {
        margin-right: rem-calc(4);
        content: "—";
      }
    }
  }

  .changes-link {
    display: block;
    margin-left: rem-calc(16);
    font-size: $small-font-size;

    @include breakpoint(medium) {
      display: inline-block;
    }

    a {

      span {
        text-decoration: underline;
      }

      .icon-external {
        text-decoration: none;
        color: #999;
        line-height: 0;
        vertical-align: sub;
        margin-left: rem-calc(8);
      }

      &:active,
      &:focus,
      &:hover {
        text-decoration: none;
      }
    }
  }
}

// 07. Legislation comments
// -----------------

.legislation-comments {

  .comment-section {
    background: #fafafa;
    padding: rem-calc(16);
    border: 1px solid #dee0e3;
    margin-top: rem-calc(4);
    margin-bottom: rem-calc(16);
  }

  .comment {
    margin-bottom: rem-calc(48);

    .expand-context a {
      span {
        text-decoration: underline;
      }

      .icon-expand {
        text-decoration: none;
        color: #999;
        line-height: 0;
      }

      .icon-expand {
        margin-left: rem-calc(4);
      }

      &:active,
      &:focus,
      &:hover {
        text-decoration: none;
      }
    }
  }
}

// 08. Legislation draft comment
// -----------------

.legislation-comment {

  .annotation-share-comment {
    margin-bottom: rem-calc(32);
  }

  .comment-section {
    background: #fafafa;
    padding: rem-calc(16);
    border: 1px solid #dee0e3;
    margin-top: rem-calc(4);
    margin-bottom: rem-calc(16);
  }

  .comment {

    a {
      span {
        text-decoration: underline;
      }

      .icon-expand,
      .icon-comments {
        text-decoration: none;
        color: #999;
        line-height: 0;
      }

      .icon-expand {
        margin-left: rem-calc(4);
      }

      .icon-comments {
        margin-right: rem-calc(4);
      }

      &:active,
      &:focus,
      &:hover {
        text-decoration: none;
      }
    }
  }
}

// 09. Legislation proposals
// -------------------------

.proposal-show {

  &.legislation-proposal-show h1 {
    font-size: rem-calc(24);

    @include breakpoint(medium) {
      font-size: rem-calc(36);
    }
  }
}

.legislation-proposals {
  margin-top: rem-calc(-6);

  .proposal h3 {
    font-size: rem-calc(20);
    margin-top: 0;
  }
}

.process-proposal {
  margin-bottom: $line-height;

  .header {
    background: $highlight;
    padding: $line-height;

    @include breakpoint(medium) {
      height: $line-height * 4;
    }
  }

  .process-title {
    font-size: $small-font-size;
    margin-bottom: 0;
    text-transform: uppercase;
  }

  .process-link {
    font-size: rem-calc(19);
    font-weight: bold;
  }
}

// 10. Legislation summary
// -------------------------

.process-summary {
  > section {
    margin-top: $line-height * 1.5;
    padding: 0 rem-calc(16);
  }

  h4,
  p {
    margin-bottom: 0;
  }

  > section > header,
  .question-title,
  .annotation-title,
  .comment-summary,
  .proposal-summary {
    @include breakpoint(medium) {
      align-items: center;
      display: flex;

      > :first-child {
        $margin: rem-calc(map-get($grid-column-gutter, "medium"));

        margin-right: $margin;
        width: calc(75% - #{$margin});
      }
    }
  }

  .debate-summary,
  .proposal-summary,
  .annotation-summary {
    @extend %panel;
    min-height: auto;
    padding-bottom: rem-calc(16);
    padding-top: rem-calc(16);

    &:not(:last-child) {
      margin-bottom: calc(#{$line-height} / 2);
    }
  }

  .question-title:not(:only-child) {
    margin-bottom: calc(#{$line-height} / 2);
  }

  .annotation-title {
    margin-bottom: calc(#{$line-height} / 2);
    margin-top: calc(#{$line-height} / 2);
  }

  .annotation-quote {
    border: 1px solid $black;
    padding: rem-calc(10);
  }

  .comment-summary {
    margin-bottom: calc(#{$line-height} / 2);

    > :first-child {
      background-color: rgba(217, 216, 243, 0.2);
      border-radius: rem-calc(10);
      padding: rem-calc(12);
    }
  }

  .download-button {
    margin-bottom: 0;
    margin-left: 50%;
    margin-top: $line-height;
    transform: translateX(-50%);
  }
}