@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../styles/mixins.scss';

.#{$hashClassName}.cn-ui-m-page {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $m-color-bg-disabled;
  .cn-ui-m-page-body {
    flex: 1;
    overflow-y: auto;
  }

  .cn-ui-m-page-content {
    .cn-ui-m-tab-content
      > *:not(:first-child):not(.cn-ui-m-filter-position-fix),
    > *:not(:first-child):not(.cn-ui-m-filter-position-fix) {
      margin-top: $m-s-12;
    }

    .cn-ui-m-filter-position-fix + * {
      margin-top: $m-s-12;
    }

    .cn-ui-m-nav-bar-wrapper,
    .cn-ui-m-filter-position-fix {
      margin-top: calc(-1 * #{$m-s-12});
      margin-left: calc(-1 * #{$m-s-12});
      width: 100vw;
    }

    .cn-ui-m-nav-bar-wrapper {
      position: sticky;
      top: 0;
      z-index: 90;
    }

    .cn-ui-m-nav-bar-wrapper + .cn-ui-m-filter-sticky {
      margin-top: 0;
      top: $m-s-44;
    }
  }

  .cn-ui-m-page-content-with-padding {
    padding: $m-s-12;
  }

  .cn-ui-m-page-footer-placeholder {
    margin-top: auto;
  }
}