.prs-message {
  margin: 0 0 1.25rem;
  border: 1px solid var(--prs-c-gray-600);
  padding: 0.75rem 0 0;
  width: 100%;
  max-width: 28rem;
  background-color: var(--prs-c-white);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--prs-radius-box) * calc(2/3));
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);
  &:where(.prs-message_hover,:hover) {
    background-color: var(--prs-c-gray-50);
  }
  &:where(.prs-message_focus,:has(:focus-visible)) {
    outline: 2px solid var(--prs-c-primary);
    outline-offset: 1px;
  }
  &:has(textarea:disabled) {
    border-color: var(--prs-c-gray-300);
    background-color: var(--prs-c-gray-100);
    pointer-events: none;
  }
  & :where(header) {
    padding: 0 0.75rem 0.75rem;
    width: 100%;
    flex-shrink: 0;
    display: grid;
    /* responsive without media queries */
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 0.75rem;
  }
  & :where(textarea) {
    margin: 0 0 1rem;
    border: 0 none;
    padding: 0 0.75rem;
    width: 100%;
    min-height: 1.5rem;
    max-height: calc(1.5rem * 5);
    field-sizing: content;
    display: block;
    flex-grow: 1;
    appearance: none;
    resize: none;
    &::placeholder {
      font-style: italic;
    }
    &:disabled {
      color: var(--prs-c-gray-500);
      &::placeholder {
        color: var(--prs-c-gray-300);
      }
    }
    &:focus-visible,&:focus {
      border: 0 none;
      outline: none;
      box-shadow: none;
    }
  }
  & :where(footer) {
    padding: 0 0.5rem 0.5rem;
    width: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    & > :where(:nth-child(1)) {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    & > :where(:nth-child(2)) {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 0.5rem;
    }
  }
  & :where(.prs-hint) {
    padding: 0.25rem 0 0;
    color: var(--prs-c-gray-600);
    font-size: var(--prs-fz-ui-subtext);
    line-height: var(--prs-fl-ui-subtext);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
}