@charset "UTF-8";
/*
  TODO: Add docs on when to use placeholder vs when to use SASS variable

  Placeholder
    - When we want to keep customization to our self between templates use it

  Variables
    - When we want to allow customization from both user and our side
    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
*/
/*
    ❗ Heads up
    ==================
    Here we assume we will always use shorthand property which will apply same padding on four side
    This is because this have been used as value of top property by `.popper-content`
*/
.layout-content-width-boxed .layout-page-content {
  inline-size: 100%;
  margin-inline: auto;
  max-inline-size: 1440px;
}
.layout-page-content {
  padding-inline: 1.5rem;
}
[dir=rtl] .layout-vertical-nav .nav-group-arrow {
  transform: rotate(180deg);
}
html,
body {
  min-block-size: 100%;
}
.layout-page-content {
  flex-grow: 1;
  padding-block: 1.5rem;
}
.layout-footer .footer-content-container {
  block-size: 48px;
}
.layout-footer-sticky .layout-footer {
  position: sticky;
  inset-block-end: 0;
  will-change: transform;
}
.layout-footer-hidden .layout-footer {
  display: none;
}