@mixin asideActionWrapper() {
  gap: var(--pi-spacing-medium);
  & > *:nth-child(n + 1) {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;
    width: -webkit-fill-available;
  }

  button {
    &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
        .pi-button__icon--single
      ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
      min-width: unset;
      padding-left: unset;
      padding-right: unset;
    }
  }
  .pi-button__w100 {
    button {
      &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(.pi-button__toggle):not(
          .pi-button__icon--single
        ):not(.pi-button__xx-small):not(.pi-button__trimmed):not(.pi-button__toggle) {
        min-width: 100%;
      }
    }
  }
}
.pi-shell__deale-saas {
  & > div {
    .pi-saas-aside {
      display: block;
      position: fixed;
      z-index: 99;
      padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
      overflow: hidden;
      transition: var(--pi-animation);
      & > .pi-close-button {
        position: absolute;
        margin-top: -1rem;
      }
      & > .pi-icon {
        position: absolute;
        height: var(--pi-spacing-xxx-large);
        width: var(--pi-spacing-xxx-large);
        margin-left: var(--pi-spacing-x-small);
        margin-top: -0.475rem;
        transition: var(--pi-animation);
      }
      &.pi-saas-aside__white {
        background-color: var(--pi-color-white);
        border: 1px solid var(--pi-color-white-900);
        .pi-buyer-companies-list-filters {
          .pi-accordion + .pi-wrapper {
            padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
          }
        }
      }
      .pi-accordion-item-content__header {
        & > .pi-text-viewer {
          &.pi-text-viewer__font-size--m-xs {
            label {
              font: {
                size: var(--pi-font-size-small);
              }
            }
          }
        }
      }
    }

    // Aside is open
    &.aside-is-open {
      .pi-saas-aside {
        opacity: 1;
      }
    }

    // Aside is closed
    &.aside-is-closed {
      .pi-saas-aside {
        transform: translateX(calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large)));
      }
    }
    // Aside is closable
    &.aside-is-closable {
      .pi-dynamic-menu {
        & > *:nth-child(2) {
          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;

          .pi-wrapper__action {
            flex-direction: column;
            @include asideActionWrapper;
          }
        }

        & > *:nth-child(3) {
          @include asideActionWrapper;
        }
      }
    }

    // Dynamic menu
    .pi-dynamic-menu {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      overflow-y: scroll;

      .pi-panel {
        width: 100%;
      }

      & > *:nth-child(1) {
        flex-shrink: 0;
        height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
        .pi-headline {
          max-width: 50%;
          margin: auto;
        }
      }
      & > *:nth-child(2) {
        &.pi-wrapper__flex {
          overflow-y: auto;
          height: 100%;
          // Generic Scroll
          &::-webkit-scrollbar {
            width: 0.1875rem;
          }

          &::-webkit-scrollbar-track {
            box-shadow: none;
          }

          &::-webkit-scrollbar-thumb {
            border-radius: var(--pi-border-radius-small);

            &:hover {
              transition: var(--pi-animation);
            }
          }
        }

        & > .pi-list-item {
          border-radius: var(--pi-border-radius-medium);
          padding: var(--pi-spacing-medium);
        }
      }
      & > *:nth-child(3) {
        flex-shrink: 0;
        width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
        margin: 0 auto;
        .pi-icon-button {
          margin-bottom: var(--pi-spacing-x-large);
          width: -webkit-fill-available;
        }
      }
      &.pi-saas-admin-user-profile {
        .pi-icon__x-large {
          &.is-stroked {
            &.pi-icon__appearance--fill {
              height: 7rem;
              width: 7rem;
              border-radius: 50%;
              .mat-icon {
                height: 4rem;
                width: 4rem;
              }
            }
          }
        }
      }
    }
  }

  // Aside is NOT closable
  &:not(.aside-is-closable) {
    .pi-dynamic-menu {
      & > *:nth-child(1) {
        padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
          calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
      }
    }
  }
}

html {
  // Mobile
  &.is-mobile {
    .pi-shell__deale-saas {
      & > div {
        .pi-saas-aside {
          & > .pi-close-button {
            margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
          }
        }
        // Aside is open
        &.aside-is-open {
          .pi-saas-aside {
            transform: translateX(var(--pi-spacing-x-large));
          }
        }
      }
    }
  }

  // Mobile & Tablet
  &:not(.is-desktop) {
    // Small device
    @media screen and (max-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          // Not fullscreen
          &:not(.is-fullscreen) {
            .pi-saas-aside {
              top: 0;
              height: calc(100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom));
              width: 100%;
              & > .pi-close-button {
                margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
              }

              & > *:nth-child(2) {
                height: calc(
                  100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) -
                    var(--pi-height-header-aside) - var(--pi-height-footer-aside)
                );
              }
            }
            // Aside is open
            &.aside-is-open {
              overflow: hidden;
              .pi-saas-aside {
                transform: translateX(0);
                transition-duration: 0.4s;
              }

              & > section,
              & > .pi-saas-navbar {
                position: fixed;
                transform: translateX(calc(-100vw));
                transition-duration: 0.4s;
              }
            }
            // Aside is closed
            &.aside-is-closed {
              overflow: unset;
              .pi-saas-aside {
                transition-duration: 0.4s;
              }
              & > section,
              & > .pi-saas-navbar {
                transform: translateX(calc(0));
                transition-duration: 0.5s;
              }
            }

            .pi-dynamic-menu {
              & > *:nth-child(3) {
                height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
                margin: 0 auto var(--pi-spacing-xxx-large);
              }
              & > *:nth-child(n + 2) {
                padding: 0 var(--pi-spacing-x-large);
              }
            }
          }
          // Aside is closable
          &.aside-is-closable {
            .pi-dynamic-menu {
              & > *:nth-child(1) {
                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
                  var(--pi-spacing-xxxx-large);
              }
            }
          }
        }
      }
    }
  }

  // Tablet & Desktop
  &:not(.is-mobile) {
    // Large device
    @media screen and (min-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          // Not fullscreen
          &:not(.is-fullscreen) {
            .pi-saas-aside {
              top: var(--pi-spacing-x-large);
              height: calc(100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
              width: var(--pi-width-aside);
              border-radius: var(--pi-border-radius-large);
              box-shadow: var(--pi-box-shadow-panel-double);
              & > *:nth-child(2) {
                flex-grow: 1;
                height: 100%;
              }

              & > .pi-close-button {
                margin-left: calc(var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large));
              }
            }
            // Aside is open
            &.aside-is-open {
              .pi-saas-aside {
                transform: translateX(
                  calc(100vw - var(--pi-width-aside) - var(--pi-spacing-x-large))
                );
              }
            }
            // Aside is closed
            &.aside-is-closed {
              .pi-saas-aside {
                opacity: 0;
                transition-duration: 0.6s;
              }
            }
            .pi-dynamic-menu {
              & > *:nth-child(2) {
                padding: var(--pi-spacing-x-large);
              }
              & > *:nth-child(3) {
                height: calc(var(--pi-height-footer-aside) + env(safe-area-inset-bottom));
                margin: 0 auto;
                padding: var(--pi-spacing-x-large) 0 0;
              }
            }

            // Back link is hidden
            &.backlink-is-hidden {
              .pi-dynamic-menu {
                & > *:nth-child(1) {
                  padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
                }
              }
              .pi-saas-aside {
                & > .pi-icon {
                  display: none;
                }
              }
            }
          }
          // Aside is closable
          &.aside-is-closable {
            .pi-dynamic-menu {
              & > *:nth-child(1) {
                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
                  var(--pi-spacing-x-large);
              }
            }
          }
        }
      }
    }
  }
}