/* Wrap toolbar on tablets and phones (< lg) */
@media (max-width: 991.98px) {
  trix-toolbar .trix-button-row {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
  }

  trix-toolbar .trix-button-group-spacer {
    display: none;
  }

  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}

/* Larger touch targets on phones (< md) */
@media (max-width: 767.98px) {
  trix-toolbar .trix-button {
    padding: 0 0.5em;
  }

  trix-toolbar .trix-button--icon {
    height: 2.6em;
    width: 2.6em;
    max-width: none;
  }

  trix-toolbar .trix-button--icon::before {
    right: 10%;
    left: 10%;
  }
}