// .block-button-toggle-group {
@use '@angular/material' as mat;
//   border: 0 !important;

//   ::ng-deep .mat-button-toggle {
//     flex-grow: 1;
//   }
// }

//todo  sizing of grid layout when layout-wrapper--sidebar-fixed – good solution needed
//todo    - custom properties in media queries are not allowed

// breakpoints
$bp-1: 840px;
$bp-2: 1280px;
$bp-3: 1600px;
$bp-4: 1800px;
$bp-5: 2000px;

.layout__wrapper {

  .sc-documents-manager-viewer {
    margin: -$content-padding; //?

    &__grid {    
      //grid properties
      --gap: #{$grid-gap};
      --col-left-min-width: 360px;
      --col-right-min-width: 220px;
      --col-right-max-width: 340px;
      --col-main-width: calc((var(--app-height, 100vh) - #{$header-height} - #{$content-padding} * 2) * 0.70707071); //? din a4 aspect ratio width

      display: grid;
      grid-gap: var(--gap);
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "info"
        "attachments"
        "main";
      justify-content: center;

      @media screen and (min-width: 840px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "info attachments"
          "main main";
      }

      @media screen and (min-width: 1280px) {
        grid-template-columns: minmax(var(--col-left-min-width), 1fr) minmax(0, 3fr) minmax(var(--col-left-min-width), 1fr);
        grid-template-areas: "info main attachments";
        grid-template-rows: minmax(0, 1fr);
        height: calc(var(--app-height, 100vh) - #{$header-height});
      }

      @media screen and (min-width: 1600px) and (max-width: 1800px) and (min-height: 1100px) and (max-height: 1478px),
                        (min-width: 1800px) and (max-width: 2000px) and (min-height: 1100px) and (max-height: 1760px) {
        grid-template-columns: var(--col-left-min-width) var(--col-main-width) minmax(var(--col-right-min-width), var(--col-right-max-width));
      }

      @media screen and (min-width: 2000px) and (min-height: 1100px) {
        grid-template-columns: var(--col-left-min-width) 1330px minmax(var(--col-right-min-width), var(--col-right-max-width));
      }
    }

    &__info {
      grid-area: info;
      position: relative;
      padding: $content-padding $content-padding 0 $content-padding;

      .bdv-comments__body {
        max-height: 400px;
      }

      @media screen and (min-width: 840px) {
        padding: $content-padding 0 0 $content-padding;
        height: 100%;
      }

      @media screen and (min-width: 1280px) {
        padding: $content-padding 0 $content-padding $content-padding;
        height: 100%;

        .bdv-comments__body {
          max-height: none;
        }
      }

      .sc-card {
        position: relative;
        
        @media screen and (min-width: 1280px) {
          overflow: auto;
          max-height: calc(var(--app-height, 100vh) - #{$header-height} - #{$content-padding} * 2);
        }
      }
    }

    &__main {
      grid-area: main;
      padding: 0 $content-padding $content-padding $content-padding;

      @media screen and (min-width: 840px) {
        padding: 0 $content-padding $content-padding $content-padding;
        height: 100%;
      }

      @media screen and (min-width: 1280px) {
        padding: $content-padding 0;
        height: 100%;
      }

      .pdfViewer.removePageBorders .page {
        margin: -1px auto 0;
      }

      &-pdf {
        @media screen and (min-width: 1280px) {
          height: 100%;
          overflow: auto;
        }
      }

      &.--detailed {
        .sc-card {
          max-height: 100%;
        }

        .main__header {
          position: sticky;
          top: 0;
          z-index: 10;
          padding-bottom: calc(#{$grid-gap} / 2);
          @include mat.elevation(3);
        }

        .repeater__content {
          padding-top: 24px;
        }
      }
    }

    &__base-document {
      margin-bottom: $grid-gap;
    }

    &__attachments {
      grid-area: attachments;
      overflow: auto;
      padding: 8px $content-padding;

      .sc-card-content {
        max-height: 168px;
      }

      @media screen and (min-width: 840px) {
        //preventing shadows from beeing cut off
        padding: $content-padding $content-padding $content-padding 0;
        margin-bottom: -24px;
        height: calc(100% + 24px);
      }

      @media screen and (min-width: 1280px) {
        margin-left: -4px;
        padding: $content-padding $content-padding $content-padding 4px;
        height: 100%;

        .sc-card-content {
          max-height: none;
        }
      }

      sc-documents-manager-attachments .sc-card:not(:last-of-type) {
        margin-bottom: $grid-gap;
      }

      .mat-list-base {
        .mat-list-item, 
        .mat-list-option {
          height: auto;
          // padding: 0 !important;
          
          .mat-list-text {
            display: flex;
            justify-content: center;
            min-height: 48px;
            font-size: 14px !important;
          }
        }
      }

      .additional-action {

        .mat-list-item, 
        .mat-list-option {
          padding: 0 !important;
          
          .mat-list-text {
            padding: 0 !important;
          }
        }
          
        .mat-list-item .mat-list-item-content-reverse,
        .mat-list-option .mat-list-item-content-reverse {
          padding: 0;
        }

        &__content-wrapper {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          padding: 0 8px 0 16px !important;
        }

        &__option-title {
          padding: 4px 0;
          min-width: 0;
          overflow-wrap: break-word;
          hyphens: auto;
        }
      }
    }
  }

&--sidebar-fixed {
    .sc-documents-manager-viewer {
      &__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
          "info"
          "attachments"
          "main";
        justify-content: center;
        
        @media screen and (min-width: calc(840px + #{$sidebar-wide-width})) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-areas:
            "info attachments"
            "main main";
        }
    
        @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
          grid-template-columns: minmax(var(--col-left-min-width), 1fr) minmax(0, 2.6fr) minmax(var(--col-left-min-width), 1fr);
          grid-template-areas: "info main attachments";
          grid-template-rows: minmax(0, 1fr);
          height: calc(var(--app-height, 100vh) - #{$header-height});
        }  
    
        @media screen and (min-width: calc(1600px + #{$sidebar-wide-width})) and (max-width: calc(1800px + #{$sidebar-wide-width})) and (min-height: 1100px) and (max-height: 1570px),
                          (min-width: calc(1800px + #{$sidebar-wide-width})) and (max-width: calc(2000px + #{$sidebar-wide-width})) and (min-height: 1100px) and (max-height: 1864px) {
          grid-template-columns: var(--col-left-min-width) var(--col-main-width) minmax(var(--col-right-min-width), var(--col-right-max-width));
        }

        @media screen and (min-width: calc(2000px + #{$sidebar-wide-width})) and (min-height: 1100px) {
          grid-template-columns: var(--col-left-min-width) 1330px minmax(var(--col-right-min-width), var(--col-right-max-width));
        }
      }

      &__main {
        grid-area: main;
        padding: 0 $content-padding $content-padding $content-padding;
  
        @media screen and (min-width: calc(840px + #{$sidebar-wide-width})) {
          padding: 0 $content-padding $content-padding $content-padding;
          height: 100%;
        }
  
        @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
          padding: $content-padding 0;
          height: 100%;
        }
  
        &-pdf {
          @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
            height: 100%;
            overflow: auto;
          }
        }
      }

      &__info {
        grid-area: info;
        position: relative;
        padding: $content-padding $content-padding 0 $content-padding;
  
        @media screen and (min-width: calc(840px + #{$sidebar-wide-width})) {
          padding: $content-padding 0 0 $content-padding;
          height: 100%;
        }
  
        @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
          padding: $content-padding 0 $content-padding $content-padding;
          height: 100%;
  
          .bdv-comments__body {
            max-height: none;
          }
        }
  
        .sc-card {
          position: relative;
          
          @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
            overflow: auto;
            max-height: calc(var(--app-height, 100vh) - #{$header-height} - #{$content-padding} * 2);
          }
        }
      }

      &__attachments {
        grid-area: attachments;;
        overflow: auto;
        padding: 8px $content-padding;
  
        .sc-card-content {
          max-height: 168px;
        }
  
        @media screen and (min-width: calc(840px + #{$sidebar-wide-width})) {
          //preventing shadows from beeing cut off
          padding: $content-padding $content-padding $content-padding 0;
          margin-bottom: -24px;
          height: calc(100% + 24px);
        }
  
        @media screen and (min-width: calc(1280px + #{$sidebar-wide-width})) {
          margin-left: -4px;
          padding: $content-padding $content-padding $content-padding 4px;
          height: 100%;
  
          .sc-card-content {
            max-height: none;
          }
        }
      }


    }
  }
}