@use '../../abstracts/next_to_sidebar' as *;

%message__from--hidden {
  > i {
    display: none;
  }

  .message__from {
    display: none;
  }
}

%message__text--highlighted {
  .message__text {
    background-color: var(--highlight-color-bg);
    border: 3px solid var(--highlight-color-bg);
    color: var(--highlight-color);
    margin: 0 -3px;
  }
}

%message__text--preformat {
  background: var(--syntax-hl-base-bg);
  padding: 0.2em;

  & + & {
    margin: 0;
    padding: 0 0.2em;
  }

  .message__text {
    font-family: var(--font-family-monospace);
    color: var(--syntax-hl-base);
    line-height: 1.2em;
  }

  .message__ts {
    max-height: 1.2em;
  }
}

%message__ts--transparent {
  .message__ts {
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover .message__ts {
    opacity: 0.8;
  }
}

%message--focus {
  background: var(--highlight-color-bg);
  box-shadow: 0 0 0 2px var(--highlight-color-bg);
  border-radius: 3px;

  .message__text,
  .message__ts {
    font-weight: bold;
    opacity: 1;
  }
}

%message--internal {
  .message__text {
    font-size: 0.9rem;
    font-style: italic;
  }
}

%message--oneline {
  > i {
    display: none;
  }

  .message__from,
  .message__text {
    font-size: 1rem;
    font-style: italic;
    display: inline;
  }

  .message__from {
    margin-right: 0.2em;
  }

  .message__from:before {
    content: '✦';
    margin-right: 0.3em;
  }

}

.message {
  position: relative;
  padding: 2px;

  &:after {
    content: '';
    display: table;
    clear: both;
  }

  > i {
    font-size: 1.2rem;
  }

  code {
    background: var(--code-bg);
    color: var(--syntax-hl-string);
    padding: 0.15em 0.25em;
  }

  a[href*="#action:"] .fas {
    font-size: 1.1em;
  }

  a.pull-right {
    padding-left: 0.3rem;
    position: relative;
  }

  .emoji {
    height: 1.5rem;
    vertical-align: bottom;
  }

  &.has-same-from {
    @extend %message__from--hidden;
    @extend %message__ts--transparent;
  }

  &.has-not-same-from {
    margin-top: 0.5rem;
  }

  &.is-type-error {
    margin-top: 0.1em;
    margin-bottom: 0.1em;

    @extend %message__from--hidden;
    @extend %message__ts--transparent;
    @extend %message--internal;
    @extend %message__text--highlighted;
  }

  &.is-type-notice {
    margin-top: 0.1em;
    margin-bottom: 0.1em;

    @extend %message__from--hidden;
    @extend %message__ts--transparent;
    @extend %message--internal;
  }

  &.is-type-preformat {
    @extend %message__text--preformat;
  }

  &.is-highlighted {
    @extend %message__text--highlighted;
  }

  &.is-type-action {
    @extend %message--oneline;
  }

  &.is-not-present {
    .message__from {
      text-decoration: line-through;
    }
  }

  &.has-focus {
    @extend %message--focus;
  }
}

.message blockquote {
  quotes: "\201C" "\201D";
  font-style: italic;
  line-height: 1em;
  margin: 0;
  padding: 0.4em 0.4em 0.1em 1.1em;
  position: relative;

  &:before {
    content: open-quote;
    color: var(--quote-color);
    line-height: 1em;
    font-size: 3em;
    position: absolute;
    top: 0.1rem;
    left: -0.3rem;
  }
}

.message__embed {
  text-decoration: none;
  margin-top: 0.6rem;

  > a {
    display: inline-block;

    &:hover {
      filter: brightness(0.97);
    }
  }
}

.message__from {
  font-size: 1.1rem;
  text-decoration: none;
}

.message__text {
  overflow-wrap: break-word;

  a {
    color: var(--text-color);

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

.message__ts {
  color: var(--ts-color);
  font-size: var(--ts-font-size);
  font-weight: normal;
  padding: 0.1rem;
  float: right;
  position: relative;
  z-index: 2;

  > div {
    white-space: pre;
  }

  > .tooltip {
    right: 0;
  }

  &:focus > div,
  &:hover > div {
    left: auto;
    right: 0;
  }
}

.message__status-line {
  font-size: 0.8rem;
  text-align: center;
  line-height: 1rem;
  border-top: var(--hr-border);
  margin: 0.8rem 0 0 0;
  height: 0.8rem;

  a {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }

  span {
    color: var(--ts-color);
    background: var(--body-bg);
    padding: 0 var(--gutter);
    position: relative;
    top: -0.4rem;
  }

  &.for-last-read,
  &.for-loading {
    color: var(--error-color);
  }

  &.for-jump-to-now {
    @include next_to_sidebar;
    line-height: 2em;
    border-bottom: 2rem solid var(--body-bg);
    height: 2em;
    position: fixed;
    bottom: 3.6rem;
    z-index: 3;
    opacity: 0.9;
  }
}

.main.has-results {
  .message__text {
    cursor: pointer;

    &:hover {
      background: var(--body-bg);
      filter: brightness(0.97);
    }
  }

  .message,
  .message.has-same-from {
    .message__ts {
      opacity: 1;
    }
  }

  .message__from {
    text-decoration: none;
  }
}

body.has-compact-display {
  .message {
    &.has-not-same-from {
      margin-top: 0.2rem;
    }
  }

  .message__from {
    display: inline;
  }

  .message__text {
    display: inline;
  }
}
