@use './tokens' as blog;

@media (max-width: 1180px) {
  @include blog.block {
    &__content {
      grid-template-columns: 280px minmax(0, 1fr);
    }

    &__rightbar {
      display: none;
    }

    &__primary,
    &__main,
    &__post,
    &__post-empty,
    &__post-navigation,
    &__related-posts,
    &__comments,
    &__comment-form,
    &__footer,
    &__post-load-sentinel {
      width: 100%;
    }
  }
}

@media (max-width: 860px) {
  @include blog.block {
    &__header-navbar {
      padding: 0 16px;
    }

    &__header-nav--hover,
    &__header-search {
      display: none;
    }

    &__header-toggle {
      display: inline-flex;
      width: 38px;
      height: 38px;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: var(--card-radius);
      color: var(--argon-text);
      background: var(--argon-card-soft);
    }

    &__header-brand {
      min-width: 0;
      flex: 1;
    }

    &__banner {
      min-height: 636px;
    }

    &__content {
      display: block;
      margin-top: -253px;
      padding: 0 10px;
    }

    &--no-banner &__content {
      margin-top: 60px;
    }

    &__sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: -300px;
      z-index: 1001;
      width: 280px;
      padding: 72px 0 24px;
      margin: 0;
      overflow-y: auto;
      background: rgb(47, 43, 51);
      transition: left 0.28s cubic-bezier(0.4, 0, 0, 1);
    }

    &__sidebar-mask {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: block;
      min-width: 100vw;
      min-height: 100vh;
      opacity: 0;
      pointer-events: none;
      background: rgba(12, 10, 16, 0.55);
      transition: opacity 0.24s ease;
    }

    &__sidebar-panel,
    &__primary,
    &__main {
      width: 100%;
    }

    &__post,
    &__post-empty,
    &__post-navigation,
    &__related-posts,
    &__comments,
    &__comment-form,
    &__footer {
      margin-bottom: 25px;
      padding: 24px 20px;
    }

    &__form-grid {
      grid-template-columns: 1fr;
    }
  }

  html.leftbar-opened {
    .kt-blog__sidebar {
      left: 0;
    }

    .kt-blog__sidebar-mask {
      opacity: 1;
      pointer-events: auto;
    }
  }
}
