.pi-shell__deale-saas {
  & > div {
    width: 100%;

    // NOT Is fullscreen
    &:not(.is-fullscreen) {
      & > section {
        position: fixed;
      }
    }
    // Is fullscreen
    &.is-fullscreen {
      & > section {
        left: 0;
        width: 100%;
      }
      .pi-saas-header,
      .pi-saas-navbar {
        display: none;
      }
    }
  }
}

html {
  // Mobile & Tablet S
  &:not(.is-desktop) {
    // Tablet L
    @media screen and (max-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          & > section {
            width: 100%;
            padding: 0;
          }
          // Footer logo
          & > .pi-headline {
            display: none;
          }
        }
      }
    }
  }

  // Tablet
  &.is-tablet {
    // Tablet L
    @media screen and (min-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          & > section {
            height: calc(
              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
            );
          }
          // Not is fullscreen
          &:not(.is-fullscreen) {
            & > section {
              left: calc(
                var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
                  var(--pi-spacing-x-large)
              );
              width: calc(
                100% - var(--pi-width-navbar-collapsed) - var(
                    --pi-spacing-x-large
                  ) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
              );
            }
          }
        }
      }
    }
  }
  // Tablet & Desktop
  &:not(.is-mobile) {
    // Tablet L & Desktop
    @media screen and (min-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          height: 100vh;
          width: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          // Not is fullscreen
          &:not(.is-fullscreen) {
            // Layout container
            & > section {
              top: var(--pi-spacing-x-large);
              & > *:nth-child(1) {
                padding-right: var(--pi-spacing-x-large);
              }
            }
          }

          // Aside is open
          &.aside-is-open {
            & > .pi-headline {
              transform: var(--pi-animation);
              transform: translateX(0);
            }
          }
          // Aside is closed
          &.aside-is-closed {
            & > .pi-headline {
              transform: var(--pi-animation);
              transform: translateX(
                calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
              );
            }
          }
        }
      }
    }
  }
  // Desktop
  &.is-desktop {
    .pi-shell__deale-saas {
      & > div {
        // Not is fullscreen
        &:not(.is-fullscreen) {
          // Layout container
          & > section {
            height: calc(
              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
            );
            transition: var(--pi-animation);
            & > *:nth-child(1) {
              padding-right: var(--pi-spacing-x-large);
            }
          }
          // Navbar is expanded
          &.navbar-is-expanded {
            & > section {
              left: calc(
                var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
                  var(--pi-spacing-x-large)
              );

              width: calc(
                100% - var(--pi-width-navbar-expanded) - var(
                    --pi-spacing-x-large
                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
              );
            }
          }
          // Navbar is collapsed
          &.navbar-is-collapsed {
            & > section {
              left: calc(
                var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
                  var(--pi-spacing-x-large)
              );
              width: calc(
                100% - var(--pi-width-navbar-collapsed) - var(
                    --pi-spacing-x-large
                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
              );
            }
          }
        }
      }
    }
  }
}