mjj-composer {
  --zenbu-composer-action-reserve: calc(
    var(--zenbu-sys-control-height-sm) + var(--zenbu-sys-space-container)
  );
  display: block;
  min-width: 0;
  min-height: 0;
}

mjj-composer > form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--zenbu-sys-space-control);
  height: 100%;
  min-height: 0;
}

mjj-composer [data-composer-control] {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
}

mjj-composer [data-composer-control] > zen-field {
  height: 100%;
  min-height: 0;
}

mjj-composer [data-composer-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

mjj-composer [data-composer-control] > zen-field:not(
  [appearance="plain"]
) > textarea {
  box-sizing: border-box;
  height: 100%;
  min-height: var(--zenbu-control-height);
  padding-inline-end: var(--zenbu-composer-action-reserve);
  resize: none;
}

mjj-composer [data-composer-actions] {
  position: absolute;
  z-index: 1;
  inset-inline-end: var(--zenbu-sys-padding-sm);
  inset-block-end: var(--zenbu-sys-padding-sm);
  display: flex;
  flex-direction: column;
  gap: var(--zenbu-sys-space-control);
}

mjj-composer [data-composer-actions] zen-button,
mjj-composer [data-composer-actions] button {
  width: 100%;
}

mjj-composer [data-composer-meta] {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  color: var(--zenbu-sys-color-text-secondary);
  font-size: var(--zenbu-sys-font-size-xs);
}

mjj-composer [data-composer-meta][hidden],
mjj-composer [data-composer-cancel-owner][hidden] {
  display: none;
}

mjj-composer[compact] {
  --zenbu-composer-action-size: var(--zenbu-sys-control-height-sm);
  --zenbu-composer-action-reserve: calc(
    var(--zenbu-composer-action-size) + var(--zenbu-sys-padding-md)
  );
}

mjj-composer[compact] > form {
  gap: var(--zenbu-sys-space-icon-label);
}

mjj-composer[compact] [data-composer-actions] {
  gap: var(--zenbu-sys-space-icon-label);
}

mjj-composer[compact] [data-composer-actions] zen-button,
mjj-composer[compact] [data-composer-actions] button {
  width: var(--zenbu-composer-action-size);
}

mjj-composer[compact] [data-composer-actions] button {
  height: var(--zenbu-composer-action-size);
  min-height: var(--zenbu-composer-action-size);
  padding: 0;
}

mjj-composer[compact] [data-composer-action-label] {
  display: none;
}