ministryofjustice/Claim-for-Crown-Court-Defence

// stylelint-disable max-nesting-depth

@mixin normalize-bubble($direction:left) {
  @if $direction == "left" {
    @include govuk-media-query($media-type: print) {
      margin-right: 95px;
    }

    .message-audit {
      color: $govuk-text-colour;
      text-align: left;
    }
  }

  @if $direction == "right" {
    @include govuk-media-query($media-type: print) {
      margin-left: 95px;
    }

    .message-audit {
      text-align: right;
    }
  }

  @include govuk-media-query($media-type: print) {
    .message-audit {
      color: govuk-colour("black");
      font-weight: 700;
    }

    .message-body {
      border: 1px solid govuk-colour("black");
      background: none;

      p {
        color: $govuk-text-colour;
      }

      &::after {
        border: none;
      }
    }
  }
}

.messages-container {
  margin-top: $gutter-two-thirds;
  margin-bottom: $gutter-two-thirds;
  overflow: hidden;
  border: 1px solid $govuk-border-colour;

  .messages-list {
    min-height: 200px;
    max-height: 400px;
    margin-bottom: $gutter-two-thirds;
    padding: $gutter-one-sixth;
    overflow-x: hidden;
    overflow-y: scroll;

    .history {
      .event {
        margin-right: $gutter-two-thirds;
        margin-bottom: $gutter-one-sixth;
        padding: $gutter-one-sixth $gutter-one-third;
        color: $govuk-link-visited-colour;
        text-align: right;

        strong {
          font-weight: 700;
        }

        .message-container,
        .message-body {
          margin-right: 0;
          padding-right: 0;
          border: 0;
        }
      }

      .message-right {
        .message-body {
          border: 0;
          color: $govuk-text-colour;
          background: none;
          text-align: right;

          &::after {
            border-left: 0;
          }

          .message-audit {
            margin-top: 0;
            margin-bottom: 0;
            color: $govuk-text-colour;
          }

          p {
            margin-bottom: 0;
            color: $govuk-text-colour;
          }
        }
      }
    }

    .single-date {
      border: none;
      text-align: center;

      legend {
        margin-bottom: $gutter-half;
        padding-top: $gutter-one-sixth;
        padding-right: $govuk-gutter;
        padding-left: $govuk-gutter;
        border: 1px solid $govuk-border-colour;
        color: $govuk-secondary-text-colour;
        font-weight: 700;
        text-align: center;
      }
    }

    .event-date {
      display: inline-block;
      margin-top: $gutter-half;
      margin-bottom: $gutter-half;
      padding: $gutter-one-sixth $gutter-one-third;
      border: 2px solid  govuk-colour("green");
      border-radius: .5em;
      color: govuk-colour("green");
      font-weight: 700;
    }

    .message-container {
      margin-right: $gutter-two-thirds;
      margin-bottom: $gutter-two-thirds;
      margin-left: $gutter-two-thirds;

      .message-body {
        padding: $gutter-one-third $gutter-two-thirds;
        word-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        overflow-wrap: break-word;
      }
    }

    .message-audit {
      @include govuk-font(16, $weight: bold);
      color: govuk-colour("white");
      text-align: left;

      .sent {
        padding-right: 1.6em;
        text-align: right;
      }
    }

    .message-right {
      @include normalize-bubble("right");

      .message-body {
        position: relative;
        border-radius: .5em .5em .75em;
        color: govuk-colour("white");
        background-color: $govuk-link-colour;
        text-align: left;

        &::after {
          content: "";
          position: absolute;
          right: -1.5em;
          bottom: 0;
          width: 1.5em;
          height: 1.5em;
          border-left: 1em solid $govuk-link-colour;
          border-bottom-left-radius: 1.75em 1.5em;
        }

        p {
          color: govuk-colour("white");
        }

        a {
          &:link {
            // Essentially means a[href], or that the link actually goes somewhere
            color: govuk-colour("white");
          }

          &:hover {
            color: $govuk-border-colour;
          }

          &:active {
            color: govuk-colour("white");
          }
        }
      }
    }

    .message-left {
      @include normalize-bubble("left");

      .message-body {
        position: relative;
        border-radius: .5em .5em .5em .75em;
        background-color: govuk-colour("light-grey");
        text-align: left;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: -1.5em;
          width: 1.5em;
          height: 1.5em;
          border-right: 1em solid govuk-colour("light-grey");
          border-bottom-right-radius: 1.75em 1.5em;
        }
      }
    }
  }

  .message-controls {
    padding: $gutter-half;
    border-top: 1px solid $govuk-border-colour;

    .file-to-be-uploaded {
      display: none;
      padding-top: $gutter-half;
      border-top: 1px solid $govuk-border-colour;

      .filename {
        margin-right: govuk-spacing(1);
        padding-right: govuk-spacing(2);
        border-right: 1px solid govuk-colour("black");
        font-weight: 700;
      }
    }
  }

  .messages-print-link {
    padding-right: $gutter-two-thirds;
    text-align: right;
  }

  .message-status {
    .message-success {
      color: govuk-colour("green");
      font-weight: 700;
    }

    .message-error {
      color: $govuk-error-colour;
      font-weight: 700;
    }
  }
}