@use "variables/sizes";

/**
 * The main content. Apply standard paddings to all edges
 *
 * Implementation detail:
 * It is common that `sidenav-content` only has one child element
 * plus the `router-outlet` element. The router-outlet should, however, not have
 * any padding.
 *
 * We use the `:where()` pseudo-class to lower the specificity. This allows child views
 * to override the padding or display (for example, the dashboard has `display: grid` instead of
 * block).
 */
.sidenav-content> :where(:not(router-outlet)) {
  padding: sizes.$margin-main-view-top sizes.$margin-main-view-right sizes.$margin-main-view-bottom sizes.$margin-main-view-left;
  display: block;
  box-sizing: border-box;
}

.form-field-icon-suffix {
  cursor: pointer;
  padding: 0 sizes.$small;
}

mat-form-field {
  // Adding this because with `subscriptSizing="dynamic"`, Angular Material no longer applies the default bottom margin.
  // This ensures consistent spacing between form fields.
  margin-bottom: 22px;
}

// see AssistantButtonComponent
.backdrop-below-toolbar {
  background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 64px, rgba(0, 0, 0, .32) 64px, rgba(0, 0, 0, .32) 100%);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) var(--toolbar-height), rgba(0, 0, 0, .32) var(--toolbar-height), rgba(0, 0, 0, .32) 100%);
}

:root {
  --toolbar-height: #{sizes.$toolbar-height};
}