/* styles/sections/slack-dm.css
 * A Slack direct message from the Brief app (Revisiting Decisions hxx7F and its M and W instances),
 * set in Slack's Lato (--font-slack) as the frames draw it: the bar, then Brief's messages with the
 * app avatar, the APP badge, the time and Slack's buttons. The buttons are a picture of Slack's UI,
 * not controls. On M the bar stacks the name over "Direct message", as CRqcW draws it. */
@layer sections {
  .slack-dm {
    margin: 0;
    font-family: var(--font-slack);
  }

  .slack-dm p { margin: 0; }

  .slack-dm__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    padding: var(--space-14) var(--space-16);
    box-shadow: inset 0 -1px var(--slack-line);
    font-size: 13px;
    line-height: round(1.2em, 1px);
    color: var(--slack-ink-2);
  }

  .slack-dm__bar > strong {
    font-size: 16px;
    font-weight: 900;
    line-height: round(1.2em, 1px);
    color: var(--slack-ink);
  }

  .slack-dm__messages {
    display: grid;
    gap: 22px;
    margin: 0;
    padding: 22px var(--space-16) 26px;
    list-style: none;
  }

  /* The Brief app avatar in Slack: the frame's ghgVZ instance, a 36 square with radius 8 and the
     24 mark (the shared .brief-avatar, sized through its settable shell) */
  .slack-dm__message {
    --brief-avatar-size: 36px;
    --brief-avatar-radius: var(--radius-md);
    display: flex;
    gap: var(--space-12);
  }

  .slack-dm__body {
    display: grid;
    flex: 1 1 0;
    justify-items: start;
    gap: var(--space-6);
    min-width: 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--slack-ink);
  }

  .slack-dm__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    line-height: round(1.2em, 1px);
  }

  .slack-dm__meta > strong { font-weight: 900; }

  .slack-dm__app {
    padding: 1px var(--space-4);
    border-radius: 3px;
    background: var(--slack-badge);
    font-size: 10px;
    font-weight: 700;
    line-height: round(1.2em, 1px);
    color: var(--slack-ink-2);
  }

  .slack-dm__time {
    font-size: 12px;
    line-height: round(1.2em, 1px);
    color: var(--slack-ink-2);
  }

  .slack-dm__button {
    padding: 7px var(--space-14);
    border-radius: 6px;
    outline: 1px solid var(--slack-button-edge);
    outline-offset: -1px;
    font-size: 14px;
    font-weight: 700;
    line-height: round(1.2em, 1px);
  }

  .slack-dm__button--primary {
    outline: 0;
    background: var(--slack-green);
    color: var(--white);
  }

  .slack-dm .slack-dm__highlight {
    display: flex;
    align-items: baseline;
    gap: var(--space-10);
    justify-self: stretch;
    margin-left: -1.5px;
    padding: var(--space-8) var(--space-10);
    border-left: 3px solid var(--orange);
    border-radius: var(--radius-sm);
    background: var(--orange-7);
  }

  @media (min-width: 900px) {
    .slack-dm__bar {
      flex-direction: row;
      align-items: baseline;
      padding-inline: var(--space-24);
    }

    .slack-dm__messages { padding-inline: var(--space-24); }
  }

  @media (forced-colors: active) {
    .slack-dm__button--primary { outline: 1px solid CanvasText; }
  }
}