@use "../../vendor/govuk-frontend" as *;

/* ==========================================================================
   #MESSAGES
   ========================================================================== */

.moj-messages-container {
  border: 1px solid $govuk-border-colour;
  @include govuk-font(19);
}

.moj-message-list {
  min-height: 200px;
  padding: govuk-spacing(1);
  overflow-x: hidden;
  overflow-y: scroll;

  &__date {
    display: inline-block;
    width: 100%;
    padding: govuk-spacing(3) 0;
    color: govuk-colour("black", $variant: "tint-25");
    text-align: center;
    @include govuk-font($size: 19, $weight: "bold");
  }
}

.moj-message-item {
  position: relative;
  margin-bottom: govuk-spacing(1);
  padding: govuk-spacing(3);
  border-radius: 0.5em 0.5em 0.75em;

  @include govuk-media-query($from: tablet) {
    width: 50%;
  }

  &--sent {
    margin-right: govuk-spacing(2);
    padding-right: govuk-spacing(5);
    float: right;
    color: govuk-colour("white");
    background-color: $govuk-brand-colour;
    text-align: right;

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

  &--received {
    margin-left: govuk-spacing(2);
    padding-left: govuk-spacing(5);
    float: left;
    background-color: govuk-colour("black", $variant: "tint-95");

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: -1.5em;
      width: 1.5em;
      height: 1.5em;
      border-right: 1em solid govuk-colour("black", $variant: "tint-95");
      border-bottom-right-radius: 1.75em 1.5em;
    }
  }
}

.moj-message-item a:link,
.moj-message-item a:visited {
  color: govuk-colour("white");
}

.moj-message-item a:focus {
  color: $govuk-focus-text-colour;
}

.moj-message-item__text {
  &--sent table {
    color: govuk-colour("white");

    & th,
    & td {
      border-bottom: 1px solid govuk-colour("white");
    }
  }
}

.moj-message-item__meta {
  margin-top: govuk-spacing(2);

  &--sender {
    @include govuk-font($size: 16, $weight: "bold");
  }

  &--timestamp {
    @include govuk-font($size: 16, $weight: "bold");
  }
}

/*# sourceMappingURL=_messages.scss.map */