/* Styles for the print reports modal and its extra params step. Both are modal templates, not components, so every
   rule hangs from the '.records-actions-report-params' root class to scope it and to outweigh generic classes on the
   same element (e.g. .panel-md). */

.records-actions-report-params {
  font-size: var(--md-font-size-4);
}

/* Vertically centred against the close button */
.records-actions-report-params .records-actions-report-params__title {
  margin-top: auto;
  margin-bottom: auto;
}

.records-actions-report-params .records-actions-report-params__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-xs);
}

/* The extra params step pads its heading and footer more than the panel-md default */
.records-actions-report-params--extra-params .records-actions-report-params__heading,
.records-actions-report-params--extra-params .records-actions-report-params__footer {
  padding: var(--md-spacing-sm);
}

/* Label position: header and grid joined as a single bordered box. No gap between title and description on
   purpose: their line height already separates them, and a gap on top looked too loose. */
.records-actions-report-params .records-actions-report-params__position-header {
  display: flex;
  flex-direction: column;
  padding: var(--md-spacing-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: var(--md-radius-xs) var(--md-radius-xs) 0 0;
}

/* grid-template-columns comes from ng-style: it depends on the sheet's column count */
.records-actions-report-params .records-actions-report-params__position-grid {
  display: grid;
  justify-content: center;
  gap: var(--md-spacing-xs);
  max-height: 24vh;
  overflow: auto;
  padding: var(--md-spacing-xs);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: 0 0 var(--md-radius-xs) var(--md-radius-xs);
}

/* Label position picker. Custom on purpose: each cell stands for a label on the sheet, so it is sized like one
   instead of like an md-button. Colours and states follow the secondary button. */
.records-actions-report-params .records-actions-report-params__position-cell {
  width: 88px;
  height: 72px;
  padding: var(--md-spacing-sm);
  border: var(--md-border-width-sm) solid var(--md-border-primary);
  border-radius: var(--md-radius-xs);
  background: var(--md-background-primary);
  color: var(--md-content-secondary);
  font-size: inherit;
  font-weight: var(--md-font-weight-semibold);
  cursor: pointer;
}

.records-actions-report-params .records-actions-report-params__position-cell:hover {
  border-color: var(--md-border-secondary);
  background: var(--md-background-hover);
  color: var(--md-content-primary);
}

.records-actions-report-params .records-actions-report-params__position-cell:active {
  border-color: var(--md-border-tertiary);
  background: var(--md-background-pressed);
  color: var(--md-content-primary);
}

.records-actions-report-params .records-actions-report-params__position-cell:focus-visible {
  outline: var(--md-border-width-mn) solid var(--md-border-focus);
  outline-offset: 2px;
}