// stylelint-disable declaration-no-important

//* Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} {
      #{$prop}: $length !important;
    }
  }
}

.mw-100 {
  max-width: 100% !important;
}
.mh-100 {
  max-height: 100% !important;
}

//* Viewport additional helpers

.min-vw-100 {
  min-width: 100vw !important;
}
.min-vh-100 {
  min-height: var(--app-height, 100vh) !important;
}

.vw-100 {
  width: 100vw !important;
}
.vh-100 {
  height: var(--app-height, 100vh) !important;
}

//* Related to shell

.h-layout-content {
  height: calc(
    var(--app-height, 100vh) -
      (
        #{$header-height-mobile} + (#{$content-padding} * 2) + #{$actionbar-height}
      )
  ) !important;

  @include media-breakpoint-up(sm) {
    height: calc(
      var(--app-height, 100vh) - (#{$header-height} + #{$content-padding} * 2)
    ) !important;
  }
}

//todo: documentation

$mat-tabs-height: 49px;

.vh-100 {
  //? var(--app-height, 100vh) without shell height and spacing inside layout__content container
  &--shell {
    height: calc(
      var(--app-height, 100vh) -
        (
          #{$header-height-mobile} + #{$content-padding} * 2 + #{$actionbar-height}
        )
    ) !important;

    @include media-breakpoint-up(sm) {
      height: calc(
        var(--app-height, 100vh) - (#{$header-height} + #{$content-padding} * 2)
      ) !important;
    }

    &.h-100--sc-table-in-mat-tab {
      .sc-table-container {
        height: calc(100% - #{$mat-tabs-height}) !important;
      }
    }
  }

  //! depricated – replace class with "vh-100--shell h-100--sc-table-in-mat-tab
  &--shell-tabs {
    height: calc(
      var(--app-height, 100vh) -
        (
          #{$header-height-mobile} + #{$content-padding} * 2 + #{$actionbar-height}
        )
    ) !important;

    .sc-table-container {
      height: calc(100% - #{$mat-tabs-height}) !important;
    }

    @include media-breakpoint-up(sm) {
      height: calc(
        var(--app-height, 100vh) - (#{$header-height} + #{$content-padding} * 2)
      ) !important;
    }
  }

  //? max-height var(--app-height, 100vh) without shell height and spacing inside layout__content container
  &-max {
    &--shell {
      max-height: calc(
        var(--app-height, 100vh) - #{$mini-fab-size} - (#{$content-padding} * 3) - #{$actionbar-height}
      ) !important;

      @include media-breakpoint-up(sm) {
        max-height: calc(
          var(--app-height, 100vh) - #{$header-height} - (#{$content-padding} * 2)
        ) !important;
      }
    }
  }
}

.textarea--h-100 {
  .sc-input--textarea,
  .mat-form-field,
  .mat-form-field-wrapper,
  .mat-form-field-infix {
    height: 100%;
  }
}