@use '@angular/material' as mat;
@import "@angular/material/theming";

//* Inner layouts (for dialogs and cards)
//*
//* Dividing content

.inner-layout {
  &__wrapper {
    height: 100%;
    display: grid !important;
    padding: 0 !important;

    //*
    //* Fraction Columns
    //*

    &.fr-cols {
      //? Grid columns (childs), basics
      .inner-layout {
        &__left,
        &__middle,
        &__right {
          height: 100% !important;
          overflow: auto;
        }

        &__left {
          grid-area: left;
          border-bottom: 1px solid;

          @include media-breakpoint-up(sm) {
            border-bottom: 0;
            border-right: 1px solid;
          }
        }

        &__middle {
          grid-area: middle;
          border-bottom: 1px solid;

          @include media-breakpoint-up(sm) {
            border-bottom: 0;
            border-right: 1px solid;
          }
        }

        &__right {
          grid-area: right;
        }
      }

      //? Grid container (parent), fraction columns
      &--1-1,
      &--2-1,
      &--1-2,
      &--3-2,
      &--2-3 {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "left"
          "right";

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left right";
        }
      }

      &--2-1,
      &--1-2 {
        grid-template-rows: minmax(0, 2fr) minmax(0, 1fr);

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--1-2 {
        grid-template-rows: minmax(0, 1fr) minmax(0, 2fr);

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--3-1,
      &--1-3 {
        grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
        grid-template-areas:
          "left"
          "right";

        @include media-breakpoint-up(md) {
          grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left right";
        }

        //? child specifics
        .inner-layout__left {
          grid-area: left;
          border-bottom: 1px solid;
          border-right: 0;

          @include media-breakpoint-up(md) {
            border-bottom: 0;
            border-right: 1px solid;
          }
        }
      }

      &--1-3 {
        grid-template-rows: minmax(0, 1fr) minmax(0, 3fr);

        @include media-breakpoint-up(md) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--3-2,
      &--2-3 {
        grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--2-3 {
        grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--1-1-1 {
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
          "left"
          "middle"
          "right";

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left middle right";
        }
      }

      &--2-1-1,
      &--1-1-2,
      &--1-2-1 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
            0,
            1fr
          );

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
              0,
              1fr
            );
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--2-1-1 {
        grid-template-areas:
          "left"
          "left"
          "middle"
          "right";

        @include media-breakpoint-up(sm) {
          grid-template-areas:
            "left left"
            "middle right";
        }

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left left middle right";
        }

        //? child specifics
        .inner-layout__left {
          @include media-breakpoint-up(sm) {
            border-right: 0;
            border-bottom: 1px solid;
          }

          @include media-breakpoint-up(md) {
            border-bottom: 0;
            border-right: 1px solid;
          }
        }
      }

      &--1-2-1 {
        grid-template-areas:
          "left"
          "middle"
          "middle"
          "right";

        @include media-breakpoint-up(sm) {
          grid-template-areas:
            "left right"
            "middle middle";
        }

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left middle middle right";
        }

        //? child specifics
        .inner-layout__middle {
          @include media-breakpoint-up(sm) {
            border-right: 0;
            border-top: 1px solid;
          }

          @include media-breakpoint-up(md) {
            border-top: 0;
            border-right: 1px solid;
          }
        }
      }

      &--1-1-2 {
        grid-template-areas:
          "left"
          "middle"
          "right"
          "right";

        @include media-breakpoint-up(sm) {
          grid-template-areas:
            "left middle"
            "right right";
        }

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left middle right right";
        }

        //? child specifics
        .inner-layout__middle {
          @include media-breakpoint-up(sm) {
            border-right: 0;
          }

          @include media-breakpoint-up(md) {
            border-right: 1px solid;
          }
        }

        .inner-layout__right {
          @include media-breakpoint-up(sm) {
            border-top: 1px solid;
          }

          @include media-breakpoint-up(md) {
            border-top: 0;
          }
        }
      }

      &--2-2-1,
      &--2-1-2,
      &--1-2-2 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows:
          minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
          minmax(0, 1fr);

        @include media-breakpoint-up(md) {
          grid-template-columns:
            minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)
            minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr);
        }

        @include media-breakpoint-up(sm) {
          .inner-layout {
            &__left {
              border-bottom: 1px solid;
              border-right: 0;

              @include media-breakpoint-up(md) {
                border-bottom: 0;
                border-right: 1px solid;
              }
            }

            &__middle {
              border-bottom: 1px solid;
              border-right: 0;

              @include media-breakpoint-up(md) {
                border-bottom: 0;
                border-right: 1px solid;
              }
            }
          }
        }
      }

      &--1-2-2 {
        grid-template-areas:
          "left"
          "middle"
          "middle"
          "right"
          "right";

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left middle middle right right";
        }
      }

      &--2-1-2 {
        grid-template-areas:
          "left"
          "left"
          "middle"
          "right"
          "right";

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left left middle right right";
        }
      }

      &--2-2-1 {
        grid-template-areas:
          "left"
          "left"
          "middle"
          "middle"
          "right";

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left left middle middle right";
        }
      }

      //* No Dividers Modifier Class

      &--no-dividers {
        &.fr-cols {
          &--1-1,
          &--1-2,
          &--2-1,
          &--2-3,
          &--3-2,
          &--1-1-1 {
            @include media-breakpoint-up(sm) {
              .inner-layout__left,
              .inner-layout__middle {
                border: 0;
              }
            }
          }

          &--1-3,
          &--3-1 {
            @include media-breakpoint-up(md) {
              .inner-layout__left {
                border: 0;
              }
            }
          }

          &--2-1-1 {
            @include media-breakpoint-up(sm) {
              .inner-layout__middle {
                border: 0;
              }
            }

            @include media-breakpoint-up(md) {
              .inner-layout__left {
                border: 0;
              }
            }
          }

          &--1-2-1 {
            @include media-breakpoint-up(sm) {
              .inner-layout__left {
                border: 0;
              }
            }

            @include media-breakpoint-up(md) {
              .inner-layout__middle {
                border: 0;
              }
            }
          }

          &--1-1-2 {
            @include media-breakpoint-up(sm) {
              .inner-layout__left,
              .inner-layout__middle {
                border: 0;
              }
            }
          }

          &--1-2-2,
          &--2-1-2,
          &--2-2-1 {
            @include media-breakpoint-up(md) {
              .inner-layout__left,
              .inner-layout__middle {
                border: 0;
              }
            }
          }
        }
      }
    }

    //*
    //* Sidebar
    //*

    &.sidebar {
      //? Grid columns (childs), basics
      .inner-layout {
        &__sidebar-left,
        &__main,
        &__sidebar-right {
          height: 100% !important;
          overflow: auto;

          @include media-breakpoint-up(md) {
            border-bottom: 0;
          }
        }

        &__sidebar-left {
          grid-area: left;
          border-bottom: 1px solid;

          @include media-breakpoint-up(md) {
            border-right: 1px solid;
            border-bottom: 0;
          }
        }

        &__main {
          grid-area: main;
          border-bottom: 1px solid;

          @include media-breakpoint-up(md) {
            border-bottom: 0;
            border-right: 1px solid;
          }
        }

        &__sidebar-right {
          grid-area: right;
        }
      }

      //? Grid container (parent), sidebar
      &--l,
      &--r,
      &--l-r {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
            0,
            1fr
          );
        padding: 0 !important;

        @include media-breakpoint-up(md) {
          grid-template-rows: minmax(0, 1fr);
        }
      }

      &--l {
        grid-template-areas:
          "left"
          "main"
          "main"
          "main";

        @include media-breakpoint-up(md) {
          grid-template-columns: 280px minmax(0, 1fr);
          grid-template-areas: "left main";
        }

        //? Grid columns (childs), specifics
        .inner-layout__main {
          border-bottom: 0;

          @include media-breakpoint-up(md) {
            border-right: 0;
          }
        }
      }

      &--r {
        grid-template-areas:
          "right"
          "main"
          "main"
          "main";

        @include media-breakpoint-up(md) {
          grid-template-columns: minmax(0, 1fr) 280px;
          grid-template-areas: "main right";
        }

        //? Grid columns (childs), specifics
        .inner-layout__sidebar-right {
          border-bottom: 1px solid;

          @include media-breakpoint-up(md) {
            border-bottom: 0;
          }
        }

        .inner-layout__main {
          border-bottom: 0;
        }
      }

      &--l-r {
        grid-template-areas:
          "left"
          "right"
          "main"
          "main";

        @include media-breakpoint-up(sm) {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);

          grid-template-areas:
            "left right"
            "main main";
        }

        @include media-breakpoint-up(md) {
          grid-template-columns: 280px minmax(0, 1fr) 280px;
          grid-template-rows: minmax(0, 1fr);
          grid-template-areas: "left main right";
        }

        //? Grid columns (childs), specifics
        .inner-layout {
          &__sidebar-left {
            @include media-breakpoint-up(sm) {
              border-right: 1px solid;
            }

            @include media-breakpoint-up(md) {
              border-bottom: 0;
            }
          }

          &__sidebar-right {
            border-bottom: 1px solid;

            @include media-breakpoint-up(md) {
              border-bottom: 0;
            }
          }

          &__main {
            border-bottom: 0;
          }
        }
      }

      &--no-dividers {
        &.sidebar {
          @include media-breakpoint-up(md) {
            &--l,
            &--r {
              .inner-layout__sidebar-left,
              .inner-layout__main {
                border: 0;
              }
            }

            &--l-r {
              .inner-layout__main {
                border: 0;
              }
            }
          }

          @include media-breakpoint-up(sm) {
            &--l-r {
              .inner-layout__sidebar-left {
                border-right: 0;
              }
            }
          }
        }
      }
    }
  }

  &__section-heading {
    height: 50px;
    width: 100%;
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;

    &:first-child {
      height: 49px;
      border-top: 0;
    }
  }

  //*
  //* Card in Card
  //*

  &__card {
    border: 1px solid;
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%),
      0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%) !important;
  }
}

//*
//* Repeater
//*

.repeater {
  --basic-button-height: 36px;
  --fab-height: 56px;
  --mini-fab-height: 40px;
  --content-padding: 16px;
  --action-height: calc(var(--basic-button-height) + var(--content-padding));
  --action-alignment: left;

  &--p-4 {
    --content-padding: 24px;
  }

  &--fab {
    --action-height: calc(var(--fab-height) + var(--content-padding));
  }

  &--mini-fab {
    --action-height: calc(var(--mini-fab-height) + var(--content-padding));
  }

  &--action-center {
    --action-alignment: center;
  }

  &--action-right {
    --action-alignment: right;
  }

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--action-height);
  justify-items: var(--action-alignment);
  height: 100%;

  &__content {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: var(--content-padding) var(--content-padding) 0
      var(--content-padding);
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;

    &::after {
      content: " ";
      display: block;
      width: 100%;
      height: var(--action-height);
    }
  }

  &__section-heading {
    width: calc(100% + var(--content-padding) * 2);
    height: 50px;
    margin: var(--content-padding) calc(var(--content-padding) * -1)
      var(--content-padding) calc(var(--content-padding) * -1);
    margin-bottom: var(--content-padding);

    padding: 0 var(--content-padding);
    border-top: 1px solid;
    border-bottom: 1px solid;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;

    &:first-child {
      height: 49px;
      border-top: 0;
      margin: calc(var(--content-padding) * -1)
        calc(var(--content-padding) * -1) var(--content-padding)
        calc(var(--content-padding) * -1);
    }
  }

  &__action {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    padding: 0 var(--content-padding) var(--content-padding)
      var(--content-padding);
  }

  &--action-block,
  &--action-flat-block {
    --action-height: calc(var(--basic-button-height) + 16px);

    .repeater__content {
      grid-row: 1 / 2;

      &::after {
        content: none;
      }
    }

    .repeater__action {
      width: 100%;
      height: var(--action-height);
      padding: 0;
      @include mat.elevation(6);

      .mat-button {
        width: 100%;
        height: 100%;
        border-radius: 0 !important;
      }
    }
  }

  &--action-flat-block {
    .repeater__action {
      @include mat.elevation(0);
      border-top: 1px solid;
    }
  }
}

// todo: create documentation
.single-line-item {
  display: flex;

  &__content {
    flex-grow: 1;
  }

  &__icon-button-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 56px;
  }
}