/**
 * @name Better Message Buttons
 * @description Organizes the message buttons in a grid, with Reply and Edit buttons separated
 * @author Andrew Grant
 * @version 2.1
*/

:root {
  --msg-solo-button-width: 36px;
  --msg-grid-button-padding: 32px;
  --msg-grid-columns: 2;
  --msg-button-height: 64px;
  --msg-button-border-radius: 8px;
  --msg-section-spacing: 12px;
  --msg-offset-Y: 0px;
}

div[class^="buttonsInner_"] {
  grid: repeat(var(--msg-grid-columns), var(--msg-grid-button-padding)) / auto-flow var(--msg-grid-button-padding);
  grid-auto-flow: column;
  transform: translateX(calc(((var(--msg-section-spacing) / 2) + var(--msg-solo-button-width)) * -1)) translateY(calc(var(--msg-offset-Y) * -1));
  border-radius: var(--msg-button-border-radius);
}

/* don't make disconnected buttons have hover styling  */
div[class^="buttonsInner_"]:has(div[aria-label="Reply"]:hover),
div[class^="buttonsInner_"]:has(div[aria-label="Edit"]:hover) {
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-stroke);
}

div[aria-label="Reply"], div[aria-label="Edit"] {
  order: 1;
  grid-row: span 2;
  height: var(--msg-button-height);
  width: var(--msg-solo-button-width);
  border: 1px solid var(--border-faint);
  border-radius: var(--msg-button-border-radius);
  position: absolute;
  box-shadow: var(--shadow-low);
  background: var(--background-nested-floating);
  right: calc((var(--msg-section-spacing) + var(--msg-solo-button-width)) * -1);
}

/* for use with ShowAllMessageButtons plugin */
div[class^="buttonsInner_"]:has(div[aria-label="Edit"]):has(div[aria-label="Reply"]) {
  transform: translateX(calc(((var(--msg-section-spacing) * 2) + (var(--msg-solo-button-width) * 2)) * -1));
}

/* for use with ShowAllMessageButtons plugin */
div[class^="buttonsInner_"]:has(div[aria-label="Edit"]) div[aria-label="Reply"] {
  right: calc(((var(--msg-section-spacing) * 2) + (var(--msg-solo-button-width) * 2)) * -1);
}

div[aria-label="Reply"]:hover, div[aria-label="Edit"]:hover {
  background: var(--background-nested-floating);
  box-shadow: var(--elevation-stroke), var(--elevation-medium);
  border: 1px solid var(--border-subtle);
  opacity: 1;
}

div[class*="popoverReactionHoverBar_"] > div[class^="separator_"] {
  display: none;
}