@import "react-responsive-tools-scss";

.MainLayout {
  color: var(--text-300);
  --def-aside-column-width: 32px; //Размер колонки в асайде
  --def-aside-column-max-width: 300px; //Максимсальный размер колонки и выдвигающегося меню

  --header-height: 50px; //Высота хедера
  --screen-padding: 10px; //Отступы от краев экрана
  --inner-padding: 15px; //Внутренний отступ

  --aside-width: var(--def-aside-column-width); //Текущий размер колонки и асайда

  grid-template-columns: auto;
  grid-template-areas:
      "header"
      "inner";

  @include for-lg {
    --def-aside-column-width: 80px;
    --header-height: 55px;
    --screen-padding: 15px;
  }

  &.widthMode {
    --aside-width: var(--def-aside-column-max-width); //Делаем сайдбар широким
  }

  display: grid;
  width: 100%;
  grid-template-rows: var(--header-height) calc(100vh - var(--header-height));
  font-family: Roboto, sans-serif;

  @include for-lg {
    grid-template-columns: var(--aside-width) auto;
    grid-template-areas:
      "sidebar header"
      "sidebar inner";
  }


  &.oneColumn {
    grid-template-columns: auto;
    grid-template-areas:
    "header"
    "inner";
  }


}