consul/consul

// Table of Contents
//
// 01. Global styles
// 02. Header
// 03. Footer
// 04. Tags
// 05. Auth pages
// 06. Forms
// 07. Callout
// 08. User account
// 10. Official levels
// 11. Tables
// 12. Social
// 14. Verification
// 15. Comments
// 16. Flags
// 17. Activity
// 19. Recommendations
// 20. Documents
// 21. Related content
// 22. Images
// 24. Homepage
// 25. LocalCensusRecords
//

// 01. Global styles
// -----------------

* {
  @include normal-selection;
}

html {
  font-size: calc(0.25em + Max(0.75em, 0.75vw));
}

html,
body {
  margin: 0;
}

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-size: $base-font-size;
  min-height: 100%;

  &.public {
    @include breakpoint($global-width) {
      margin-left: $body-margin;
      margin-right: $body-margin;
    }
  }

  > .wrapper {
    flex-grow: 1;
  }
}

main {
  display: block;

  &.budget-groups-index,
  &.budget-investment-new,
  &.debate-new,
  &.proposal-new,
  &.sdg-goals-index,
  &.sdg-goal-show,
  &.topic-edit,
  &.topic-new,
  &.subscriptions-edit {
    @include grid-column-gutter;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-weight: 700;
}

p {
  font-size: $base-font-size;
  font-weight: 400;
  line-height: $base-line;
}

a {
  @include link;
}

a,
button,
[type="button"],
[type="submit"] {
  &:focus {
    @include focus-outline;
  }

  &:focus-visible {
    @include focus-outline;
  }

  &:focus:not(:focus-visible) {
    @include no-outline;
  }

  &:active,
  &:focus:active {
    @include focus-outline;
  }
}

.button {
  @extend %button;

  &.medium {
    font-size: $small-font-size;
  }
}

.button.hollow {
  @include normal-selection;
  @include anchor-color;
  border: 1px solid;

  &:hover,
  &:focus {
    $hover-color: scale-color($anchor-color, $lightness: $button-hollow-hover-lightness);
    color: $hover-color;
    color: var(--anchor-color-hover, $hover-color);
  }
}

.button.hollow.error {
  border-color: $alert-border;
  color: $color-alert;
}

.postfix.button {
  padding: 0;
}

.clear {
  clear: both;
}

.inline {
  display: inline !important;
}

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

.sidebar-divider {
  border-top: 1px solid $border;
  margin-top: $line-height;

  &:first-child {
    margin-top: 0;
  }
}

.margin {
  margin-bottom: $line-height;
  margin-top: $line-height;
}

.margin-top {
  margin-top: $line-height;
}

.margin-bottom {
  margin-bottom: $line-height;
}

.margin-left {
  margin-left: $line-height;
}

.margin-right {
  margin-right: $line-height;
}

.float-right-medium {

  @include breakpoint(medium) {
    float: right !important;
  }
}

.no-margin-top {
  margin-top: rem-calc(-24);
}

.padding {
  padding-bottom: $line-height;
  padding-top: $line-height;
}

.padding-top {
  padding-top: $line-height;
}

.light {
  background: $light;
}

.highlight {
  background: $highlight;
}

.icon-check {
  color: $check;
}

.menu.simple {
  border-bottom: 1px solid $border;
  clear: both;
  margin-bottom: calc(#{$line-height} / 2);

  li {
    font-size: $base-font-size;
    margin-bottom: 0;
    margin-right: calc(#{$line-height} / 2);

    @include breakpoint(medium) {
      margin-right: $line-height * 1.5;
    }

    a {
      @include text-colored-link;
      display: inline-block;
      font-weight: bold;
      position: relative;
      text-align: left;
    }

    + li {
      margin-left: 0;
    }

    &.is-active {
      @include brand-color;
      border-bottom: 2px solid;
      padding-bottom: rem-calc(1);
    }

    &:not(.is-active) {
      margin-bottom: calc(#{$line-height} / 3);
    }
  }

  h2 {
    font-size: $base-font-size;
  }
}

.menu.vertical {
  margin: $line-height 0;
  padding: $line-height 0;

  li {
    margin-bottom: $line-height;

    a {
      color: $text-medium;
      padding: 0;

      &.is-active {
        @include brand-color;
        font-weight: bold;
      }
    }

    h2 {
      font-size: $base-font-size;
    }

    &.is-active {
      @include brand-color;
      border-bottom: 2px solid;
    }
  }

  &.no-margin-top {
    margin-top: 0;
  }

  &.no-padding-top {
    padding-top: 0;
  }
}

.small {
  font-size: $small-font-size;
}

.relative {
  position: relative;
}

.logo {
  @include logo;
}

.close-button {
  top: calc(#{$line-height} / 2);
}

.back,
.icon-angle-left {
  clear: both;
  color: $text-medium;
  display: inline-block;
  padding-right: calc(#{$line-height} / 2);
}

.back:not([class^="icon-"]) {
  text-decoration: underline;
}

.tabs-content {
  border: 0;
}

.tabs {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin-bottom: $line-height;

  .tabs-title {
    font-size: $base-font-size;
    margin-right: $line-height;
  }

  .tabs-title > a {
    color: $text-medium;
    position: relative;

    &:hover {
      @include brand-color;
      background: none;
      text-decoration: none;
    }

    &[aria-selected="true"],
    &.is-active {
      @include brand-color;
      border-bottom: 0;
      font-weight: bold;

      &::after {
        border-bottom: 2px solid;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        width: 100%;
      }
    }
  }

  h2,
  h3 {
    font-size: $base-font-size;
  }
}

.button.float-right ~ .button.float-right {
  margin: 0 calc(#{$line-height} / 2);
}

.pagination .current {
  @extend %brand-background;
}

.pagination li {
  display: inline-block;
}

.truncate-horizontal-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.table {
  display: table;
}

.table-cell {
  display: table-cell;
}

.uppercase {
  text-transform: uppercase;
}

.help-text {
  line-height: rem-calc(20);
  margin-top: 0;

  strong {
    font-style: normal;
  }
}

.menu-and-content {
  $side-menu-min-width: rem-calc(240);

  @include breakpoint(medium) {
    display: flex;

    > nav {
      flex: 20%;
      min-width: $side-menu-min-width;
      max-width: max-content;

      + * {
        flex: 80%;
        padding: $line-height;
      }
    }

    [for="show_menu"] {
      display: none;
    }
  }

  @include breakpoint(small only) {
    > nav {
      height: 100%;
      left: -$side-menu-min-width;
      overflow-y: auto;
      position: fixed;
      top: 0;
      transition: left 0.5s ease;
      width: $side-menu-min-width;
      z-index: 12;

      + * {
        padding: $line-height;
      }
    }

    [name="show_menu"]:checked + nav,
    > nav:focus-within {
      left: 0;

      + * {
        overflow-x: hidden;

        [for="show_menu"]::after {
          @include reveal-overlay;
          content: "";
          cursor: pointer;
          display: block;
          z-index: 11;
        }
      }
    }
  }

  [name="show_menu"] {
    display: none;
  }
}

// 02. Header
// ----------

body > header,
.wrapper > header {
  @include grid-column-gutter;
  margin-bottom: $line-height;

  @include breakpoint(small down) {
    position: relative;
    z-index: 10;
  }

  .selected {
    border-bottom: 1px solid #fff;
  }

  .external-links {
    padding: rem-calc(6) 0;
    text-align: center;
  }

  h1 a {
    color: inherit;
  }
}

.public > .wrapper > header,
.proposal-dashboard > header {
  @include full-width-border(bottom, 1px solid $border);

  > * {
    @include full-width-background($adjust-padding: true);
  }

  .top-bar {
    @include background-with-text-contrast($main-header, [main-header, brand]);
  }
}

.proposal-dashboard > header {

  @include breakpoint($global-width) {
    margin-left: $body-margin;
    margin-right: $body-margin;
  }
}

.top-bar {
  align-items: center;
  display: flex;
  padding-bottom: $topbar-padding;
  padding-top: $topbar-padding;

  @include breakpoint(small only) {
    flex-direction: row-reverse;
    flex-wrap: wrap;

    .responsive-menu {
      width: 100%;

      a {
        display: inline-block;
      }
    }

    [data-responsive-toggle] {
      flex-grow: 1000;
    }
  }

  h1 {
    flex-grow: 1;
    line-height: $line-height;
    margin-bottom: 0;

    a img {
      height: rem-calc(48);
      margin: 0;
      width: auto;

      @include breakpoint(medium up) {
        height: auto;
      }
    }
  }
}

.menu-button {
  border: 1px solid;
  border-radius: $button-radius;
  color: inherit;
  padding: 0.6em;
}

.menu-icon {
  @include hamburger($color: currentcolor, $color-hover: currentcolor);
  cursor: inherit;
}

.dropdown.menu > li {

  a {
    background: none;
  }

  &.is-active > a {
    color: inherit;
  }

  &.is-dropdown-submenu-parent > a::after {
    border-top-color: currentcolor;
  }
}

.top-links {
  @include background-with-text-contrast($top-links, [top-links, brand-secondary]);
  display: flex;
  flex-wrap: wrap;
  font-size: $small-font-size;

  > :first-child {
    flex-grow: 1;
  }

  a {
    color: inherit;
    margin: 0 rem-calc(6);

    &:hover {
      text-decoration: underline;
    }
  }

  ul {
    margin-bottom: 0;
  }

  li {
    display: block;

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

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

      &:last-child::after {
        content: none;
      }
    }
  }
}

.submenu {
  border-bottom: 1px solid $border;
  clear: both;
  margin-bottom: calc(#{$line-height} / 2);

  a {
    @include text-colored-link;
    display: inline-block;
    font-weight: bold;
    margin-right: calc(#{$line-height} / 2);
    position: relative;
    text-align: left;

    @include breakpoint(medium) {
      margin-right: $line-height;
    }
  }

  .is-active {
    @include brand-color;
    border-bottom: 2px solid;

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

  h2 {
    font-size: $base-font-size;
  }
}

.search-form-header [type=text] {
  max-width: none;
}

// 03. Footer
// ----------

footer {
  .logo {
    color: inherit;
  }

  .logo a {
    font-family: "Lato" !important;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  p {
    font-size: $small-font-size;

    &.info a {
      text-decoration: underline;
    }
  }

  a,
  a:active,
  a:focus {
    color: inherit;
    text-decoration: underline;

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

  .footer-sections {
    padding-left: 0;
  }

  .title {
    font-weight: bold;
    text-decoration: none;
  }
}

.footer {
  @include background-with-text-contrast($footer, footer);
  clear: both;
  margin-top: $line-height * 2;
  padding-bottom: $line-height;
  padding-top: $line-height;

  .public & {
    @include full-width-background;
  }
}

.subfooter {
  border-top: 1px solid $text-light;
  font-size: $small-font-size;
  padding-top: calc(#{$line-height} / 2);

  .legal {
    display: inline-block;
    margin-#{$global-left}: 0;

    &::before {
      content: "|";
    }

    li {
      display: inline-block;

      &::after {
        content: "|";
        margin-left: 4px;
      }

      &:last-child::after {
        content: none;
      }
    }
  }
}

// 04. Tags
// --------

.tag-cloud a,
.categories a,
.geozone a,
.sidebar-links a {
  @extend %tag;
}

.categories a,
.geozone a {
  @include anchor-color;
  background: $highlight;

  &:hover,
  &.is-active {
    @extend %brand-background;
  }
}

.sidebar-title {
  @include brand-border(top, 2px);
  display: inline-block;
  font-size: rem-calc(16);
  font-weight: bold;
  margin: -1px 0 calc(#{$line-height} / 2);
  padding-top: calc(#{$line-height} / 4);
  text-transform: uppercase;
}

// 05. Auth pages
// --------------

.auth-page {

  .footer {
    margin-top: 0;
  }
}

.auth-image {
  @include brand-background;
  background-repeat: no-repeat;
  background-size: cover;

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

  h1 {
    margin-top: $line-height;

    a {
      color: inherit;
      display: block;
      text-align: center;

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

.auth-form {

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

  p,
  a,
  .checkbox {
    font-size: $small-font-size;
  }
}

.auth-divider {
  border-top: 1px solid $border;
  margin-top: $line-height * 1.5;
  text-align: center;

  span {
    background: $body-background;
    box-decoration-break: clone;
    font-weight: bold;
    padding: 0 calc(#{$line-height} / 2);
    position: relative;
    top: calc(#{-$line-height} / 2);
  }
}

// 06. Forms
// ---------

form {

  label {
    font-size: $base-font-size;
    font-weight: bold;
    line-height: $line-height;
  }

  .checkbox-label {
    display: table;
  }

  fieldset legend {
    font-weight: bold;
  }

  [type="radio"] {
    height: $line-height !important;
    vertical-align: top;

    + label {
      font-weight: normal;
    }

    &:checked + label {
      font-weight: bold;
    }
  }

  [type]:not([type="button"], [type=checkbox], [type=file], [type=radio], [type=submit]) {
    background: #f8f8f8;
    height: $input-height;
    margin-bottom: rem-calc(16);

    &.error {
      margin-bottom: rem-calc(1);
    }

    &:disabled {
      background-color: $input-background-disabled;
    }
  }

  [type="checkbox"] + label,
  [type="radio"] + label {
    margin-right: 0;
  }

  [type=file] {
    margin: calc(#{$line-height} / 2) 0 calc(#{$line-height} / 2) calc(#{$line-height} / 4);
  }

  .cke {
    margin-bottom: $line-height;
  }

  .html-area:not(.form-error) {
    height: 272px;
    margin-bottom: $line-height;

    &.admin {
      height: 572px;
    }
  }

  .checkbox,
  .radio {
    font-weight: normal;
    line-height: $line-height;
    vertical-align: middle;
  }
}

.translatable-fields {

  &.highlight {
    display: inline-block;
    padding-top: $line-height;
    width: 100%;
  }
}

.translation-locale {
  padding-top: $line-height;
}

// 07. Callout
// -----------

.callout-slide {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: slide;
}

@keyframes slide {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.notice-container {
  min-width: $line-height * 12;
  right: 24px;
  top: 24px;

  @include breakpoint(medium) {
    position: absolute;
  }

  .notice {
    height: $line-height * 4;

    .notice-text {
      width: 95%;
    }
  }
}

.callout {
  font-size: $small-font-size;
  overflow: hidden;

  a:not(.button) {
    font-weight: bold;
    text-decoration: underline;
  }

  &.success,
  &.notice {
    background-color: $success-bg;
    border-color: $success-border;
    color: $color-success;
  }

  &.primary {
    @include info-colors;
  }

  &.warning {
    background-color: $warning-bg;
    border-color: $warning-border;
    color: $color-warning;
  }

  &.alert,
  &.error {
    background-color: $alert-bg;
    border-color: $alert-border;
    color: $color-alert;
  }

  .close {
    text-decoration: none !important;
  }

  .button {
    margin-bottom: 0;
  }
}

.no-error {
  background: $success-bg;
  color: $color-success;
}

.error {
  background: $alert-bg;
  color: $color-alert;
  display: inline-block;
  margin: 0 calc(#{$line-height} / 4);

  a {
    color: $color-alert;
  }
}

.callout {

  &.highlight,
  &.light {
    border: 0;
  }
}

// 08. User account
// ----------------

.account {

  select {
    height: $line-height * 2;
    margin-right: calc(#{$line-height} / 2);
  }

  .final-votes-info {
    background: $warning-bg;
    border: 1px solid $warning-border;
    color: $color-warning;
    margin-top: $line-height;
    padding: calc(#{$line-height} / 2);

    ul li {
      margin: calc(#{$line-height} / 2) 0;
    }

    .icon-box {
      color: #d4a26d;
      font-size: rem-calc(120);
      line-height: rem-calc(120);
      vertical-align: top;
    }
  }
}

.avatar,
.admin-avatar,
.moderator-avatar,
.initialjs-avatar {
  border-radius: rem-calc(1000);
  position: relative;
}

.author-deleted,
.user-deleted {
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  font-size: rem-calc(32);
  line-height: rem-calc(32);
  height: rem-calc(32);
  vertical-align: top;
}

.notifications-list {
  position: relative;

  &::before {
    background: $border;
    content: "";
    height: 100%;
    left: 7px;
    position: absolute;
    top: 2px;
    width: 2px;
  }
}

.notification {
  border: 1px solid $border;
  display: block;
  margin-bottom: calc(#{$line-height} / 4);
  margin-left: $line-height;
  padding: calc(#{$line-height} / 2) $line-height;
  position: relative;

  @include breakpoint(medium) {

    .mark-notification {
      position: absolute;
      right: 12px;
      top: 12px;
    }
  }

  &.unread {
    background: $highlight-soft;
    border: 1px solid $highlight;

    &:hover {
      background: $highlight;
    }
  }

  .notification-link {
    @include text-colored-link;
    display: inline-block;
  }

  &:hover {

    a {
      text-decoration: none;
    }

    &::before {
      content: "\43";
    }
  }

  &::before {
    @include brand-color;
    background: $body-background;
    content: "\4d";
    font-family: "icons" !important;
    font-size: $small-font-size;
    height: rem-calc(20);
    left: -24px;
    line-height: rem-calc(20);
    position: absolute;
    text-align: center;
    width: rem-calc(20);
  }

  p {
    margin-bottom: 0;
    max-width: 80%;
  }

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

// 10. Officials levels
// --------------------

.level-1,
.level-2,
.level-3,
.level-4,
.level-5,
.is-author,
.is-association {
  color: #000;
}

.is-author {
  background: #00a5f1;
}

.is-association {
  background: #e38d83;
}

.level-1 {
  background: #1abc9c;
}

.level-2,
.level-3,
.level-4 {
  background: #43ac6a;
}

.level-5 {
  background: #f08a24;
}

// 11. Tables
// ----------

table {
  border: $border;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;

  th {
    background: #f8f9fb;
  }

  tr {

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

    &:nth-child(odd) {
      background: $table-background;
    }

    &:nth-child(even) {
      background: adjust-color($table-background, $red: -3, $green: -1, $blue: -2);
    }
  }

  .button {
    margin: 0;
  }
}

.table-for-mobile {

  @include breakpoint(medium down) {
    th,
    td {
      display: block;
      text-align: left;
    }
  }
}

// 12. Social
// ----------

.button.button-twitter,
.button.button-facebook,
.button.button-google,
.button.button-wordpress {
  color: inherit;
  font-weight: bold;

  &::before {
    font-size: rem-calc(24);
    margin-right: $font-icon-margin;
  }
}

.button.button-twitter {
  @include has-fa-icon(twitter, brands);
  background: #ecf7fc;
  border-left: 3px solid #45b0e3;

  &::before {
    color: #45b0e3;
  }
}

.social-share-button .ssb-icon {
  background-image: none;
  color: #fff;
  height: $icon-width;
  line-height: $icon-width;
  text-align: center;
  width: $icon-width;

  &::before {
    font-size: calc(#{$icon-width} / 2);
    margin-right: 0;
  }

  &:hover,
  &:focus {
    background: #fff;
  }
}

.ssb-twitter {
  @include has-fa-icon(twitter, brands);
  background: #45b0e3;

  &:hover,
  &:focus {
    color: #40a2d1;
  }
}

.button.button-facebook {
  @include has-fa-icon(facebook-f, brands);
  background: #ebeef4;
  border-left: 3px solid #3b5998;

  &::before {
    color: #3b5998;
  }
}

.ssb-facebook {
  @include has-fa-icon(facebook-f, brands);
  background: #3b5998;

  &:hover,
  &:focus {
    color: #354f88;
  }
}

.button.button-google {
  @include has-fa-icon(google, brands);
  background: #fcedea;
  border-left: 3px solid #de4c34;

  &::before {
    color: #de4c34;
  }
}

.button.button-wordpress {
  @include has-fa-icon(wordpress, brands);
  background: #dcdde3;
  border-left: 3px solid #2f2f33;

  &::before {
    color: #2f2f33;
  }
}

.ssb-telegram {
  @include has-fa-icon(telegram-plane, brands);
  background: #08c;

  &:hover,
  &:focus {
    color: #40a2d1;
  }
}

.ssb-whatsapp_app {
  @include has-fa-icon(whatsapp, brands);
  background: #43d854;

  &:hover,
  &:focus {
    color: #43d854;
  }
}

@include breakpoint(medium) {

  .ssb-telegram,
  .ssb-whatsapp_app {
    display: none !important;
  }
}

.share-supported {
  text-align: center;

  .social-share-button {
    display: inline-block;
  }
}

// 14. Verification
// ----------------

.verification {

  @include breakpoint(medium) {
    .left + .left {
      margin-left: calc(#{$line-height} / 2);
    }
  }

  .date-of-birth {

    select {
      float: left;
      width: 30%;

      @include breakpoint(medium) {
        width: 25%;
      }
    }
  }

  .progress {
    height: $line-height * 3;

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

    &.success .meter {
      float: none;
    }
  }

  .verification-step {
    background: #f6f6f6;
    font-weight: bold;
    line-height: rem-calc(20);
    padding-top: calc(#{$line-height} / 4);
    text-transform: uppercase;
    vertical-align: top;

    @include breakpoint(medium) {
      line-height: $line-height * 2;
      padding: 0;
    }

    .number {
      display: block;

      @include breakpoint(medium) {
        background-color: #fff;
        border-radius: rem-calc(30);
        color: #43ac6a;
        display: inline-block;
        height: rem-calc(30);
        line-height: rem-calc(30);
        vertical-align: middle;
        width: rem-calc(30);
      }
    }

    &.is-active {
      background: #43ac6a;
      color: #fff;
    }
  }

  .button + form {
    display: inline-block;
    margin-left: calc(#{$line-height} / 2);
  }

  .verification-list {
    font-size: rem-calc(13);
    list-style-type: none;
    margin-left: 0;

    span {
      display: inline-block;
      min-width: $line-height * 12;
    }
  }
}

.verification-step .completed {
  background: #43ac6a;
  color: rgba(255, 255, 255, 0.5);

  .number {
    opacity: 0.5;
  }
}

.verify {
  margin-bottom: $line-height * 2;
  margin-top: $line-height;

  h1 {
    color: $check;

    .icon-check {
      line-height: rem-calc(30);
      vertical-align: middle;
    }
  }

  .letter-divider {
    border-top: 1px solid #ddd;
    clear: both;
    height: 0;
    margin: rem-calc(24) 0;
    position: relative;

    .icon-letter {
      background: $body-background;
      color: $color-info;
      font-size: rem-calc(24);
      margin-left: -27px;
      padding: 0 calc(#{$line-height} / 2);
      position: absolute;
      top: -12px;
    }
  }
}

// 15. Comments
// ------------

.comments {
  padding-bottom: $line-height * 4;

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

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

  .order-links {
    margin-bottom: $line-height;
    margin-top: $line-height;
  }

  .comment {
    line-height: $list-lineheight;
    margin: calc(#{$line-height} / 4) 0;
    position: relative;

    p {
      margin-bottom: 0;
    }

    [class^="icon-"] {
      font-size: $base-font-size;
      text-decoration: none;
      vertical-align: sub;
    }
  }
}

.comment-body,
.notification-body {

  img,
  svg {
    margin-#{$global-right}: calc(#{$line-height} / 2);
  }

  .reply {
    border: 1px solid $border;
    border-left: 0;
    border-right: 0;
    font-size: $small-font-size;
    margin: calc(#{$line-height} / 4) 0;
    padding: calc(#{$line-height} / 4);
    position: relative;

    &:empty {
      display: none;
    }

    .divider {
      color: $text-light;
      display: inline-block;
    }

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

  .responses-count {
    .show-children {
      @include has-fa-icon(plus-square, regular);
    }

    .collapse-children {
      @include has-fa-icon(minus-square, regular);
    }

    .show-children::before,
    .collapse-children::before {
      margin-right: $font-icon-margin;
      transform: translateY(-1px);
    }

    &.collapsed {

      .collapse-children {
        display: none;
      }
    }

    &:not(.collapsed) {

      .show-children {
        display: none;
      }
    }
  }

  .delete-comment {
    @include has-fa-icon(trash-alt, regular);

    &:not(:hover):not(:active) {
      color: $delete;
    }

    &::before {
      margin-right: $font-icon-margin;
      transform: translateY(-1px);
    }
  }

  .comment-user {
    margin-top: calc(#{$line-height} / 4);
    padding: calc(#{$line-height} / 4) 0;
    overflow: hidden;

    &.level-1,
    &.level-2,
    &.level-3,
    &.level-4,
    &.level-5,
    &.is-author,
    &.is-admin,
    &.is-moderator {
      background: rgba(70, 219, 145, 0.3);
      padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
    }

    &.level-1 {
      background: none;
    }

    &.level-5 {
      background: rgba(255, 241, 204, 1);
    }

    &.is-author,
    &.is-admin,
    &.is-moderator {
      background: rgba(45, 144, 248, 0.15);
    }
  }
}

.comment-list {
  margin: calc(#{$line-height} / 4) 0;

  .comment-list {
    border-left: 1px dashed $border;
    display: inline-block;
    padding-left: rem-calc(8);
    width: 100%;

  }

  .comment-form {
    display: none;
  }

  &:empty {
    display: none;
  }
}

.comment-info {
  display: inline-block;
  font-size: $small-font-size;
  line-height: rem-calc(32); // Same as avatar height

  .user-name {
    font-weight: bold;
  }
}

.comment-votes {

  button,
  form {
    color: $dark-gray;
    display: inline-block;
  }

  button {
    font-size: $base-font-size;

    &:hover {
      cursor: pointer;
    }
  }

  @mixin like-unlike-icon($icon, $pressed-color) {
    @include has-fa-icon($icon, regular);

    &[aria-pressed=false]:hover,
    &[aria-pressed=true]:not(:hover) {
      @include has-fa-icon($icon, solid);
    }

    &[aria-pressed=true] {
      color: $pressed-color;
    }
  }

  .in-favor,
  .against {
    display: inline;
  }

  .in-favor button {
    @include like-unlike-icon(thumbs-up, $like);
  }

  .against button {
    @include like-unlike-icon(thumbs-down, $unlike);
  }
}

.faded {
  opacity: 0.4;
}

.comment-form {
  display: inline-block;
  width: 100%;
}

// 16. Flags
// ---------

.flag-content {

  button {
    @include link;
  }
}

.flag-disable,
.flag-active {
  line-height: 0;
}

.flag-disable {
  color: $text-medium;
}

.flag-active {
  color: $delete;
}

.dropdown-pane a {
  color: $text-medium;
}

// 17. Activity
// ------------

.activity {

  .retired {
    text-decoration: line-through;
  }
}

.public-interests {

  li {
    margin-right: calc(#{$line-height} / 4);

    span {
      background: none;
      border: 1px solid #ececec;
    }
  }
}

.following {

  .follow-list {
    list-style-type: circle;
    padding: calc(#{$line-height} / 2);

    li {
      margin-bottom: calc(#{$line-height} / 2);
      margin-left: $line-height;
    }
  }

  h3 {
    font-size: rem-calc(24);
    margin-top: $line-height;
    padding-left: rem-calc(30);
    position: relative;

    span {
      left: 0;
      position: absolute;
      top: 2px;
    }
  }

  .interests {

    @include breakpoint(medium) {
      border-left: 1px solid #ececec;
      padding-left: $line-height;
    }
  }
}

// 19. Recommendations
// -------------------

.section-recommended {
  background: #fafafa;
  border-top: 1px solid $border;
  margin-bottom: rem-calc(-48);
  padding: $line-height 0;

  h2 {
    margin-bottom: 0;
  }

  p {
    margin-bottom: $line-height * 2;
  }

  .debates,
  .proposals,
  .budget-investments {

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

    @include breakpoint(small) {
      margin-bottom: $line-height;
    }

    .button.hollow {
      margin-top: rem-calc(15);
    }
  }

  .card {
    padding: calc(#{$line-height} / 2);

    .card {
      border: 0;
    }

    .card-section {
      margin: 0 auto;
      max-width: none;
      padding: 0;

      p {
        font-size: $base-font-size;
        text-align: left;
      }
    }

    .orbit {
      height: rem-calc(300);

      .orbit-wrapper {
        max-height: rem-calc(250);
        overflow: hidden;
        position: relative;
      }

      .orbit-bullets {
        @include orbit-bullets;
        width: 100%;
      }
    }
  }

  .card .orbit .orbit-wrapper .truncate {
    background: image-url("truncate.png");
    background-repeat: repeat-x;
    bottom: 0;
    height: rem-calc(20);
    position: absolute;
    width: 100%;
  }

  .debates-inner,
  .proposals-inner,
  .budget-investments-inner {
    max-height: rem-calc(350);

    @include breakpoint(small) {
      max-height: rem-calc(400);
    }

    h4 {
      margin-top: 0;
      margin-bottom: $line-height;
      font-size: rem-calc(18);
      min-height: 0;
    }

    h5 {
      font-size: $small-font-size;
      text-align: left;
    }
  }

  .carousel-image {

    .card .orbit {
      height: rem-calc(480);

      .orbit-wrapper {
        max-height: rem-calc(450);
      }
    }

    .debates,
    .proposals {

      a {
        display: block;
        margin-top: $line-height;
      }
    }

    .debates-inner,
    .proposals-inner,
    .budget-investments-inner {
      border: 1px solid $border;
      padding: $line-height;
      margin-right: $line-height;
      max-height: rem-calc(500);

      @include breakpoint(small) {
        max-height: rem-calc(600);
      }
    }
  }

  .carousel-image .orbit-wrapper img {
    display: block;
    height: rem-calc(120);

    @include breakpoint(small) {
      margin: 0 auto;
    }
  }
}

.recommended-index {
  @include full-width-background;
  @include full-width-border(bottom, 1px solid #eee);
  @include full-width-border(top, 1px solid #fafafa);
  background: #fafafa;
  margin-bottom: $line-height;
  margin-top: rem-calc(-25);
  padding: $line-height 0 calc(#{$line-height} / 2);

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

  h2 {
    font-size: $small-font-size;
    text-transform: uppercase;
  }

  h3 {
    font-size: $base-font-size;
    margin-bottom: 0;
  }

  a {

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

  .recommendation {
    @include card;
    background: $body-background;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    display: block;
    margin-bottom: calc(#{$line-height} / 4);
    padding: calc(#{$line-height} / 2);
    z-index: 1;

    &:hover:not(:focus-within) {
      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
    }
  }
}

.hide-recommendations {
  color: $text-light;
  position: absolute;
  right: 12px;
  top: -18px;
  z-index: 2;
}

// 20. Documents
// -------------

.additional-document-link {
  background: $highlight-soft;
  border: 1px solid $highlight;
  display: block;
  margin: calc(#{$line-height} / 2) 0;
  padding: calc(#{$line-height} / 2);
  position: relative;

  a {
    word-wrap: break-word;
  }

  > :first-child {
    @include has-fa-icon(file, regular);
  }
}

.document-divider {
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

// 21. Related content
// -------------------

.related-content {
  border-top: 1px solid $border;

  h2 {
    font-size: rem-calc(24);

    span {
      color: #4f4f4f;
      font-weight: normal;
    }
  }
}

.add-related-content {
  @include link;
  display: block;
  margin-bottom: $line-height;

  @include breakpoint(medium) {
    float: right;
  }

  &[aria-expanded="false"] + form {
    display: none;
  }
}

.relate-content-score {
  display: block;

  @include breakpoint(medium) {
    text-align: center;
  }

  a {
    font-weight: bold;
    margin-right: $line-height;
    text-decoration: none;

    &.score-positive {
      @include has-fa-icon(check, solid);
      color: $color-success;
    }

    &.score-negative {
      @include has-fa-icon(times, solid);
      color: $color-alert;
    }

    &::before {
      margin-right: $font-icon-margin;
    }
  }
}

// 22. Images
// -----------------

.button {

  &.upload-image {
    @include has-fa-icon(image, solid);
  }

  &.upload-document {
    @include has-fa-icon(file, solid);
  }

  &.upload-image,
  &.upload-document {
    font-weight: bold;
    margin-bottom: $line-height * 1.5;

    &::before {
      $button-padding-left: nth($button-padding, 2);
      margin-left: calc(#{-$button-padding-left} / 2);
      margin-right: calc(#{$button-padding-left} / 2);
    }
  }
}

// 24. Homepage
// ------------

.home-page,
.custom-page,
.sdg-goal-show,
.sdg-goals-index {

  a {

    p {

      &.description {
        color: $body-font-color;
        word-wrap: break-word;
      }
    }
  }

  .background-header {
    clip-path: ellipse(60% 80% at 50% 0%);
    height: $line-height * 2;
    background: $highlight;
    margin-top: rem-calc(-48);

    @include breakpoint($global-width) {
      margin-left: calc(#{$full-width-margin});
      margin-right: calc(#{$full-width-margin});
    }
  }

  .cards-container {
    display: flex;
    flex-wrap: wrap;

    .card a {
      height: 100%;
    }
  }

  .card {
    border: 0;
    flex-grow: 0;
    overflow: visible;

    a {
      .figure-card img {
        transition-duration: 0.3s;
        transition-property: transform;
      }
    }

    a:hover:not(:focus) {
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
      text-decoration: none;

      .figure-card img {
        transform: scale(1.1);
      }
    }

    p,
    .sdg-tag-list {
      padding: 0 calc(#{$line-height} / 4);
    }
  }

  h2 {
    &.title {
      @include header-font-size(h3);
    }
  }

  h2,
  h3 {

    &.title {
      @include brand-border(top, 4px);
      display: inline-block;
      margin-bottom: 0;
      padding: calc(#{$line-height} / 2) 0;
    }
  }

  figure img {
    height: 100%;
    width: 100%;
  }
}

.home-page .feeds-participation {
  @include grid-column-gutter;
}

.feeds-list {

  a {

    &.see-all {
      border-bottom: 1px solid $border;
      display: block;
      font-size: $small-font-size;
      margin: $line-height 0 calc(#{$line-height} / 2);
      text-align: right;
      width: 100%;
    }
  }
}

.figure-card {
  display: flex;
  margin: 0 0 $line-height;
  overflow: hidden;
  position: relative;

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

  @include breakpoint(medium) {
    max-height: rem-calc(185);
  }

  @include breakpoint(large) {
    min-height: rem-calc(185);
  }

  .gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 1) 100%);
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 2;
  }

  img {
    height: 100%;
    width: 100%;
  }

  figcaption {
    bottom: 0;
    color: #fff;
    font-size: rem-calc(24);
    line-height: rem-calc(24);
    text-transform: uppercase;
    padding: calc(#{$line-height} / 4) calc(#{$line-height} / 2);
    position: absolute;
    width: 100%;
    z-index: 3;

    h3 {
      font-size: $base-font-size;

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

      @include breakpoint(large) {
        font-size: rem-calc(24);
        line-height: rem-calc(24);
      }
    }

    span {
      @extend %body-colors;
      border-radius: rem-calc(4);
      display: inline-block;
      font-size: $small-font-size;
      font-weight: bold;
      margin-bottom: calc(#{$line-height} / 4);
      padding: rem-calc(4) rem-calc(8);
    }
  }
}

// 25. Local Census Records
// ------------------------

.local-census-record-new,
.local-census-record-edit {

  .date-of-birth {
    select {
      float: left;
      width: 30%;
      margin-right: calc(#{$line-height} / 4);
    }
  }
}