.pi-shell__deale-saas {
  & > div {
    .pi-saas-header {
      // Private
      display: flex;
      border-radius: var(--pi-border-radius-large);

      .pi-saas-header-content {
        // Left
        &.pi-saas-header-content__left {
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: var(--pi-spacing-xxxx-small);
        }
        // Right
        &.pi-saas-header-content__right {
          display: flex;
          justify-content: flex-end;
          align-items: center;

          & > *:nth-child(n + 1) {
            display: flex;
            align-items: center;
            transition: var(--pi-animation);
            &:hover {
              cursor: pointer;
            }
          }

          .pi-icon-button {
            &.is-active {
              position: absolute;
              transform: scale(0);
              opacity: 0;
            }
          }
          .pi-icon {
            // Common
            &:not(.is-stroked) {
              &:hover {
                img,
                .mat-icon {
                  transition-duration: 0.15s;
                  transform: scale(1.15);
                }
              }
              &:not(:hover):not(.is-active) {
                img,
                .mat-icon {
                  transition-duration: 0.15s;
                  transform: scale(1);
                }
              }
            }
            // Type stroke
            &.is-stroked {
              &:hover {
                transition-duration: 0.15s;
                transform: scale(1.1);
              }
              &:not(:hover):not(.is-active) {
                transition-duration: 0.15s;
                transform: scale(1);
              }
            }
            // Active
            &.is-active {
              position: absolute;
              transform: scale(0);
              opacity: 0;
            }
          }
        }
      }
    }
    // Aside is open
    &.aside-is-open {
      .pi-saas-header-content {
        // Right
        &.pi-saas-header-content__right {
          .pi-icon {
            &.is-active {
              background-color: var(--pi-color-primary-50);
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}

html {
  // Mobile
  &.is-mobile {
    .pi-saas-header {
      left: var(--pi-spacing-medium);
      width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
      .pi-saas-header-content {
        // Left
        &.pi-saas-header-content__left {
          h2 {
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        // Right
        &.pi-saas-header-content__right {
          gap: var(--pi-spacing-medium);
        }
      }
    }
  }

  // Mobile & Tablet
  &:not(.is-desktop) {
    // Small Devices
    @media screen and (max-width: 62rem) {
      .pi-saas-header {
        position: fixed;

        .pi-saas-header-content {
          // Left
          &.pi-saas-header-content__left {
            & > span {
              display: flex;
              gap: var(--pi-spacing-xx-small);
              & > h1 {
                font: {
                  size: var(--pi-font-size-medium);
                }
              }
            }
          }
          // Mobile
          @media screen and (max-width: 40rem) {
            height: var(--pi-height-header-mobile);

            // Right
            &.pi-saas-header-content__right {
              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: var(--pi-spacing-medium);
                  padding-right: var(--pi-spacing-medium);
                }
              }
              button {
                &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__icon--single) {
                  min-width: var(--pi-spacing-xx-large);
                }
                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
                  padding: var(--pi-spacing-xxxx-small) unset;
                }
                &:not(.pi-close-button):not(.pi-hamburger).pi-button__appearance--outline {
                  background-color: var(--pi-color-accent-75);
                  transition: all 0.16s ease-in;
                  border: unset;
                }
                &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__x-large) {
                  border-radius: var(--pi-border-radius-medium);
                  -webkit-border-radius: var(--pi-border-radius-medium);
                  -moz-border-radius: var(--pi-border-radius-medium);
                }
              }
            }
          }
          // Tablet S
          @media screen and (min-width: 40rem) {
            height: var(--pi-height-header-tablet);
            // Right
            &.pi-saas-header-content__right {
              button {
                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
                  padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-small);
                }
              }
            }
          }
          // Left
          &.pi-saas-header-content__left {
            width: 60%;
            & > span {
              & > h1 {
                font: {
                  size: var(--pi-font-size-medium);
                }
              }
            }
          }

          // Right
          &.pi-saas-header-content__right {
            width: 40%;
            display: flex;
            align-items: center;

            .pi-avatar {
              padding: var(--pi-spacing-xxx-small);

              &:hover,
              &.is-active {
                transform: scale(1.05);
              }
            }
          }
        }
      }
    }
  }

  // Tablet
  &.is-tablet {
    .pi-avatar {
      picture {
        width: 3rem;
        height: 3rem;
      }
    }
    &.is-tablet__small {
      .pi-saas-header {
        left: var(--pi-spacing-x-large);
        width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large));
      }
    }
    // Tablet L
    &.is-tablet__large {
      .pi-saas-header {
        .pi-saas-header-content {
          // Left
          &.pi-saas-header-content__left {
            height: var(--pi-height-header-tablet);
            padding-top: var(--pi-spacing-large);
          }
          // Right
          &.pi-saas-header-content__right {
            height: var(--pi-height-header-tablet);
            padding-top: var(--pi-spacing-xx-small);
          }
        }
      }
    }
  }

  // Tablet L & Desktop
  &:not(.is-mobile) {
    .pi-saas-header {
      .pi-saas-header-content {
        // Right
        &.pi-saas-header-content__right {
          gap: var(--pi-spacing-medium);

          .pi-icon-button,
          .pi-icon:nth-of-type(1) {
            &.is-active {
              position: absolute;
              transform: scale(0);
              opacity: 0;
            }
            &:not(.is-active) {
              &::after {
                content: '|';
                color: var(--pi-color-primary-200);
                margin-left: var(--pi-spacing-medium);
                font: {
                  size: var(--pi-font-size-small);
                }
              }
            }
          }
        }
      }
    }

    // Large Devices
    @media screen and (min-width: 62rem) {
      .pi-saas-header-content {
        // Left
        &.pi-saas-header-content__left {
          & span {
            & > h1 {
              font: {
                size: var(--pi-font-size-large);
              }
            }
          }
        }
        // Right
        &.pi-saas-header-content__right {
          button {
            &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
              &.pi-button__appearance--ghost {
                padding: var(--pi-spacing-xxxx-small) 0;
              }
              &:not(.pi-button__appearance--ghost) {
                padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
              }
            }
          }
        }
      }
    }
    @media screen and (min-width: 62rem) {
      .pi-shell__deale-saas {
        & > div {
          .pi-saas-header {
            transition: var(--pi-animation);
            .pi-saas-header-content {
              // Left
              &.pi-saas-header-content__left {
                width: 45%;
              }
              // Right
              &.pi-saas-header-content__right {
                justify-content: flex-end;
                width: 55%;
                .pi-avatar {
                  padding: 0.375rem;

                  &:hover,
                  &.is-active {
                    transform: scale(1.075);
                  }
                }
              }
            }
          }
          // Aside is open
          &.aside-is-open {
            .pi-saas-header {
              width: calc(100% - var(--pi-width-aside) - var(--pi-spacing-x-large));
            }
          }
          // Aside is closed
          &.aside-is-closed {
            .pi-saas-header {
              width: 100%;
            }
          }
        }
      }
    }
  }
  // Desktop
  &.is-desktop {
    .pi-saas-header {
      .pi-saas-header-content {
        // Left
        &.pi-saas-header-content__left {
          height: var(--pi-height-header);
          padding-top: var(--pi-spacing-small);
        }
        // Right
        &.pi-saas-header-content__right {
          height: var(--pi-height-header);
          padding-top: var(--pi-spacing-medium);
        }
      }
    }
  }
}