@use "variables";

@media screen and (min-width: 1960px) {
  .layout-main {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}

@media (min-width: 992px) {
  .layout-wrapper {
    &.layout-overlay {
      .layout-main-container {
        margin-left: 0;
        padding: 5rem 1.1rem 1.1rem 3.6rem;
      }

      .layout-sidebar {
        transform: translateX(-100%);
        left: 0;
        top: 0;
        height: 100dvh;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &.layout-overlay-active {
        .layout-sidebar {
          transform: translateX(0);
        }
      }
    }

    &.layout-static {
      .layout-main-container {
        padding-left: calc(var(--sidebar-width, 225px) + 30px);
        box-sizing: border-box;
      }

      &.layout-static-inactive {
        .layout-sidebar {
          transform: translateX(-100%);
          left: 0;
        }

        .layout-main-container {
          margin-left: 0;
          padding: 5rem 1.1rem 1.1rem 1.1rem;
        }
      }
    }

    .layout-mask {
      display: none;
    }
  }
}

@media (max-width: 991px) {
  .blocked-scroll {
    overflow: hidden;
  }

  .layout-wrapper {
    .layout-main-container {
      padding-left: 1.1rem;
    }

    .layout-sidebar {
      transform: translateX(-100%);
      left: 0;
      top: 0;
      height: 100dvh;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .layout-mask {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 998;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.6);
    }

    &.layout-mobile-active {
      .layout-sidebar {
        transform: translateX(0);
      }

      .layout-mask {
        display: block;
        animation: fadein variables.$transitionDuration;
      }
    }
  }
}

@media (max-width: 768px) {
  .layout-wrapper {
    .layout-main-container {
      padding: 4.4rem 0 0;
    }
  }
}