@use './variables' as var;
@use './bootstrap/init' as bs;

body {
  overflow-y: scroll !important;
  overscroll-behavior-y: none;
}

.layout-root:not(.growi-layout-fluid) .grw-container-convertible {
  @extend .container-lg;
}

.layout-root.growi-layout-fluid .grw-container-convertible {
  @extend .container-fluid;
}

.grw-bg-image-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;

  img {
    object-fit: cover;
    object-position: bottom;
  }
}

body.not-found-page .grw-container-convertible {
  @extend .container-lg;
}

.grw-modal-head {
  border-bottom: 1px solid transparent;
}

.grw-scrollable-modal-body {
  max-height: calc(100vh - 330px);
  overflow-y: scroll;
}

// padding settings for GrowiNavbarBottom
.page-wrapper {
  padding-bottom: var.$grw-navbar-bottom-height;

  @include bs.media-breakpoint-up(md) {
    padding-bottom: unset;
  }
}

.main {
  margin-top: 1rem;

  @include bs.media-breakpoint-up(lg) {
    margin-top: 2rem;
  }
}

.grw-side-contents-container {
  margin-bottom: 1rem;

  @include bs.media-breakpoint-up(lg) {
    width: 250px;
    min-width: 250px;
    margin-left: 30px;
  }
}

.grw-side-contents-sticky-container {
  position: sticky;
  // growisubnavigation + grw-navbar-boder + some spacing
  top: calc(100px + 4px + 20px);
}

.grw-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 3rem;
  z-index: bs.$zindex-fixed;

  transition: all 200ms linear;

  .btn-create-page {
    width: 60px;
    height: 60px;
    font-size: 24px;

    box-shadow: 2px 3px 6px #0000005d;
    svg {
      width: 28px;
      height: 28px;
    }
  }

  .btn-scroll-to-top {
    width: 40px;
    height: 40px;

    opacity: 0.4;
    svg {
      width: 18px;
      height: 18px;
    }
  }
}

// printable style
@media print {
  body {
    padding: 30px;
  }

  a:after {
    display: none !important;
  }

  .main {
    header {
      border-bottom: solid 1px bs.$secondary;
      h1 {
        font-size: 2em;
        color: black;
      }
    }

    .row {
      display: block !important;
    }

    .meta {
      margin-top: 32px;
      color: bs.$secondary;
      border-top: solid 1px bs.$gray-300;
    }
  }
}