.pi-layout {
  &.pi-05a-splitted-paywall-layout {
    width: 100vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;

    .pi-main-wrapper-content {
      min-height: unset;
      // Left
      &.pi-main-wrapper-content__left {
        display: flex;
        flex-direction: column;
        header {
          h1 + * {
            margin-top: var(--pi-spacing-x-small);
          }
        }
      }
      // Right
      &.pi-main-wrapper-content__right {
        display: flex;
        flex-direction: column;
      }
    }

    * + .mat-mdc-radio-group {
      padding-top: var(--pi-spacing-x-large);
    }
    .mat-mdc-radio-group {
      display: flex;
      flex-direction: column;
      label {
        margin-bottom: unset;
      }
    }
    .mat-mdc-radio-label-content {
      padding-left: var(--pi-spacing-medium);
    }

    .pi-panel {
      box-shadow: var(--pi-box-shadow);
      transition: var(--pi-animation);
      width: 100%;
      max-width: 30rem;
      &.is-active {
        border: 1px solid var(--pi-color-primary-100);
        background-color: var(--pi-color-primary-50);
      }

      &:hover {
        cursor: pointer;
        box-shadow: var(--pi-box-shadow-hover);
        &:not(.is-active) {
          border: 1px solid var(--pi-color-primary-200);
        }
      }
      // Padding
      &.has-padding {
        width: 100%;
        padding: var(--pi-spacing-large);
      }
    }
  }
}

html {
  // Mobile
  &.is-mobile {
    .pi-layout {
      &.pi-layout__05-splitted {
        &.pi-05a-splitted-paywall-layout {
          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
          @media screen and (max-height: 46.25rem) {
            min-height: calc(198vh + var(--pi-height-footer));
          }
          .pi-main-wrapper-content {
            // Right
            &.pi-main-wrapper-content__right {
              height: calc(
                100vh - var(--pi-spacing-x-large) - var(
                    --pi-spacing-x-large
                  ) - var(--pi-height-footer) -
                  8rem
              );
            }
            // Left
            &.pi-main-wrapper-content__left {
              // Header
              & > header {
                transform: scale(0.92);
                .pi-color__black-primary {
                  & > article {
                    display: flex;
                    gap: var(--pi-spacing-xxx-small);
                  }
                }
              }
            }
          }

          // Radio panels
          .mat-mdc-radio-group {
            gap: var(--pi-spacing-small);
            width: 100%;
            transform: scale(0.92);
          }

          .pi-button {
            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
                .pi-button__small
              ):not(.pi-button__large) {
              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
            }
          }
        }
      }
    }
  }
  &.is-tablet {
    .pi-layout {
      &.pi-layout__05-splitted {
        &.pi-05a-splitted-paywall-layout {
          padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
          .pi-wrapper__main {
            .pi-main-wrapper-content {
              &.pi-main-wrapper-content__left {
                & > header {
                  max-width: 66.66%;
                  margin: 0 auto;
                }
              }
              &.pi-main-wrapper-content__right {
                min-height: calc(
                  100vh - var(--pi-spacing-xx-large) - var(
                      --pi-spacing-xx-large
                    ) - var(--pi-height-footer) -
                    20rem
                );
              }
            }
          }
          .pi-button {
            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
                .pi-button__small
              ):not(.pi-button__large) {
              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
              min-width: 11rem;
            }
          }
        }
      }
    }
    // Tablet S
    &.is-tablet__small {
      .pi-wrapper__main {
        .pi-main-wrapper-content {
          & > * + *:not(:last-child) {
            width: 66.66%;
            margin: var(--pi-spacing-x-large) auto;
          }
        }
      }
    }
    // Tablet L
    &.is-tablet__large {
      .pi-wrapper__main {
        .pi-main-wrapper-content {
          & > * + *:not(:last-child) {
            width: 50%;
            margin: var(--pi-spacing-x-large) auto;
          }
        }
      }
    }
  }
  // Mobile & Tablet
  &:not(.is-desktop) {
    .pi-layout {
      &.pi-layout__05-splitted {
        &.pi-05a-splitted-paywall-layout {
          // Main
          .pi-wrapper {
            &.pi-wrapper__main {
              & > section {
                padding-bottom: var(--pi-height-header);
              }
              .pi-main-wrapper-content {
                width: 100%;
                // Left
                &.pi-main-wrapper-content__left {
                  & > header {
                    justify-content: center;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    h3 {
                      display: block;
                    }
                  }
                  form {
                    & > h4 {
                      text-align: center;
                    }
                  }
                  // Action wrapper
                  .pi-wrapper__action {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    z-index: 999;
                    height: var(--pi-height-footer);
                    width: 100%;
                    margin-top: unset;
                    background-color: var(--pi-color-white-rgba-06);
                    box-shadow: var(--pi-box--shadow-top);
                  }
                }
                // Right
                &.pi-main-wrapper-content__right {
                  gap: var(--pi-spacing-xxxx-large);
                  padding-top: 6rem;
                  background-image: unset;

                  & > form {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                  }
                }
              }
            }
          }
          .mat-mdc-radio-group {
            align-items: center;
          }
          .mat-mdc-radio-label-content {
            h3 {
              font: {
                size: var(--pi-font-size-xx-large);
              }
            }
          }
          // Mobile and Tablet S
          @media screen and (max-width: 62rem) {
            .pi-main-wrapper-content {
              &.pi-main-wrapper-content__left {
                // Header
                & > header {
                  h1 {
                    font: {
                      size: var(--pi-font-size-x-large);
                    }
                  }
                }
              }
            }
          }
          // Action wrapper
          .pi-wrapper__action {
            justify-content: space-around;
          }
        }
      }
    }
    // Small device
    @media screen and (max-width: 62rem) {
      .pi-layout {
        &.pi-layout__05-splitted {
          &.pi-05a-splitted-paywall-layout {
            .mat-mdc-radio-group > * {
              width: -webkit-fill-available;
            }
          }
        }
      }
    }
  } // Tablet & Desktop
  &:not(.is-mobile) {
    // Tablet L and Desktop
    @media screen and (min-width: 62rem) {
      .pi-layout {
        &.pi-layout__05-splitted {
          &.pi-05a-splitted-paywall-layout {
            .pi-main-wrapper-content {
              &.pi-main-wrapper-content__left {
                // Header
                & > header {
                  h1 {
                    font: {
                      size: var(--pi-font-size-xx-large);
                    }
                  }
                }
              }
            }

            .mat-mdc-radio-label-content {
              h3 {
                font: {
                  size: 2.375rem;
                }
              }
            }
          }
        }
      }
    }
  }
  // Desktop
  &.is-desktop {
    .pi-layout {
      &.pi-layout__05-splitted {
        &.pi-05a-splitted-paywall-layout {
          height: 100vh;
          overflow-y: hidden;
          .pi-wrapper__main {
            .pi-main-wrapper-content {
              // Left
              &.pi-main-wrapper-content__left {
                justify-content: space-between;
                max-width: 50%;
                .pi-panel {
                  &.has-padding {
                    max-width: 32rem;
                  }
                }
                .pi-wrapper {
                  &.pi-wrapper__action {
                    gap: var(--pi-spacing-x-large);
                  }
                }
              }
              // Right
              &.pi-main-wrapper-content__right {
                justify-content: center;
              }
            }
          }
        }
      }
    }
    &.is-desktop__small {
      .pi-layout {
        &.pi-layout__05-splitted {
          &.pi-05a-splitted-paywall-layout {
            padding: var(--pi-spacing-xxx-large);
            gap: var(--pi-spacing-xx-large);
            .pi-main-wrapper-content {
              height: calc(
                100vh - var(--pi-spacing-xxx-large) - var(
                    --pi-spacing-xxx-large
                  )
              );
              // Left
              &.pi-main-wrapper-content__left {
                .mat-mdc-radio-group {
                  max-width: 70%;
                }
              }

              // Right
              &.pi-main-wrapper-content__right {
                gap: var(--pi-spacing-medium);
              }
            }
          }
        }
      }
    }
    &.is-desktop__medium {
      .pi-layout {
        &.pi-layout__05-splitted {
          &.pi-05a-splitted-paywall-layout {
            padding: var(--pi-spacing-xxx-large);
            gap: var(--pi-spacing-xxx-large);
            .pi-main-wrapper-content {
              // Left
              &.pi-main-wrapper-content__left {
                height: calc(
                  100vh - var(--pi-spacing-xxx-large) - var(
                      --pi-spacing-xxx-large
                    )
                );
                .mat-mdc-radio-group {
                  max-width: 66.66%;
                }
              }
              // Right
              &.pi-main-wrapper-content__right {
                gap: var(--pi-spacing-x-large);
              }
            }
          }
        }
      }
    }
  }
  &.is-desktop__large {
    .pi-layout {
      &.pi-layout__05-splitted {
        &.pi-05a-splitted-paywall-layout {
          padding: var(--pi-spacing-xxxx-large);
          gap: var(--pi-spacing-xxxx-large);

          .pi-main-wrapper-content {
            height: calc(
              100vh - var(--pi-spacing-xxxx-large) - var(
                  --pi-spacing-xxxx-large
                )
            );
            // Left
            &.pi-main-wrapper-content__left {
              .mat-mdc-radio-group {
                max-width: 50%;
              }
              .pi-wrapper__action {
                margin-top: 5rem;
              }
            }
          }
        }
      }
    }
  }
}