{"version":3,"sources":["../../../../src/moj/components/messages/_messages.scss"],"names":[],"mappings":"AAAA,uCAAuC;;AAEvC;;+EAE+E;;AAE/E;EACE,sCAAsC;EACtC,uBAAuB;AACzB;;AAEA;EACE,iBAAiB;EACjB,yBAAyB;EACzB,kBAAkB;EAClB,kBAAkB;;EAElB;IACE,qBAAqB;IACrB,WAAW;IACX,2BAA2B;IAC3B,iDAAiD;IACjD,kBAAkB;IAClB,+CAA+C;EACjD;AACF;;AAEA;EACE,kBAAkB;EAClB,+BAA+B;EAC/B,yBAAyB;EACzB,iCAAiC;;EAEjC;IACE,UAAU;EACZ;;EAEA;IACE,8BAA8B;IAC9B,+BAA+B;IAC/B,YAAY;IACZ,4BAA4B;IAC5B,qCAAqC;IACrC,iBAAiB;;IAEjB;MACE,WAAW;MACX,kBAAkB;MAClB,aAAa;MACb,SAAS;MACT,YAAY;MACZ,aAAa;MACb,0CAA0C;MAC1C,uCAAuC;IACzC;EACF;;EAEA;IACE,6BAA6B;IAC7B,8BAA8B;IAC9B,WAAW;IACX,4DAA4D;;IAE5D;MACE,WAAW;MACX,kBAAkB;MAClB,SAAS;MACT,YAAY;MACZ,YAAY;MACZ,aAAa;MACb,kEAAkE;MAClE,wCAAwC;IAC1C;EACF;AACF;;AAEA;;EAEE,4BAA4B;AAC9B;;AAEA;EACE,+BAA+B;AACjC;;AAEA;EACE;IACE,4BAA4B;;IAE5B;;MAEE,8CAA8C;IAChD;EACF;AACF;;AAEA;EACE,4BAA4B;;EAE5B;IACE,+CAA+C;EACjD;;EAEA;IACE,+CAA+C;EACjD;AACF","file":"_messages.scss","sourcesContent":["@use \"../../vendor/govuk-frontend\" as *;\n\n/* ==========================================================================\n   #MESSAGES\n   ========================================================================== */\n\n.moj-messages-container {\n  border: 1px solid $govuk-border-colour;\n  @include govuk-font(19);\n}\n\n.moj-message-list {\n  min-height: 200px;\n  padding: govuk-spacing(1);\n  overflow-x: hidden;\n  overflow-y: scroll;\n\n  &__date {\n    display: inline-block;\n    width: 100%;\n    padding: govuk-spacing(3) 0;\n    color: govuk-colour(\"black\", $variant: \"tint-25\");\n    text-align: center;\n    @include govuk-font($size: 19, $weight: \"bold\");\n  }\n}\n\n.moj-message-item {\n  position: relative;\n  margin-bottom: govuk-spacing(1);\n  padding: govuk-spacing(3);\n  border-radius: 0.5em 0.5em 0.75em;\n\n  @include govuk-media-query($from: tablet) {\n    width: 50%;\n  }\n\n  &--sent {\n    margin-right: govuk-spacing(2);\n    padding-right: govuk-spacing(5);\n    float: right;\n    color: govuk-colour(\"white\");\n    background-color: $govuk-brand-colour;\n    text-align: right;\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      right: -1.5em;\n      bottom: 0;\n      width: 1.5em;\n      height: 1.5em;\n      border-left: 1em solid $govuk-brand-colour;\n      border-bottom-left-radius: 1.75em 1.5em;\n    }\n  }\n\n  &--received {\n    margin-left: govuk-spacing(2);\n    padding-left: govuk-spacing(5);\n    float: left;\n    background-color: govuk-colour(\"black\", $variant: \"tint-95\");\n\n    &::after {\n      content: \"\";\n      position: absolute;\n      bottom: 0;\n      left: -1.5em;\n      width: 1.5em;\n      height: 1.5em;\n      border-right: 1em solid govuk-colour(\"black\", $variant: \"tint-95\");\n      border-bottom-right-radius: 1.75em 1.5em;\n    }\n  }\n}\n\n.moj-message-item a:link,\n.moj-message-item a:visited {\n  color: govuk-colour(\"white\");\n}\n\n.moj-message-item a:focus {\n  color: $govuk-focus-text-colour;\n}\n\n.moj-message-item__text {\n  &--sent table {\n    color: govuk-colour(\"white\");\n\n    & th,\n    & td {\n      border-bottom: 1px solid govuk-colour(\"white\");\n    }\n  }\n}\n\n.moj-message-item__meta {\n  margin-top: govuk-spacing(2);\n\n  &--sender {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n\n  &--timestamp {\n    @include govuk-font($size: 16, $weight: \"bold\");\n  }\n}\n"]}