//temp sepeate file to avoid merge hell… to be distributed later
@include breakpoint(medium) {
  html,
  .d-header {
    background-color: var(--secondary);
  }
}
#main-outlet-wrapper {
  .navigation-topics & {
    @include breakpoint(mobile-extra-large) {
      padding: 0;
    }
  }
}
#main-outlet {
  @include breakpoint(mobile-extra-large) {
    padding-top: var(--spacing-block-sm);
  }

  .list-controls {
    @include breakpoint(mobile-extra-large) {
      padding-inline: var(
        --spacing-inline-m
      ) !important; //override will be fixed when the whole chat page shenanigans is resolved
      padding-block: var(--spacing-block-s);
      border-bottom: 1px solid var(--primary-200);
    }
    .navigation-container {
      @include breakpoint(mobile-extra-large) {
        gap: var(--spacing-inline-s);
        //dont know why we even hide this crucial navigation on mobile
        .category-breadcrumb.hidden,
        .category-breadcrumb {
          display: flex !important;
          gap: var(--spacing-inline-sm);
          .select-kit-header {
            padding-block: var(--spacing-block-s);
            padding-inline: 0;
            border: 0;
          }
        }
        .btn-default {
          border: 0;
          margin-right: 0;
          .d-icon {
            font-size: var(--font-up-1);
          }
        }
        .fk-d-button-tooltip {
          margin-right: 0;
          margin-left: var(
            --spacing-inline-xs
          ); //pure visual correction for horitzontal alignment
          &:has(#create-topic) {
            order: 1;
          }
        }
      }
      #navigation-bar,
      .navigation-controls,
      .category-breadcrumb {
        @include breakpoint(mobile-extra-large) {
          margin-bottom: 0;
        }
      }
      .navigation-controls {
        gap: var(--spacing-inline-s);
      }
    }
  }

  .list-container {
    @include breakpoint(mobile-extra-large) {
      padding-inline: 0 !important;
    }

    .topic-list-body {
      @include breakpoint(mobile-extra-large) {
        border-top: 0;
        padding-top: 0;
      }
    }

    .topic-list-item {
      @include breakpoint(mobile-extra-large) {
        box-shadow: none;
        border-radius: 0;
        //to be moved to topic card segment for general use
        // .navigation-category & {
        //   .badge-category__wrapper {
        //     display: none;
        //   }
        // }
      }
    }
  }

  #topic-title {
    @include breakpoint(mobile-extra-large) {
      padding-inline: var(--spacing-inline-m) !important;
      .topic-category {
        order: -1;
      }
      //make mixin of this
      //   .badge-category__wrapper {
      //     border-radius: var(--d-border-radius);
      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
      //     background-color: light-dark(
      //       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
      //       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
      //     );
      //   }

      //   .badge-category__name {
      //     color: light-dark(
      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
      //     );
      //   }
    }
  }
  .container.posts {
    @include breakpoint(mobile-extra-large) {
      padding-inline: var(--spacing-inline-m) !important;

      .main-avatar .avatar {
        width: 40px;
        height: 40px;
        border-radius: var(--d-border-radius);
      }

      .topic-body {
        .topic-meta-data {
          .username {
            font-size: var(--font-0-rem);
          }
        }
        .contents {
          padding-top: var(--spacing-block-m);
          p {
            line-height: 1.65;
          }
        }
      }
    }
  }
}