.translate {
  font-size: $font-size-xs;
  font-family: $font-family6;
  display: flex;
  align-items: baseline;

  .translate-button {
    margin: 5px;
    text-transform: uppercase;
    cursor: pointer;

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

.choose-content-locale-form {
  .modal-body {
    text-align: left !important;
  }
}

.proposals,
.posts {
  .post-body .body {
    font-family: $font-family4;
    color: $post-text-color;
    line-height: 1.6em;
    word-wrap: break-word;
    text-align: left;

    &.truncate {
      position: relative;
      height: 4.5em; // two lines
      overflow: hidden;

      p {
        margin-block-end: 0; // to ensure line height, prevent space between blocks when truncated
        margin-block-start: 0;
      }
    }

    &.truncate:after {
      content: '';
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }
  }

  .read-more {
    font-family: $font-family4;
    font-weight: bold;
    margin-bottom: 24px;
    margin-right: 12px;
    cursor: pointer;
    text-align: right;
  }
}

.proposals {
  .custom-overlay {
    display: inline-block;
  }

  .box {
    border-bottom: $navbar-border;
    border-left-style: solid;
    border-left-width: 4px;
    border-right: $navbar-border;
    border-top: $navbar-border;
    margin: 0 auto 40px;
    max-width: 1200px;
    padding: 0;
    position: relative;
    text-align: center;

    &.pending {
      border-left: 4px solid $orange;
    }
  }

  .statistics-container {
    height: 70%;
  }

  .user {
    text-align: left;

    &.pending {
      color: $orange3;
    }
  }

  .translate {
    padding: 20px 0 0 50px;
  }

  .post-footer {
    border-top: $navbar-border;
    padding: 0;
    display: flex;
    justify-content: space-between;

    &.pending {
      display: flex;
      justify-content: flex-end;
    }

    .sentiments {
      font-family: $font-family4;
      padding-top: 15px;
    }

    .actions {
      display: inline-flex;
      margin: 15px;
    }

    .assembl-icon-check-box-declined:before {
      font-size: 20px;
    }

    .answer-form-inner .form-group {
      margin: 13px 0 0;
      border-style: solid;
      border-width: 1px;
    }
  }

  .overflow-action {
    cursor: pointer;
    margin: 20px 3px 0;
    border: none;
    background-color: transparent;
  }

  .stat-sentiment {
    padding: 0 0 0 3px;
  }

  .min-sentiment {
    display: inline-block;
    font-family: $font-family4;
    font-size: $font-size-xxs;
    text-align: left;
    width: 60px;

    svg {
      vertical-align: bottom;
    }

    .txt {
      font-size: 12px;
      line-height: 12px;
      padding: 0 0 0 5px;
    }
  }

  .totalSentimentsCount {
    font-family: $font-family3;
    font-size: $font-size-sm;
    letter-spacing: initial;
    margin: 0 0 0;
    position: absolute;
    top: 30%;
    width: 100%;
  }

  .sentimentsCountLabel {
    font-family: $font-family4;
    font-size: $font-size-xxs;
    letter-spacing: initial;
    margin: 20px 0 0;
    position: absolute;
    top: 70px;
    width: 100%;
  }

  .sentiment-label {
    font-weight: bold;
  }

  .question-footer {
    margin: 0 0 70px;
    display: flex;
    justify-content: center;

    :first-child {
      margin-left: 0;
    }

    span {
      margin-left: 5px;
    }
  }
}

$deleted-post-border: 1px solid $light-grey !default;

.idea .level .deleted-post .box {
  border-left: $deleted-post-border;
}

.idea .level .box.pending {
  border-left: 4px solid $orange;
}

.posts {
  .post-body-title {
    font-family: $font-family;
    text-transform: uppercase;
    font-size: $font-size-sm;
    margin-top: 10px;
  }

  &.deleted-post {
    .body {
      font-style: italic;
      font-family: $font-family;
    }
  }

  .embedded-video {
    width: 100%;
    height: 300px;
  }

  @media screen and (max-width: 500px) {
    .embedded-video {
      height: 250px;
    }
  }

  @media screen and (max-width: 321px) {
    .embedded-video {
      height: 180px;
    }
  }

  .post-row {
    display: flex;
  }

  .post-left {
    width: 95%;
    padding: 20px 10px 20px 30px;

    .post-header {
      align-items: center;
      display: flex;
    }

    .meta {
      display: flex;
      margin: 10px 0 0 5px;

      .author .assembl-icon-back-arrow {
        display: inline-block;
        transform: scaleX(-1);
        font-size: $font-size-xs;
        padding-left: 5px;
        padding-right: 5px;
      }

      .avatar-logo {
        margin-right: 5px;
      }

      .published-date {
        font-size: $font-size-xs;
        font-weight: 300;
        line-height: 1.91;
        margin-left: 5px;

        &:before {
          content: '-';
          margin-right: 5px;
        }
      }
    }
  }

  .post-right {
    width: 42px;
    position: relative;
    text-align: center;

    .answers {
      display: none;
    }

    .post-actions {
      width: 100%;
    }

    &.pending {
      background-color: $orange;
    }
  }

  .box {
    border: none;
    margin: 0 auto;
    max-width: $post-width;
    position: relative;
    text-align: left;
    padding: 0 0 10px 0;

    .label {
      display: block;
      white-space: normal;
      text-align: left;
      line-height: 12px;
    }
  }

  .body {
    padding: 20px 0;

    p {
      margin: 0;
      min-height: 1em; /* so that empty paragraphs (created by multiple line returns) still have height */
    }
  }

  .post-action {
    cursor: pointer;
    margin: 10px 0 0;
    transition: all 0.2s ease-in-out;
    border: none;
    background-color: inherit;

    &:hover {
      transform: scale(1.2);
    }

    .assembl-icon-check-box-declined {
      font-size: 18px;
      padding-left: 2px;
    }
  }

  .overflow-action {
    cursor: pointer;
    margin: 20px 0 0;

    .assembl-icon-ellipsis-vert {
      &:before {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        padding-left: 3px;
      }
    }
  }

  .add-sentiment {
    margin: 10px 0 0;

    .sentiment {
      margin-left: auto;
      margin-right: auto;
    }
  }

  .answer-form {
    width: 90%;
    margin: auto;
    background-color: $white;
    border-top: 2px solid $white;
    border-style: solid;
    border-width: 1px;
    box-shadow: 3px 4px 4px 0;
    padding: 30px;

    .assembl-icon-back-arrow {
      padding-left: 10px;

      &:before {
        font-size: $font-size-s;
      }
    }

    .DraftEditor-root {
      border-style: solid;
      border-width: 2px;
    }

    .answer-form-inner {
      .editor-label {
        padding-top: 16px;
      }
    }

    .button-container {
      margin: 25px 0 0;
    }

    .btn {
      margin: 3px 0 8px;
    }

    @media screen and (min-width: $screen-sm-min) {
      .button-container {
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .collapsed-answer-form {
    background-color: $white;
    padding: 0 20px;

    .rich-text-editor {
      margin-top: 0;
    }

    .editor-header {
      display: none;
    }

    .form-group {
      border-style: solid;
      border-width: 1px;
      box-shadow: 1px 1px;
    }

    .public-DraftEditor-content {
      height: 20px;
    }

    .button-container {
      display: none;
    }

    .annotation {
      display: none;
    }
  }

  .extracts {
    position: absolute;
    left: 0;
    max-width: 230px;
    width: 10vw;
    line-height: 30px;

    .badges {
      line-height: 26px;
      font-family: $font-family4;

      .nugget-img {
        text-align: center;
        margin-bottom: 25px;

        span {
          display: inline-block;
        }

        span::before {
          font-size: 50px;
        }
      }

      .nugget {
        .nugget-txt {
          font-family: $font-family6;
          margin-bottom: 25px;
        }

        .box-hyphen {
          border-top-width: 3px;
        }
      }
    }
  }
}

.column-post {
  .post-body-title {
    display: none;
  }

  .box {
    border: none;
  }

  .answer-form {
    border-top: none;
  }

  .column-hint {
    font-family: $font-family4;
    font-size: $font-size-m;
    letter-spacing: 1px;
    line-height: 30px;
    padding-top: 20px;
  }

  .post-actions-separator {
    margin: 7.5px auto 0 auto;
  }
}

.action-validate {
  border: none;
}

.post-actions-separator {
  margin: 20px auto 10px auto;
  border-bottom: 2px solid white;
  width: 85%;
}

@media screen and (min-width: $screen-sm-min) {
  .proposals {
    .sentiment-label {
      display: inline-block;
    }

    .stat-sentiment {
      margin: -26px 0 0;

      .min-sentiment {
        text-align: center;
      }
    }

    .content {
      float: left;
      text-align: left;
      width: 80%;

      .user {
        padding: 20px 0 0 40px;
      }
    }

    .statistic {
      float: left;
      height: 100%;
      min-width: 150px;
      padding: 0 0 0;
      position: absolute;
      right: 0;
      width: 20%;

      &.pending {
        background-color: $orange;
      }

      .statistics-doughnut {
        height: 100px;
        margin-top: 15px;
        margin-bottom: 15px;

        .circle {
          stroke-width: 14px;
        }
      }
    }

    .body {
      padding: 20px 50px;
    }

    .post-footer {
      margin: 0 50px;
    }

    .box {
      min-height: 170px;
    }
  }

  .survey {
    .actions {
      .overflow-action {
        margin: 0;
      }
    }
  }
}

@media screen and (max-width: 1250px) {
  .extracts {
    display: none;
  }
}

@media screen and (max-width: $screen-md-max) {
  .synthesis {
    .post-row {
      background-color: $white;

      .post-left {
        .insert-box {
          border-bottom: none;
        }
      }

      .post-right {
        .post-actions {
          .post-icons {
            border-top: none;
          }

          .post-actions-separator {
            display: none;
          }
        }
      }
    }
  }
}

@media screen and (max-width: $screen-xs-max) {
  .proposals {
    .content {
      text-align: left;

      .post-footer {
        margin: 5px 20px 0 25px;

        div {
          display: none;
        }
      }

      .user {
        padding: 30px 20px 0;
      }
    }

    .statistic {
      text-align: right;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .sentiments {
        border-top: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0;
        padding-left: 25px;
        padding-right: 20px;

        .custom-overlay {
          display: flex;
          flex-direction: column;
          text-align: center;
          margin: 20px 10px 20px 0;

          .sentiment-label-sm {
            display: block;
            font-size: $font-size-xs;
            font-family: $font-family4;
          }
        }

        .sentiment {
          margin: 0;

          svg {
            vertical-align: middle;
          }
        }
      }

      .statistics-doughnut {
        height: 50px;
        width: 50px;
        margin-right: 10px;
        vertical-align: middle;

        .circle {
          stroke-width: 20px;
        }

        .doughnut-label {
          display: none;
        }
      }

      .stat-sentiment {
        margin: 0;
        padding: 0;
        vertical-align: middle;
        display: inline-block;
      }

      .actions {
        margin: 0;
        padding: 0;
        margin-right: 10px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }

    .translate {
      padding: 20px 20px 0 25px;
      display: flex;
    }

    .statistics-container {
      display: none;
    }

    .sentiment-label {
      display: none;
    }

    .totalSentimentsCount {
      display: none;
    }

    .sentimentsCountLabel {
      display: none;
    }

    .body {
      padding: 20px 20px 20px 25px;
    }

    .min-sentiment {
      margin: 0 0 5px 0;
    }

    .clear {
      height: 10px;
    }
  }
}

@media screen and (min-width: $screen-md-min) {
  .posts {
    .post-actions {
      position: absolute;
      bottom: 0;
    }

    .post-right {
      min-height: 320px;
    }
  }
}

@media screen and (max-width: $screen-md-min) {
  .posts {
    .custom-overlay {
      float: right;
      display: inline-block;
    }

    .post-actions-separator {
      display: none;
    }

    .post-row {
      display: block;
    }

    .post-right {
      background: none;
      width: 100%;

      .answers {
        float: none;
        display: inline-block;
        padding: 6px 0 0 0;
      }
    }

    .post-left {
      width: 100%;

      .answers {
        display: none;
      }
    }

    .post-actions {
      position: relative;

      .post-action {
        margin-top: 5px;
      }

      .post-icons {
        border-bottom: 1px solid $light-grey;
        border-top: 1px solid $light-grey;
        padding: 18px 0 10px;

        .post-action {
          display: inline-block;
          margin: 8px 10px;
        }

        .add-sentiment {
          display: inline-block;
          margin: 0;

          .sentiment {
            margin: 0 10px 5px 10px;
          }
        }
      }
    }

    .sentiments-count {
      float: left;

      .txt {
        margin-left: 20px;
        text-align: left;
        padding: 1px 0 0 20px;
      }
    }

    .min-sentiment {
      padding: 1px 0 0 10px;
    }

    .answer-form {
      padding: 25px 30px 10px 30px;

      .button-container {
        .btn {
          float: none;
          width: 100%;
        }
      }

      .assembl-icon-back-arrow {
        padding: 0;
      }
    }

    .extracts {
      display: none;
    }
  }
}

@media screen and (max-width: $screen-xxs-max) {
  .translate {
    flex-direction: column;

    .translate-button {
      margin: 0;
    }
  }

  .posts {
    .post-right {
      .answers {
        float: left;
        display: block;
        padding: 6px 0 0 17px;
      }
    }

    .post-left {
      padding: 20px 10px 20px 10px;

      .circle-avatar {
        display: none;
      }

      .meta {
        flex-direction: column;
        margin: 0;

        .author {
          word-wrap: break-word;
        }

        .published-date {
          margin-left: 0;
        }

        .published-date:before {
          display: none;
        }
      }
    }

    .answer-form {
      width: 100%;
    }

    .post-body-title {
      font-size: $font-size-s;
    }
  }

  .proposals .statistic .sentiments {
    flex-direction: column;
  }
}
