@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  .#{$infix}mat-input-group,
  .#{$infix}input-group {
    // ungrouped items default layout (stacked)
    display: grid;
    grid-gap: $grid-gap;
    // height: 100%;

    // modifier classes for sizing items
    //
    // flex grow
    .grow {
      // values can be used for sizing in relation to each other
      &-0 {
        flex-grow: 0;
      }

      &-1 {
        flex-grow: 1;
      }

      &-2 {
        flex-grow: 2;
      }

      &-3 {
        flex-grow: 3;
      }

      &-4 {
        flex-grow: 4;
      }
    }

    // flex shrink
    .shrink {
      // disable
      &-0 {
        flex-shrink: 0;
      }

      // enable
      &-1 {
        flex-shrink: 1;
      }
    }

    // flex basis

    @each $prop, $abbrev in (flex-basis: basis) {
      @each $size, $length in $flex-basis-sizes {
        .#{$abbrev}-#{$size} {
          #{$prop}: $length !important;
        }
      }
    }
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .#{$infix}mat-input-group,
    .#{$infix}input-group {
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      gap: 0;

      .mat-form-field-outline {
        height: 54px;
      }

      .sc-input--textarea {
        .mat-form-field-outline {
          height: auto;
        }
      }

      > * {
        flex: 1;
        min-width: 0 !important;
      }

      > :first-child {
        .mat-form-field-appearance-outline .mat-form-field-outline-end {
          border-radius: 0 !important;
        }

        // removing border-right and preserving the borders for :focus and :hover state
        .mat-form-field-appearance-outline:not(.mat-focused)
          .mat-form-field-flex:not(:hover)
          .mat-form-field-outline-end {
          border-right: 0 !important;
        }
      }

      > :last-child {
        .mat-form-field-appearance-outline .mat-form-field-outline-start {
          border-radius: 0 !important;
        }
      }

      > :not(:first-child):not(:last-child) {
        .mat-form-field-appearance-outline .mat-form-field-outline-start {
          border-radius: 0 !important;
        }

        .mat-form-field-appearance-outline .mat-form-field-outline-end {
          border-radius: 0 !important;
        }

        // removing border-right and preserving the borders for :focus and :hover state
        .mat-form-field-appearance-outline:not(.mat-focused)
          .mat-form-field-flex:not(:hover)
          .mat-form-field-outline-end {
          border-right: 0 !important;
        }
      }

      /* -------------------------------------------------------------------------- */
      /*                                   buttons                                  */
      /* -------------------------------------------------------------------------- */

      // Giving the missing border to mat-button and icon-button
      > .mat-button,
      > .mat-icon-button {
        border: 1px solid !important;
      }

      // Sizing of mat-icon-button and mat-mini-fab
      & > .mat-icon-button,
      .mat-mini-fab {
        // min-height: 3.825em; // ! ongoing testing
        // height: calc(100% - 2px) !important;
        height: 54px; // ! not relyable
        flex: 0 0 56px;
      }

      // Height of buttons with label
      > .mat-button,
      > .mat-stroked-button,
      > .mat-flat-button {
        height: 54px; // ! not relyable
      }

      // Basic input group styles
      > .mat-button,
      > .mat-stroked-button,
      > .mat-flat-button,
      > .mat-icon-button,
      > .mat-mini-fab,
      > .mat-checkbox  {
        margin-top: 2px;
        border-radius: 0 !important;
        border-width: 1px !important;
        border-right-width: 0 !important;
        box-shadow: none !important;

        &.sc-stroked-icon-button {
          flex: 0 0 64px;
        }

        &:first-child,
        &.button-prepend {
          border-top-left-radius: $button-border-radius !important;
          border-bottom-left-radius: $button-border-radius !important;
        }

        &:last-child,
        &.button-append {
          border-right-width: 1px !important;
          border-top-right-radius: $button-border-radius !important;
          border-bottom-right-radius: $button-border-radius !important;
        }
      }

      // Buttons with text
      > .mat-button,
      > .mat-stroked-button,
      > .mat-flat-button {
        padding: 0 !important;

        .mat-button-wrapper {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 16px;
        }
      }

      // Buttons with a solid background color
      > .mat-flat-button,
      > .mat-mini-fab {
        // margin-right: -1px;
        z-index: 1;

        &:last-child {
          margin-right: 0;
        }
      }

      // special case when sc-datetimepicker wraps
      &:has(.sc-datetimepicker.--wrap) {
        .mat-icon-button {
          height: 108px; //! fixed height might lead to imperfect alignment
        }
      }
    }
  }
}

.input-group,
.mat-input-group {
  .sc-datetimepicker.--wrap {
    .sc-datetimepicker {
      &__datepicker {
        .mat-form-field-outline .mat-form-field-outline-end {
          border-radius: 0 0 0 0 !important;
        }
      }

      &__timepicker {
        .mat-form-field-outline .mat-form-field-outline-end {
          border-radius: 0 0 0 0 !important;
        }
      }
    }
  }

  .mat-checkbox {
    height: calc(100% - 2px);
    min-height: 54px;
    margin-top: 2px;
    padding: ($spacer * 0.25) $spacer;
    display: flex;
    align-items: center;
    border: 1px solid;

    &-layout {
      white-space: normal;

      .mat-checkbox-label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 20px;
      }
    }
  }

  // sc-edit-field with mat-checkbox
  > sc-edit-field {
    .mat-checkbox {
      margin-top: 2px;
      border-radius: 0 !important;
      border-width: 1px !important;
      border-right-width: 0 !important;
    }

    &:first-child > .mat-checkbox {
      border-top-left-radius: $button-border-radius !important;
      border-bottom-left-radius: $button-border-radius !important;
    }

    &:last-child > .mat-checkbox {
      border-right-width: 1px !important;
      border-top-right-radius: $button-border-radius !important;
      border-bottom-right-radius: $button-border-radius !important;
    }
  }

}