@sumaris-net/ngx-components 18.17.7-rc3 → 18.18.0

package/src/theme/_ngx-components.scss

@@ -1,1009 +1,1009 @@
-
-body,
-html {
-  padding: 0;
-  margin: 0;
-}
-
-*::selection {
-  background: var(--ion-color-shade, rgba(var(--ion-color-text-rgb, 0, 0, 0), 0.3));
-}
-
-// Text style
-// --------------------------------------------------
-.text-italic {
-  font-style: italic;
-}
-.ion-text-wrap {
-  white-space: normal;
-  word-wrap: break-word;
-}
-
-// Page Container Structure
-// --------------------------------------------------
-
-.ion-page-invisible {
-  opacity: 0;
-}
-
-ion-toolbar ion-title,
-app-toolbar ion-title {
-  small {
-    font-weight: normal;
-    br {
-      display: none;
-      visibility: hidden;
-    }
-  }
-  // Add a separator, after the <small> part
-  small:first-of-type:after {
-    content: " -  ";
-  }
-}
-
-@media screen and (max-width: $screen-sm-max) {
-  ion-toolbar ion-title,
-  app-toolbar ion-title {
-    small {
-      @include font-size(10pt);
-    }
-    small br {
-      display: unset;
-      visibility: unset;
-    }
-    // Add a separator, after the <small> part
-    small:first-of-type:after {
-      content: "";
-    }
-  }
-}
-
-// Ionic Safe Margins
-// --------------------------------------------------
-html.plt-ios.plt-hybrid,
-html.plt-ios.plt-pwa {
-  --ion-statusbar-padding: 20px;
-}
-
-html {
-  --ion-safe-area-top: var(--ion-statusbar-padding);
-}
-
-// TODO: remove once Safari 11.2 dies
-@supports (padding-top: constant(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: constant(safe-area-inset-top);
-    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
-    --ion-safe-area-left: constant(safe-area-inset-left);
-    --ion-safe-area-right: constant(safe-area-inset-right);
-  }
-}
-
-@supports (padding-top: env(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
-  }
-}
-
-// --------------------------------------------------
-// Back button in app toolbar
-// --------------------------------------------------
-
-.ion-page.can-go-back {
-  app-toolbar {
-
-    ion-menu-toggle {
-      display: none !important;
-    }
-
-    // Back button
-    ion-back-button,
-    ion-button.back-button {
-      display: inline-block !important;
-    }
-  }
-}
-
-// --------------------------------------------------
-// Main Menu
-// --------------------------------------------------
-.split-pane-md.split-pane-visible > .split-pane-side {
-  max-width: #{$app-menu-width} !important;
-}
-
-ion-menu.menu-side-left {
-  .menu-inner {
-    .scroll {
-      overflow-y: auto !important;
-
-      .scroll-inner {
-        min-height: auto !important;
-      }
-    }
-  }
-}
-
-
-mat-form-field {
-  .mat-paginator-page-size-select {
-    @include font-size-important(14px);
-  }
-}
-
-
-// --- mat-date-short-field
-mat-calendar.mat-date-short-panel {
-  // Hide some buttons (e.g. to change the period)
-  // and the month view
-  .mat-calendar-period-button,
-  mat-year-view {
-    visibility: hidden;
-    display: none;
-  }
-}
-
-@media screen and (min-width: $screen-sm) {
-  form.form-container {
-    ion-grid {
-      ion-col[size-sm="auto"] > mat-date-time-field {
-        // When inside a form + grid : fix <ion-col size-sm="auto"> alignment in some screen resolution
-        max-width: 200px;
-      }
-    }
-  }
-}
-// --------------------------------------------------
-// mat-checkbox
-// --------------------------------------------------
-
-mat-checkbox {
-  .mat-checkbox-checkmark {
-    .mat-checkbox-checkmark-path {
-      // TODO: change to accent-contrast
-      stroke: white !important;
-    }
-  }
-}
-
-// --------------------------------------------------
-// mat-autocomplete and mat-select panel
-// --------------------------------------------------
-
-// When simple text option, add a padding
-mat-option {
-
-  .mdc-list-item__primary-text {
-    display: inline-block;
-    flex-grow: 1;
-    box-sizing: border-box;
-  }
-  .mat-option-text:not(:has(ion-row)),
-  .mat-option-text:has(ion-searchbar),
-  .mdc-list-item__primary-text:has(ion-searchbar) {
-    padding: 0 !important;
-  }
-  ion-row,
-  .mat-option-text:has(ion-row),
-  .mdc-list-item__primary-text:has(ion-row) {
-    padding: 0;
-    width: 100%; // Fix sumaris-app#943
-  }
-  mat-autocomplete-footer {
-    .mat-option-text,
-    .mdc-list-item__primary-text {
-      padding: 0 !important;
-    }
-  }
-}
-
-mat-option:not(:last-of-type) {
-  border-bottom: 1px solid #{$app-select-option-border-color};
-}
-
-
-.cdk-overlay-pane:has(.mat-mdc-select-panel) {
-  --min-width: 200px;
-  --max-width: calc(min(100%, 100vw - 64px));
-  min-width: var(--min-width) !important;
-  max-width: var(--max-width) !important;
-
-  // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
-  &:has(.mat-select-panel-fit-content) {
-    --min-width: fit-content !important;
-  }
-
-  .mat-mdc-select-panel {
-    --mat-switch-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
-    transition: --mat-switch-visible-track-transition;
-    transform: scaleY(1) !important;
-
-    &.hidden {
-      transform: scaleY(0) !important;
-    }
-
-    .mat-mdc-option {
-      // When option text wrap, do not increase the option height
-      ion-col.ion-text-wrap {
-        max-height: var(--mat-option-max-height, #{$mat-option-max-height});
-      }
-    }
-  }
-
-}
-
-
-.cdk-overlay-pane:has(.mat-mdc-autocomplete-panel) {
-  --min-width: 200px;
-  --max-width: calc(min(100%, 100vw - 64px));
-  min-width: var(--min-width) !important;
-  max-width: var(--max-width) !important;
-
-  // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
-  &:has(.mat-select-panel-fit-content) {
-    --min-width: fit-content !important;
-  }
-
-  &:has(.min-width-medium),
-  &:has(.mat-mdc-autocomplete-panel-medium-size) {
-    --min-width: 300px;
-  }
-
-  &:has(.min-width-large),
-  &:has(.mat-mdc-autocomplete-panel-large-size) {
-    --min-width: 400px;
-  }
-
-  &:has(.min-width-xlarge),
-  &:has(.mat-mdc-autocomplete-panel-xlarge-size) {
-    --min-width: 450px;
-  }
-
-  &:has(.min-width-80vw) {
-    --min-width: 80vw;
-  }
-
-  &:has(.mat-mdc-autocomplete-panel-full-size),
-  &:has(.full-size) {
-    --margin-left: 32px;
-    --margin-right: 32px;
-    --min-width: calc(100vw - var(--margin-left) - var(--margin-right));
-    --max-width: calc(100vw - var(--margin-left) - var(--margin-right));
-    position: fixed;
-    left: var(--margin-left) !important;
-    right: unset !important;
-  }
-}
-
-.mat-mdc-select-panel,
-.mat-mdc-autocomplete-panel {
-  /* when multiple selection enable */
-  .mat-mdc-option mat-pseudo-checkbox,
-  .mat-mdc-option .mat-pseudo-checkbox-full {
-    margin-left: 12px;
-    margin-right: 4px;
-  }
-
-  padding: 0 !important;
-}
-
-ion-list,
-.mat-mdc-menu-panel {
-  &.ion-list-popover {
-    padding: 0 !important;
-  }
-}
-
-// --------------------------------------------------
-// mat-autocomplete-field
-// --------------------------------------------------
-
-// Define useful variable
-html.plt-ios {
-  --ion-searchbar-height: 60px;
-  //--ion-toolbar-height: 58px;
-}
-html {
-  //--ion-searchbar-height: 58px;
-}
-
-ion-list,
-.mat-mdc-menu-panel,
-.mat-mdc-select-panel,
-.mat-mdc-autocomplete-panel {
-
-  /* Avoid bad display, when opening panel for the first time  */
-  &.ng-trigger-transformPanel {
-    ion-searchbar.mat-select-header,
-    ion-searchbar.mat-autocomplete-header {
-      visibility: visible;
-      display: flex;
-      opacity: 1;
-      transition: opacity 0.3s ease-in-out;
-    }
-  }
-
-  .mat-mdc-optgroup.mat-select-searchbar,
-  .mat-mdc-option.mat-autocomplete-searchbar
-  {
-    padding: 0 !important;
-    height: var(--ion-searchbar-height, 58px) !important;
-    background-color: var(--ion-color-secondary100) !important;
-    pointer-events: inherit !important;
-
-    .mat-mdc-optgroup-label {
-      background-color: var(--ion-color-secondary100) !important;
-      padding: 0;
-      display: block;
-    }
-
-    /* hide pseudo checkbox, in the searchbar*/
-    mat-pseudo-checkbox {
-      visibility: hidden;
-      display: none;
-    }
-
-    &.mat-select-searchbar-sticky {
-      z-index: 1001;
-      /* Set header as sticky*/
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-    }
-
-    .searchbar-input {
-      --background: var(--app-form-field-background-color, var(--ion-background-color));
-      padding-inline-end: 34px; // Keep a place for the clear button
-    }
-  }
-
-  ion-row.ion-list-header,
-  ion-row.mat-select-header,
-  ion-row.mat-menu-header,
-  ion-row.mat-autocomplete-header {
-    &.multiple {
-      /* Offset due to mat-pseudo-checkbox */
-      padding-left: 32px;
-    }
-    &.column {
-      /* Set header as sticky*/
-      position: -webkit-sticky;
-      position: sticky;
-      top: 0;
-      z-index: 1001;
-      background-color: var(--ion-color-secondary);
-      border-bottom: 1px solid #{$app-select-option-border-color};
-      color: var(--ion-color-secondary-contrast);
-      line-height: 20px;
-      @include font-size(12px);
-      font-weight: 500;
-      height: 20px;
-      ion-col {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-      }
-      &.mat-select-searchbar-sticky {
-        /* offset because of the searchbar height */
-        top: var(--ion-searchbar-height, 58px);
-      }
-    }
-
-  }
-
-  ion-row.ion-list-footer,
-  ion-row.mat-select-footer,
-  ion-row.mat-menu-footer,
-  ion-row.mat-autocomplete-footer,
-  mat-option.mat-autocomplete-footer {
-    /* Set footer as sticky*/
-    position: -webkit-sticky;
-    position: sticky;
-    bottom: 0;
-    z-index: 1001;
-    border-top: 1px solid #{$app-select-option-border-color};
-    background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
-    color: var(--ion-color-medium) !important; // not working on mobile form because the mat-option is disabled
-    @include font-size(12px);
-    font-weight: 500;
-    height: 20px;
-    min-height: 20px;
-    line-height: 20px;
-    opacity: 1 !important;
-
-    ion-col {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-
-  ion-row {
-    --ion-grid-column-padding: 0;
-
-    ion-col {
-      --padding-start: 8px;
-      padding: 0 !important;
-      padding-left: var(--padding-start, 0) !important;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-
-  .odd {
-    background: var(--ion-light-color-shade, $light);
-  }
-
-  .mat-mdc-option[no-padding],
-  mat-option[no-padding] {
-    padding: 0 !important;
-  }
-}
-
-// --------------------------------------------------
-// Table > Filter expansion panel
-// --------------------------------------------------
-
-mat-expansion-panel {
-
-  &.filter-panel {
-
-    background: var(--ion-color-secondary50);
-    color: var(--ion-color-secondary50-contrast);
-    margin-bottom: 5px;
-
-    .form-container {
-      mat-form-field {
-        width: 100%;
-
-        .datetime-md {
-          padding: 0 !important;
-        }
-      }
-    }
-
-    mat-action-row {
-      ion-label {
-        line-height: 36px;
-      }
-    }
-  }
-
-  &.filter-panel-floating {
-    z-index: 999;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-
-  &.filter-panel-pinned {
-    overflow-y: scroll;
-  }
-
-  .mat-expansion-panel-header,
-  mat-expansion-panel-header {
-    padding: var(--expansion-panel-header-padding, var(--expansion-panel-padding));
-  }
-  .mat-expansion-panel-body {
-    padding: var(--expansion-panel-padding, var(--ion-padding));
-  }
-}
-
-// --------------------------------------------------
-// Form buttons bar
-// --------------------------------------------------
-app-form-buttons-bar {
-  --form-buttons-bar-buttons-width: 400px;
-  --form-buttons-bar-content-max-width: calc(100% - var(--form-buttons-bar-buttons-width) - 40px /*right menu toggle button*/);
-  .app-form-buttons-bar-content {
-    max-width: var(--form-buttons-bar-content-max-width);
-  }
-}
-
-// --------------------------------------------------
-// Ion-select
-// --------------------------------------------------
-
-ion-popover.select-popover {
-  .popover-content {
-    min-width: calc(min(80%, 200px));
-  }
-}
-
-@media screen and (min-width: $screen-sm) {
-  ion-popover.select-popover {
-    .popover-content {
-      min-width: 300px;
-    }
-
-    ion-radio .radio-icon {
-      border: 0 !important;
-    }
-  }
-}
-
-
-// --------------------------------------------------
-// Ionic list
-// --------------------------------------------------
-ion-list {
-  ion-item.ion-item-selected {
-    --ion-color-base: var(--ion-color-secondary100);
-    --ion-color-contrast: var(--ion-color-secondary100-contrast);
-
-    &:before {
-      background: var(--ion-color-base) !important;
-      color: var(--ion-color-contrast) !important;
-    }
-  }
-}
-
-// ------------------------
-// Other material component
-
-.flex-spacer,
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-ion-toolbar {
-  --min-height: var(--ion-toolbar-height, 56px);
-}
-ion-toolbar[translucent] {
-  --background: transparent !important;
-}
-
-// --- mat-stepper component
-mat-horizontal-stepper {
-  .mat-horizontal-stepper-header-container {
-    padding: 0;
-  }
-
-  .mat-horizontal-content-container {
-    padding: 0;
-  }
-}
-
-
-// Extra small device: Phones (<767px)
-@media screen and (max-width: $screen-xs-max) {
-  mat-horizontal-stepper {
-    .mat-horizontal-stepper-header-container {
-      .mat-horizontal-stepper-header {
-        padding-left: 5px;
-      }
-
-      .mat-stepper-horizontal-line {
-        display: none;
-      }
-    }
-
-    .mat-horizontal-content-container {
-      padding: 0;
-    }
-  }
-}
-
-mat-button-toggle.mat-button-toggle-checked,
-mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
-  background-color: var(--ion-color-light);
-  color: white;
-}
-
-// --------------------------------------------------
-// Material menu
-// --------------------------------------------------
-
-
-.mat-mdc-menu-panel {
-
-  // width = 400px
-  &.mat-menu-size-400 {
-    min-width: unset;
-    width: 400px;
-    max-width: calc(90vw);
-  }
-  // width = 75vw
-  &.mat-menu-size-75vw {
-    min-width: unset;
-    width: calc(75vw);
-    max-width: calc(90vw);
-  }
-  // width = 100vw
-  &.mat-menu-size-100vw {
-    min-width: unset;
-    width: calc(100vw);
-    max-width: calc(100vw);
-  }
-
-  // No padding
-  &.ion-no-padding {
-    .mat-mdc-menu-content {
-      padding: 0 !important;
-    }
-  }
-
-  // Small menu item (e.g. for actions on a table row)
-  &.mat-mdc-menu-item-small-height .mat-mdc-menu-item,
-  .mat-mdc-menu-item.mat-mdc-menu-item-small-height
-  {
-    padding: 0 8px;
-    height: 35px;
-    line-height: 35px;
-  }
-  //  Reduce the font size, on label just inside a mat-menu (e.g. see trips.page.html)
-  .mat-mdc-menu-content > ion-label {
-    @include font-size(12px);
-  }
-
-  .mat-mdc-menu-content {
-    .mat-mdc-menu-item {
-      --mat-menu-item-label-text-color: var(--ion-text-color);
-      // Required for the dark theme (otherwise the icon will be dark)
-      --mat-menu-item-icon-color: rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.54);
-    }
-  }
-
-  .mat-mdc-menu-content ion-item > ion-icon[slot="start"] {
-    margin-right: 16px;
-    vertical-align: middle;
-  }
-
-  // Menu title (e.g. see extraction map)
-  .mat-mdc-menu-item.mat-mdc-menu-title {
-    padding: 0 8px;
-    height: 27px;
-    line-height: 27px;
-    @include font-size(12px);
-    pointer-events: none;
-    color: var(--ion-color-medium, rgba(0, 0, 0, 0.38));
-  }
-}
-
-// --------------------------------------------------
-// Alert
-// --------------------------------------------------
-
-ion-alert button.alert-button {
-  cursor: pointer;
-}
-
-
-// --------------------------------------------------
-// Overlay
-// --------------------------------------------------
-
-.cdk-overlay-dark-backdrop {
-  background: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32));
-}
-
-// --------------------------------------------------
-// Date and time picker
-// --------------------------------------------------
-// Date picker
-.mat-datepicker-content {
-  --mat-datepicker-calendar-container-background-color: var(--ion-background-color, #fff) !important;
-  --mat-datepicker-calendar-container-text-color: var(--ion-text-color, #000000) !important;
-  --mat-datepicker-calendar-date-text-color: var(--ion-text-color);
-  --mat-datepicker-calendar-body-label-text-color: var(--ion-color-step-500);
-  --mat-datepicker-calendar-header-text-color: var(--ion-color-step-500);
-}
-mat-calendar {
-  .mat-calendar-header {
-    background-color: var(--ion-color-secondary) !important;
-    color: var(--ion-color-secondary-contrast) !important;
-
-    button {
-      color: var(--ion-color-secondary-contrast) !important;
-    }
-  }
-
-  .mat-calendar-body-selected {
-    background-color: var(--ion-color-accent) !important;
-    color: var(--ion-color-accent-contrast) !important;
-    font-weight: bold;
-  }
-
-  .mat-calendar-arrow {
-    border-top-color: var(--ion-color-secondary-contrast) !important;
-  }
-}
-
-@media (orientation: landscape) {
-  .mat-datepicker-content-touch {
-    height: fit-content !important;
-    min-height: 310px;
-
-    .mat-calendar-controls {
-      margin-top: 0;
-    }
-    .mat-datepicker-content-container {
-      &.mat-datepicker-content-container-with-actions {
-        height: unset !important;
-      }
-      .mat-datepicker-actions {
-        background-color: var(--mat-datepicker-calendar-container-background-color);
-        margin-top: -12px;
-      }
-    }
-  }
-}
-
-
-// --------------------------------------------------
-// Time picker
-// --------------------------------------------------
-
-.timepicker {
-  .timepicker-header,
-  .timepicker-header .mat-toolbar.mat-accent{
-    // Change header color to 'secondary'
-    --mat-toolbar-container-background-color: var(--ion-color-secondary) !important;
-    --mat-toolbar-container-text-color: var(--ion-color-secondary-contrast) !important;
-  }
-
-  ngx-mat-timepicker-face .clock-face {
-    background-color: var(--app-form-field-background-color) !important;
-
-    .mat-toolbar.mat-accent {
-      --mat-toolbar-container-background-color: var(--ion-color-accent);
-      --mat-toolbar-container-text-color: var(--ion-color-accent-contrast);
-    }
-    button.mat-mdc-mini-fab {
-      &.mat-unthemed {
-        --mat-fab-small-foreground-color: var(--ion-text-color);
-      }
-
-      &.mat-accent {
-        --mdc-fab-small-container-color: var(--ion-color-accent);
-        --mat-fab-small-foreground-color: var(--ion-color-accent-contrast);
-      }
-    }
-  }
-}
-
-
-.ngx-mat-timepicker-dialog {
-  // Increase max-width for very small screen
-  --mat-dialog-container-small-max-width: calc(100vw - var(--ion-padding, 16px) * 2);
-}
-
-// --------------------------------------------------
-// Mat chip field
-// --------------------------------------------------
-
-.mat-mdc-form-field-type-mat-chip-grid {
-  .mat-mdc-form-field-infix {
-    --mdc-chip-container-height: 24px !important;
-  }
-}
-
-
-// --------------------------------------------------
-// Pages
-// --------------------------------------------------
-ion-item {
-  ion-label.error {
-    line-height: 16px;
-    line-break: normal;
-    overflow: visible;
-    white-space: normal;
-  }
-}
-
-// --------------------------------------------------
-// Modal
-// --------------------------------------------------
-
-ion-modal.stack-modal {
-  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
-}
-
-ion-modal.modal-large {
-  --min-height: calc(100% - 50px) !important;
-  --min-width: calc(100% - 100px) !important;
-}
-ion-modal.modal-fullscreen {
-  --min-height: calc(100%) !important;
-  --min-width: calc(100%) !important;
-}
-ion-modal.modal-notifications {
-  --min-height: calc(100% - 50px) !important;
-}
-
-
-// --------------------------------------------------
-// Popover
-// --------------------------------------------------
-
-.popover-large {
-  --min-width: calc(min(500px, 80%));
-}
-
-.popover-notifications {
-  --popover-top: 0;
-  --max-height: calc(90vh - 40px /* header + footer height */ - var(--popover-top, 0px) - var(--offset-y, 0px));
-
-  ion-item {
-    --ion-item-background-color-hover: var(--ion-color-light);
-    &.unread {
-      --ion-item-background: rgba(var(--ion-color-secondary100-rgb), 0.2);
-      --ion-item-background-color-hover: rgba(var(--ion-color-secondary100-rgb), 0.3);
-    }
-  }
-}
-
-// --------------------------------------------------
-// Large button with icon floating on right
-// --------------------------------------------------
-.flex-margin ion-icon,
-.flex-margin span {
-  margin-left: auto;
-}
-
-// --------------------------------------------------
-// Icon tooltip, and title
-// --------------------------------------------------
-// Fix Button icon name overrides button's own title on mouse over
-/*ion-icon[name='chatbox'] {
-  pointer-events: none !important;
-}*/
-.mat-cell {
-  /* smaller size, for the comment icon */
-  mat-icon.comment {
-    @include font-size(16pt);
-    height: 100%;
-    vertical-align: center;
-    color: var(--ion-color-tertiary, grey);
-
-    &.disabled {
-      color: var(--ion-color-medium, grey);
-    }
-  }
-}
-
-// --------------------------------------------------
-// Icon inside text
-// --------------------------------------------------
-mat-icon,
-ion-icon {
-  &.text-size {
-    font-size: 1em;
-    width: 1em;
-    height: 1em;
-  }
-}
-ion-button[expand="block"],
-ion-button[expand="full"],
-.mat-button,
-.mat-raised-button {
-  mat-icon,
-  ion-icon {
-    &[slot] {
-      pointer-events: none;
-      width: 24px;
-      height: 24px;
-    }
-    &[slot='start'],
-    &[slot='end'] {
-      margin-left: unset;
-      margin-right: unset;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-    &t[slot='start'] {
-      margin-inline-start: -0.3em;
-      margin-inline-end: 0.3em;
-    }
-    &[slot='end'] {
-      margin-inline-start: 0.3em;
-      margin-inline-end: -0.3em;
-    }
-    &.ion-float-start[slot='start'] {
-      position: absolute;
-      left: 0;
-    }
-    &.ion-float-end[slot='end'] {
-      position: absolute;
-      right: 0;
-    }
-  }
-}
-
-// --------------------------------------------------
-// Icon multiple
-// --------------------------------------------------
-ion-icon.icon-secondary,
-mat-icon.icon-secondary,
-.mat-mdc-icon-button .mat-icon.icon-secondary {
-  position: absolute;
-  left: 0;
-}
-
-// --------------------------------------------------
-// Toast
-// --------------------------------------------------
-ion-toast {
-  --background:  var(--ion-color-dark);
-  --color: var(--ion-color-dark-contrast);
-  --button-color: var(--color);
-
-  &.secondary {
-    --background: var(--ion-color-secondary);
-    --color: var(--ion-color-secondary-contrast);
-  }
-  &.accent {
-    --background: var(--ion-color-accent);
-    --color: var(--ion-color-accent-contrast);
-  }
-  &.danger {
-    --background: var(--ion-color-danger);
-    --color: var(--ion-color-danger-contrast);
-  }
-
-  /* -- workaround because toast animation failed */
-  --toast-max-height: 75px;
-
-  &.toast-stack-offset-1 {
-    --toast-stack-offset: 1;
-  }
-  &.toast-stack-offset-2 {
-    --toast-stack-offset: 2;
-  }
-  &.toast-stack-offset-3 {
-    --toast-stack-offset: 3;
-  }
-  &.toast-stack-offset-4 {
-    --toast-stack-offset: 4;
-  }
-
-  &.toast-stacked-top {
-    --toast-top: calc(var(--toast-stack-offset, 0) * var(--toast-max-height, 0px));
-    transform: translateY(var(--toast-top));
-  }
-  &.toast-stacked-bottom {
-    --toast-bottom: calc((var(--toast-stack-offset, 0) + 1) * var(--toast-max-height, 0px));
-    transform: translateY(var(--toast-bottom));
-  }
-}
-
-// --------------------------------------------------
-// Refresher
-// --------------------------------------------------
-ion-refresher.refresher-native {
-  z-index: 1000;
-}
-
-// --------------------------------------------------
-// Mat Side
-// --------------------------------------------------
-.mat-drawer-container {
-  --mat-sidenav-container-text-color: var(--ion-text-color);
-  --mat-sidenav-container-background-color: var(--ion-background-color);
-  --mat-sidenav-container-divider-color: var(--ion-border-color, rgba(0, 0, 0, 0.12));
-  --mat-sidenav-container-elevation-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
-  --mat-sidenav-content-text-color: var(--ion-text-color);
-  --mat-sidenav-content-background-color: var(--ion-background-color);
-  --mat-sidenav-scrim-color: rgba(var(--ion-backdrop-color-rgb), var(--ion-backdrop-opacity));
-}
-
-// --------------------------------------------------
-// Named filter
-// --------------------------------------------------
-
-ion-toolbar app-named-filter-selector,
-mat-toolbar app-named-filter-selector {
-
-  // Hide subscript wrapper (will hide hint)
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-    visibility: hidden;
-  }
-}
-
-// --------------------------------------------------
-// Toolbar
-// --------------------------------------------------
+
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+*::selection {
+  background: var(--ion-color-shade, rgba(var(--ion-color-text-rgb, 0, 0, 0), 0.3));
+}
+
+// Text style
+// --------------------------------------------------
+.text-italic {
+  font-style: italic;
+}
+.ion-text-wrap {
+  white-space: normal;
+  word-wrap: break-word;
+}
+
+// Page Container Structure
+// --------------------------------------------------
+
+.ion-page-invisible {
+  opacity: 0;
+}
+
+ion-toolbar ion-title,
+app-toolbar ion-title {
+  small {
+    font-weight: normal;
+    br {
+      display: none;
+      visibility: hidden;
+    }
+  }
+  // Add a separator, after the <small> part
+  small:first-of-type:after {
+    content: " -  ";
+  }
+}
+
+@media screen and (max-width: $screen-sm-max) {
+  ion-toolbar ion-title,
+  app-toolbar ion-title {
+    small {
+      @include font-size(10pt);
+    }
+    small br {
+      display: unset;
+      visibility: unset;
+    }
+    // Add a separator, after the <small> part
+    small:first-of-type:after {
+      content: "";
+    }
+  }
+}
+
+// Ionic Safe Margins
+// --------------------------------------------------
+html.plt-ios.plt-hybrid,
+html.plt-ios.plt-pwa {
+  --ion-statusbar-padding: 20px;
+}
+
+html {
+  --ion-safe-area-top: var(--ion-statusbar-padding);
+}
+
+// TODO: remove once Safari 11.2 dies
+@supports (padding-top: constant(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: constant(safe-area-inset-top);
+    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
+    --ion-safe-area-left: constant(safe-area-inset-left);
+    --ion-safe-area-right: constant(safe-area-inset-right);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  html {
+    --ion-safe-area-top: env(safe-area-inset-top);
+    --ion-safe-area-bottom: env(safe-area-inset-bottom);
+    --ion-safe-area-left: env(safe-area-inset-left);
+    --ion-safe-area-right: env(safe-area-inset-right);
+  }
+}
+
+// --------------------------------------------------
+// Back button in app toolbar
+// --------------------------------------------------
+
+.ion-page.can-go-back {
+  app-toolbar {
+
+    ion-menu-toggle {
+      display: none !important;
+    }
+
+    // Back button
+    ion-back-button,
+    ion-button.back-button {
+      display: inline-block !important;
+    }
+  }
+}
+
+// --------------------------------------------------
+// Main Menu
+// --------------------------------------------------
+.split-pane-md.split-pane-visible > .split-pane-side {
+  max-width: #{$app-menu-width} !important;
+}
+
+ion-menu.menu-side-left {
+  .menu-inner {
+    .scroll {
+      overflow-y: auto !important;
+
+      .scroll-inner {
+        min-height: auto !important;
+      }
+    }
+  }
+}
+
+
+mat-form-field {
+  .mat-paginator-page-size-select {
+    @include font-size-important(14px);
+  }
+}
+
+
+// --- mat-date-short-field
+mat-calendar.mat-date-short-panel {
+  // Hide some buttons (e.g. to change the period)
+  // and the month view
+  .mat-calendar-period-button,
+  mat-year-view {
+    visibility: hidden;
+    display: none;
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  form.form-container {
+    ion-grid {
+      ion-col[size-sm="auto"] > mat-date-time-field {
+        // When inside a form + grid : fix <ion-col size-sm="auto"> alignment in some screen resolution
+        max-width: 200px;
+      }
+    }
+  }
+}
+// --------------------------------------------------
+// mat-checkbox
+// --------------------------------------------------
+
+mat-checkbox {
+  .mat-checkbox-checkmark {
+    .mat-checkbox-checkmark-path {
+      // TODO: change to accent-contrast
+      stroke: white !important;
+    }
+  }
+}
+
+// --------------------------------------------------
+// mat-autocomplete and mat-select panel
+// --------------------------------------------------
+
+// When simple text option, add a padding
+mat-option {
+
+  .mdc-list-item__primary-text {
+    display: inline-block;
+    flex-grow: 1;
+    box-sizing: border-box;
+  }
+  .mat-option-text:not(:has(ion-row)),
+  .mat-option-text:has(ion-searchbar),
+  .mdc-list-item__primary-text:has(ion-searchbar) {
+    padding: 0 !important;
+  }
+  ion-row,
+  .mat-option-text:has(ion-row),
+  .mdc-list-item__primary-text:has(ion-row) {
+    padding: 0;
+    width: 100%; // Fix sumaris-app#943
+  }
+  mat-autocomplete-footer {
+    .mat-option-text,
+    .mdc-list-item__primary-text {
+      padding: 0 !important;
+    }
+  }
+}
+
+mat-option:not(:last-of-type) {
+  border-bottom: 1px solid #{$app-select-option-border-color};
+}
+
+
+.cdk-overlay-pane:has(.mat-mdc-select-panel) {
+  --min-width: 200px;
+  --max-width: calc(min(100%, 100vw - 64px));
+  min-width: var(--min-width) !important;
+  max-width: var(--max-width) !important;
+
+  // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+  &:has(.mat-select-panel-fit-content) {
+    --min-width: fit-content !important;
+  }
+
+  .mat-mdc-select-panel {
+    --mat-switch-visible-track-transition: transform 75ms 50ms cubic-bezier(0, 0, 0.2, 1);
+    transition: --mat-switch-visible-track-transition;
+    transform: scaleY(1) !important;
+
+    &.hidden {
+      transform: scaleY(0) !important;
+    }
+
+    .mat-mdc-option {
+      // When option text wrap, do not increase the option height
+      ion-col.ion-text-wrap {
+        max-height: var(--mat-option-max-height, #{$mat-option-max-height});
+      }
+    }
+  }
+
+}
+
+
+.cdk-overlay-pane:has(.mat-mdc-autocomplete-panel) {
+  --min-width: 200px;
+  --max-width: calc(min(100%, 100vw - 64px));
+  min-width: var(--min-width) !important;
+  max-width: var(--max-width) !important;
+
+  // FIXME : This is a workaround find at : https://github.com/angular/components/issues/26000#issuecomment-1563107933
+  &:has(.mat-select-panel-fit-content) {
+    --min-width: fit-content !important;
+  }
+
+  &:has(.min-width-medium),
+  &:has(.mat-mdc-autocomplete-panel-medium-size) {
+    --min-width: 300px;
+  }
+
+  &:has(.min-width-large),
+  &:has(.mat-mdc-autocomplete-panel-large-size) {
+    --min-width: 400px;
+  }
+
+  &:has(.min-width-xlarge),
+  &:has(.mat-mdc-autocomplete-panel-xlarge-size) {
+    --min-width: 450px;
+  }
+
+  &:has(.min-width-80vw) {
+    --min-width: 80vw;
+  }
+
+  &:has(.mat-mdc-autocomplete-panel-full-size),
+  &:has(.full-size) {
+    --margin-left: 32px;
+    --margin-right: 32px;
+    --min-width: calc(100vw - var(--margin-left) - var(--margin-right));
+    --max-width: calc(100vw - var(--margin-left) - var(--margin-right));
+    position: fixed;
+    left: var(--margin-left) !important;
+    right: unset !important;
+  }
+}
+
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel {
+  /* when multiple selection enable */
+  .mat-mdc-option mat-pseudo-checkbox,
+  .mat-mdc-option .mat-pseudo-checkbox-full {
+    margin-left: 12px;
+    margin-right: 4px;
+  }
+
+  padding: 0 !important;
+}
+
+ion-list,
+.mat-mdc-menu-panel {
+  &.ion-list-popover {
+    padding: 0 !important;
+  }
+}
+
+// --------------------------------------------------
+// mat-autocomplete-field
+// --------------------------------------------------
+
+// Define useful variable
+html.plt-ios {
+  --ion-searchbar-height: 60px;
+  //--ion-toolbar-height: 58px;
+}
+html {
+  //--ion-searchbar-height: 58px;
+}
+
+ion-list,
+.mat-mdc-menu-panel,
+.mat-mdc-select-panel,
+.mat-mdc-autocomplete-panel {
+
+  /* Avoid bad display, when opening panel for the first time  */
+  &.ng-trigger-transformPanel {
+    ion-searchbar.mat-select-header,
+    ion-searchbar.mat-autocomplete-header {
+      visibility: visible;
+      display: flex;
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+
+  .mat-mdc-optgroup.mat-select-searchbar,
+  .mat-mdc-option.mat-autocomplete-searchbar
+  {
+    padding: 0 !important;
+    height: var(--ion-searchbar-height, 58px) !important;
+    background-color: var(--ion-color-secondary100) !important;
+    pointer-events: inherit !important;
+
+    .mat-mdc-optgroup-label {
+      background-color: var(--ion-color-secondary100) !important;
+      padding: 0;
+      display: block;
+    }
+
+    /* hide pseudo checkbox, in the searchbar*/
+    mat-pseudo-checkbox {
+      visibility: hidden;
+      display: none;
+    }
+
+    &.mat-select-searchbar-sticky {
+      z-index: 1001;
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+    }
+
+    .searchbar-input {
+      --background: var(--app-form-field-background-color, var(--ion-background-color));
+      padding-inline-end: 34px; // Keep a place for the clear button
+    }
+  }
+
+  ion-row.ion-list-header,
+  ion-row.mat-select-header,
+  ion-row.mat-menu-header,
+  ion-row.mat-autocomplete-header {
+    &.multiple {
+      /* Offset due to mat-pseudo-checkbox */
+      padding-left: 32px;
+    }
+    &.column {
+      /* Set header as sticky*/
+      position: -webkit-sticky;
+      position: sticky;
+      top: 0;
+      z-index: 1001;
+      background-color: var(--ion-color-secondary);
+      border-bottom: 1px solid #{$app-select-option-border-color};
+      color: var(--ion-color-secondary-contrast);
+      line-height: 20px;
+      @include font-size(12px);
+      font-weight: 500;
+      height: 20px;
+      ion-col {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      &.mat-select-searchbar-sticky {
+        /* offset because of the searchbar height */
+        top: var(--ion-searchbar-height, 58px);
+      }
+    }
+
+  }
+
+  ion-row.ion-list-footer,
+  ion-row.mat-select-footer,
+  ion-row.mat-menu-footer,
+  ion-row.mat-autocomplete-footer,
+  mat-option.mat-autocomplete-footer {
+    /* Set footer as sticky*/
+    position: -webkit-sticky;
+    position: sticky;
+    bottom: 0;
+    z-index: 1001;
+    border-top: 1px solid #{$app-select-option-border-color};
+    background-color: var(--ion-toolbar-background, #{$ion-toolbar-background});
+    color: var(--ion-color-medium) !important; // not working on mobile form because the mat-option is disabled
+    @include font-size(12px);
+    font-weight: 500;
+    height: 20px;
+    min-height: 20px;
+    line-height: 20px;
+    opacity: 1 !important;
+
+    ion-col {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  ion-row {
+    --ion-grid-column-padding: 0;
+
+    ion-col {
+      --padding-start: 8px;
+      padding: 0 !important;
+      padding-left: var(--padding-start, 0) !important;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+
+  .odd {
+    background: var(--ion-light-color-shade, $light);
+  }
+
+  .mat-mdc-option[no-padding],
+  mat-option[no-padding] {
+    padding: 0 !important;
+  }
+}
+
+// --------------------------------------------------
+// Table > Filter expansion panel
+// --------------------------------------------------
+
+mat-expansion-panel {
+
+  &.filter-panel {
+
+    background: var(--ion-color-secondary50);
+    color: var(--ion-color-secondary50-contrast);
+    margin-bottom: 5px;
+
+    .form-container {
+      mat-form-field {
+        width: 100%;
+
+        .datetime-md {
+          padding: 0 !important;
+        }
+      }
+    }
+
+    mat-action-row {
+      ion-label {
+        line-height: 36px;
+      }
+    }
+  }
+
+  &.filter-panel-floating {
+    z-index: 999;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  &.filter-panel-pinned {
+    overflow-y: scroll;
+  }
+
+  .mat-expansion-panel-header,
+  mat-expansion-panel-header {
+    padding: var(--expansion-panel-header-padding, var(--expansion-panel-padding));
+  }
+  .mat-expansion-panel-body {
+    padding: var(--expansion-panel-padding, var(--ion-padding));
+  }
+}
+
+// --------------------------------------------------
+// Form buttons bar
+// --------------------------------------------------
+app-form-buttons-bar {
+  --form-buttons-bar-buttons-width: 400px;
+  --form-buttons-bar-content-max-width: calc(100% - var(--form-buttons-bar-buttons-width) - 40px /*right menu toggle button*/);
+  .app-form-buttons-bar-content {
+    max-width: var(--form-buttons-bar-content-max-width);
+  }
+}
+
+// --------------------------------------------------
+// Ion-select
+// --------------------------------------------------
+
+ion-popover.select-popover {
+  .popover-content {
+    min-width: calc(min(80%, 200px));
+  }
+}
+
+@media screen and (min-width: $screen-sm) {
+  ion-popover.select-popover {
+    .popover-content {
+      min-width: 300px;
+    }
+
+    ion-radio .radio-icon {
+      border: 0 !important;
+    }
+  }
+}
+
+
+// --------------------------------------------------
+// Ionic list
+// --------------------------------------------------
+ion-list {
+  ion-item.ion-item-selected {
+    --ion-color-base: var(--ion-color-secondary100);
+    --ion-color-contrast: var(--ion-color-secondary100-contrast);
+
+    &:before {
+      background: var(--ion-color-base) !important;
+      color: var(--ion-color-contrast) !important;
+    }
+  }
+}
+
+// ------------------------
+// Other material component
+
+.flex-spacer,
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+ion-toolbar {
+  --min-height: var(--ion-toolbar-height, 56px);
+}
+ion-toolbar[translucent] {
+  --background: transparent !important;
+}
+
+// --- mat-stepper component
+mat-horizontal-stepper {
+  .mat-horizontal-stepper-header-container {
+    padding: 0;
+  }
+
+  .mat-horizontal-content-container {
+    padding: 0;
+  }
+}
+
+
+// Extra small device: Phones (<767px)
+@media screen and (max-width: $screen-xs-max) {
+  mat-horizontal-stepper {
+    .mat-horizontal-stepper-header-container {
+      .mat-horizontal-stepper-header {
+        padding-left: 5px;
+      }
+
+      .mat-stepper-horizontal-line {
+        display: none;
+      }
+    }
+
+    .mat-horizontal-content-container {
+      padding: 0;
+    }
+  }
+}
+
+mat-button-toggle.mat-button-toggle-checked,
+mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-disabled {
+  background-color: var(--ion-color-light);
+  color: white;
+}
+
+// --------------------------------------------------
+// Material menu
+// --------------------------------------------------
+
+
+.mat-mdc-menu-panel {
+
+  // width = 400px
+  &.mat-menu-size-400 {
+    min-width: unset;
+    width: 400px;
+    max-width: calc(90vw);
+  }
+  // width = 75vw
+  &.mat-menu-size-75vw {
+    min-width: unset;
+    width: calc(75vw);
+    max-width: calc(90vw);
+  }
+  // width = 100vw
+  &.mat-menu-size-100vw {
+    min-width: unset;
+    width: calc(100vw);
+    max-width: calc(100vw);
+  }
+
+  // No padding
+  &.ion-no-padding {
+    .mat-mdc-menu-content {
+      padding: 0 !important;
+    }
+  }
+
+  // Small menu item (e.g. for actions on a table row)
+  &.mat-mdc-menu-item-small-height .mat-mdc-menu-item,
+  .mat-mdc-menu-item.mat-mdc-menu-item-small-height
+  {
+    padding: 0 8px;
+    height: 35px;
+    line-height: 35px;
+  }
+  //  Reduce the font size, on label just inside a mat-menu (e.g. see trips.page.html)
+  .mat-mdc-menu-content > ion-label {
+    @include font-size(12px);
+  }
+
+  .mat-mdc-menu-content {
+    .mat-mdc-menu-item {
+      --mat-menu-item-label-text-color: var(--ion-text-color);
+      // Required for the dark theme (otherwise the icon will be dark)
+      --mat-menu-item-icon-color: rgba(var(--ion-text-color-rgb, 255, 255, 255), 0.54);
+    }
+  }
+
+  .mat-mdc-menu-content ion-item > ion-icon[slot="start"] {
+    margin-right: 16px;
+    vertical-align: middle;
+  }
+
+  // Menu title (e.g. see extraction map)
+  .mat-mdc-menu-item.mat-mdc-menu-title {
+    padding: 0 8px;
+    height: 27px;
+    line-height: 27px;
+    @include font-size(12px);
+    pointer-events: none;
+    color: var(--ion-color-medium, rgba(0, 0, 0, 0.38));
+  }
+}
+
+// --------------------------------------------------
+// Alert
+// --------------------------------------------------
+
+ion-alert button.alert-button {
+  cursor: pointer;
+}
+
+
+// --------------------------------------------------
+// Overlay
+// --------------------------------------------------
+
+.cdk-overlay-dark-backdrop {
+  background: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32));
+}
+
+// --------------------------------------------------
+// Date and time picker
+// --------------------------------------------------
+// Date picker
+.mat-datepicker-content {
+  --mat-datepicker-calendar-container-background-color: var(--ion-background-color, #fff) !important;
+  --mat-datepicker-calendar-container-text-color: var(--ion-text-color, #000000) !important;
+  --mat-datepicker-calendar-date-text-color: var(--ion-text-color);
+  --mat-datepicker-calendar-body-label-text-color: var(--ion-color-step-500);
+  --mat-datepicker-calendar-header-text-color: var(--ion-color-step-500);
+}
+mat-calendar {
+  .mat-calendar-header {
+    background-color: var(--ion-color-secondary) !important;
+    color: var(--ion-color-secondary-contrast) !important;
+
+    button {
+      color: var(--ion-color-secondary-contrast) !important;
+    }
+  }
+
+  .mat-calendar-body-selected {
+    background-color: var(--ion-color-accent) !important;
+    color: var(--ion-color-accent-contrast) !important;
+    font-weight: bold;
+  }
+
+  .mat-calendar-arrow {
+    border-top-color: var(--ion-color-secondary-contrast) !important;
+  }
+}
+
+@media (orientation: landscape) {
+  .mat-datepicker-content-touch {
+    height: fit-content !important;
+    min-height: 310px;
+
+    .mat-calendar-controls {
+      margin-top: 0;
+    }
+    .mat-datepicker-content-container {
+      &.mat-datepicker-content-container-with-actions {
+        height: unset !important;
+      }
+      .mat-datepicker-actions {
+        background-color: var(--mat-datepicker-calendar-container-background-color);
+        margin-top: -12px;
+      }
+    }
+  }
+}
+
+
+// --------------------------------------------------
+// Time picker
+// --------------------------------------------------
+
+.timepicker {
+  .timepicker-header,
+  .timepicker-header .mat-toolbar.mat-accent{
+    // Change header color to 'secondary'
+    --mat-toolbar-container-background-color: var(--ion-color-secondary) !important;
+    --mat-toolbar-container-text-color: var(--ion-color-secondary-contrast) !important;
+  }
+
+  ngx-mat-timepicker-face .clock-face {
+    background-color: var(--app-form-field-background-color) !important;
+
+    .mat-toolbar.mat-accent {
+      --mat-toolbar-container-background-color: var(--ion-color-accent);
+      --mat-toolbar-container-text-color: var(--ion-color-accent-contrast);
+    }
+    button.mat-mdc-mini-fab {
+      &.mat-unthemed {
+        --mat-fab-small-foreground-color: var(--ion-text-color);
+      }
+
+      &.mat-accent {
+        --mdc-fab-small-container-color: var(--ion-color-accent);
+        --mat-fab-small-foreground-color: var(--ion-color-accent-contrast);
+      }
+    }
+  }
+}
+
+
+.ngx-mat-timepicker-dialog {
+  // Increase max-width for very small screen
+  --mat-dialog-container-small-max-width: calc(100vw - var(--ion-padding, 16px) * 2);
+}
+
+// --------------------------------------------------
+// Mat chip field
+// --------------------------------------------------
+
+.mat-mdc-form-field-type-mat-chip-grid {
+  .mat-mdc-form-field-infix {
+    --mdc-chip-container-height: 24px !important;
+  }
+}
+
+
+// --------------------------------------------------
+// Pages
+// --------------------------------------------------
+ion-item {
+  ion-label.error {
+    line-height: 16px;
+    line-break: normal;
+    overflow: visible;
+    white-space: normal;
+  }
+}
+
+// --------------------------------------------------
+// Modal
+// --------------------------------------------------
+
+ion-modal.stack-modal {
+  --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
+}
+
+ion-modal.modal-large {
+  --min-height: calc(100% - 50px) !important;
+  --min-width: calc(100% - 100px) !important;
+}
+ion-modal.modal-fullscreen {
+  --min-height: calc(100%) !important;
+  --min-width: calc(100%) !important;
+}
+ion-modal.modal-notifications {
+  --min-height: calc(100% - 50px) !important;
+}
+
+
+// --------------------------------------------------
+// Popover
+// --------------------------------------------------
+
+.popover-large {
+  --min-width: calc(min(500px, 80%));
+}
+
+.popover-notifications {
+  --popover-top: 0;
+  --max-height: calc(90vh - 40px /* header + footer height */ - var(--popover-top, 0px) - var(--offset-y, 0px));
+
+  ion-item {
+    --ion-item-background-color-hover: var(--ion-color-light);
+    &.unread {
+      --ion-item-background: rgba(var(--ion-color-secondary100-rgb), 0.2);
+      --ion-item-background-color-hover: rgba(var(--ion-color-secondary100-rgb), 0.3);
+    }
+  }
+}
+
+// --------------------------------------------------
+// Large button with icon floating on right
+// --------------------------------------------------
+.flex-margin ion-icon,
+.flex-margin span {
+  margin-left: auto;
+}
+
+// --------------------------------------------------
+// Icon tooltip, and title
+// --------------------------------------------------
+// Fix Button icon name overrides button's own title on mouse over
+/*ion-icon[name='chatbox'] {
+  pointer-events: none !important;
+}*/
+.mat-cell {
+  /* smaller size, for the comment icon */
+  mat-icon.comment {
+    @include font-size(16pt);
+    height: 100%;
+    vertical-align: center;
+    color: var(--ion-color-tertiary, grey);
+
+    &.disabled {
+      color: var(--ion-color-medium, grey);
+    }
+  }
+}
+
+// --------------------------------------------------
+// Icon inside text
+// --------------------------------------------------
+mat-icon,
+ion-icon {
+  &.text-size {
+    font-size: 1em;
+    width: 1em;
+    height: 1em;
+  }
+}
+ion-button[expand="block"],
+ion-button[expand="full"],
+.mat-button,
+.mat-raised-button {
+  mat-icon,
+  ion-icon {
+    &[slot] {
+      pointer-events: none;
+      width: 24px;
+      height: 24px;
+    }
+    &[slot='start'],
+    &[slot='end'] {
+      margin-left: unset;
+      margin-right: unset;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &t[slot='start'] {
+      margin-inline-start: -0.3em;
+      margin-inline-end: 0.3em;
+    }
+    &[slot='end'] {
+      margin-inline-start: 0.3em;
+      margin-inline-end: -0.3em;
+    }
+    &.ion-float-start[slot='start'] {
+      position: absolute;
+      left: 0;
+    }
+    &.ion-float-end[slot='end'] {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+
+// --------------------------------------------------
+// Icon multiple
+// --------------------------------------------------
+ion-icon.icon-secondary,
+mat-icon.icon-secondary,
+.mat-mdc-icon-button .mat-icon.icon-secondary {
+  position: absolute;
+  left: 0;
+}
+
+// --------------------------------------------------
+// Toast
+// --------------------------------------------------
+ion-toast {
+  --background:  var(--ion-color-dark);
+  --color: var(--ion-color-dark-contrast);
+  --button-color: var(--color);
+
+  &.secondary {
+    --background: var(--ion-color-secondary);
+    --color: var(--ion-color-secondary-contrast);
+  }
+  &.accent {
+    --background: var(--ion-color-accent);
+    --color: var(--ion-color-accent-contrast);
+  }
+  &.danger {
+    --background: var(--ion-color-danger);
+    --color: var(--ion-color-danger-contrast);
+  }
+
+  /* -- workaround because toast animation failed */
+  --toast-max-height: 75px;
+
+  &.toast-stack-offset-1 {
+    --toast-stack-offset: 1;
+  }
+  &.toast-stack-offset-2 {
+    --toast-stack-offset: 2;
+  }
+  &.toast-stack-offset-3 {
+    --toast-stack-offset: 3;
+  }
+  &.toast-stack-offset-4 {
+    --toast-stack-offset: 4;
+  }
+
+  &.toast-stacked-top {
+    --toast-top: calc(var(--toast-stack-offset, 0) * var(--toast-max-height, 0px));
+    transform: translateY(var(--toast-top));
+  }
+  &.toast-stacked-bottom {
+    --toast-bottom: calc((var(--toast-stack-offset, 0) + 1) * var(--toast-max-height, 0px));
+    transform: translateY(var(--toast-bottom));
+  }
+}
+
+// --------------------------------------------------
+// Refresher
+// --------------------------------------------------
+ion-refresher.refresher-native {
+  z-index: 1000;
+}
+
+// --------------------------------------------------
+// Mat Side
+// --------------------------------------------------
+.mat-drawer-container {
+  --mat-sidenav-container-text-color: var(--ion-text-color);
+  --mat-sidenav-container-background-color: var(--ion-background-color);
+  --mat-sidenav-container-divider-color: var(--ion-border-color, rgba(0, 0, 0, 0.12));
+  --mat-sidenav-container-elevation-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
+  --mat-sidenav-content-text-color: var(--ion-text-color);
+  --mat-sidenav-content-background-color: var(--ion-background-color);
+  --mat-sidenav-scrim-color: rgba(var(--ion-backdrop-color-rgb), var(--ion-backdrop-opacity));
+}
+
+// --------------------------------------------------
+// Named filter
+// --------------------------------------------------
+
+ion-toolbar app-named-filter-selector,
+mat-toolbar app-named-filter-selector {
+
+  // Hide subscript wrapper (will hide hint)
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+    visibility: hidden;
+  }
+}
+
+// --------------------------------------------------
+// Toolbar
+// --------------------------------------------------