@vaadin/vaadin-lumo-styles/src/components/message.css

Lumo is a design system foundation for modern web applications, used by Vaadin components

/**
 * @license
 * Copyright (c) 2000 - 2026 Vaadin Ltd.
 * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
 */
@media lumo_components_message {
  :host {
    color: var(--lumo-body-text-color);
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size-m);
    line-height: var(--lumo-line-height-m);
    padding: var(--vaadin-message-padding, var(--lumo-space-s) var(--lumo-space-m));
    gap: var(--vaadin-message-gap, 0);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
    --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
  }

  :host(:is(:focus-visible, [focus-ring])) {
    outline: none;
  }

  [part='header'] {
    min-height: calc(var(--lumo-font-size-m) * var(--lumo-line-height-m));
  }

  [part='name'] {
    color: var(--vaadin-message-name-color, inherit);
    margin-inline-end: var(--lumo-space-s);
  }

  [part='name']:empty {
    margin-inline-end: 0;
  }

  [part='message'] {
    color: var(--vaadin-message-text-color, inherit);
  }

  [part='time'] {
    color: var(--vaadin-message-time-color, var(--lumo-secondary-text-color));
    font-size: var(--vaadin-message-time-font-size, var(--lumo-font-size-s));
  }

  ::slotted([slot='avatar']) {
    --vaadin-avatar-outline-width: 0;
    --vaadin-avatar-size: var(--lumo-size-m);
    margin-top: calc(var(--lumo-space-s));
    margin-inline-end: calc(var(--lumo-space-m));
  }

  :host(:focus-visible) {
    box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
  }

  [part='attachments'] {
    margin-block: var(--lumo-space-xs);
  }

  [part~='attachment'] {
    color: var(--lumo-body-text-color);
    position: relative;

    & [part='attachment-icon'] {
      color: var(--lumo-secondary-text-color);
      background: var(--lumo-contrast-5pct);
      --vaadin-icon-size: var(--lumo-icon-size-s);
    }

    & [part='attachment-name'] {
      font-size: var(--lumo-font-size-s);
    }

    &::after {
      content: '';
      position: absolute;
      z-index: 1;
      inset: 0;
      background: currentColor;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      filter: blur(8px);
    }

    &:hover::after {
      opacity: 0.02;
    }

    &:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
        0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
    }

    &:active::after {
      opacity: 0.1;
      transition-duration: 0s, 0s;
      transform: scale(0);
    }
  }
}