@use "@angular/material" as mat;
@use "sass:math";
@import "./../../lib/scss/sc-variables";
@import "./../../lib/scss/sc-mixins";
$list-header-height: 96px;

.l-simpleKnowledge-base {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: $list-header-height minmax(0, 1fr) minmax(0, 2fr);
  height: 100%;

  &__list-header {
    grid-row: 1 / 2;
    padding: 0 $grid-gap;
    display: flex;
    align-items: center;
  }

  &__not-found{
    padding: 10px;
    grid-row: 2 / 3;
    height: 100%;
    overflow-y: auto;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  &__list {
    padding: 0;
    grid-row: 2 / 3;
    height: 100%;
    overflow-y: auto;

    .mat-list {
      &-item-content {
        padding-right: 8px !important;
      }

      &-text {
        flex-direction: row !important;
        gap: $grid-gap;
        padding-right: 0 !important;
      }
    }

    .list {
      &__text {
        flex: 1;
        min-width: 0;
      }

      &__action {
        flex: 0 0 auto;
      }
    }
  }

  &__doc {
    grid-row: 3 / 4;
    padding: 0;
    border-top: 1px solid;
    height: 100%;
    overflow: auto;
    padding: 10px;
  }

  &__change {
    margin: 0 10px;
  }

  .items_loaded.repeater__content::after {
    height: 0;
  }

  @media screen and (min-width: 600px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: $list-header-height minmax(0, 1fr);
    height: 100%;

    &__list-header {
      grid-row: 1 / 2;
    }

    &__list {
      padding: 0;
      grid-row: 2 / 3;
      overflow-y: auto;
      border-right: 1px solid rgba(0,0,0,0.2);
    }

    &__doc {
      grid-row: 1 / 3;
      padding: 10px;
      // border-left: 1px solid;
      border-top: none;
    }
  }

  @media screen and (min-width: 1280px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.mat-expansion-panel,
.mat-accordion .mat-expansion-panel {
  border-radius: $card-border-radius;
}

.mat-accordion.mat-accordion--no-radius .mat-expansion-panel {
  border-radius: 0 !important;
}

.mat-accordion .mat-expansion-panel:not(.mat-expanded),
.mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
  border-radius: 0 !important;
}

.mat-accordion .mat-expansion-panel:first-of-type {
  border-top-right-radius: $card-border-radius !important;
  border-top-left-radius: $card-border-radius !important;
}

.mat-accordion .mat-expansion-panel:last-of-type {
  border-bottom-right-radius: $card-border-radius !important;
  border-bottom-left-radius: $card-border-radius !important;
}

.custom-accordion {
  display: block;
  margin-bottom: 10px;

  .mat-expansion-panel {
    border: 1px solid;

    &.mat-expanded {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }

  .mat-expansion-panel-header.mat-expanded:focus {
    background-color: transparent;
  }

  .mat-expansion-panel-body {
    padding: 8px 16px 16px;
  }

  .mat-expansion-panel-header {
    height: 56px !important;
    padding: 0 $card-padding;
  }

  .mat-expanded .mat-expansion-panel-header {
    height: 60px !important;
  }

  .mat-expanded .mat-expansion-panel-header-overlay {
    height: 60px;
    border-bottom-right-radius: $card-border-radius;
  }
}