@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
  .pi-layout__00-authentication {
    &.pi-layout__00-authentication--default-space {
      .pi-panel {
        .pi-panel-content__top,
        .pi-panel-content__bottom {
          gap: var(--pi-spacing-#{$gap});
        }
        &.pi-panel__inner-padding--xxxxl {
          &.pi-panel__inner-padding {
            &.pi-panel__flex-direction--column {
              & > section {
                & > * {
                  padding-left: $spacing;
                  padding-right: $spacing;
                }
              }
            }
          }
        }
      }
    }
  }
}

html {
  &.is-mobile {
    @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxx-large), x-small);
  }
  &.is-tablet {
    &.is-tablet__small {
      @include authenticationDefaultSpaceLayoutSpacings(var(--pi-spacing-xxxx-large), small);
    }
    &.is-tablet__large {
      @include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
    }
  }
  &.is-desktop {
    @include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
  }
}