@mixin authenticationLayoutSelectMenuTypeCustom(
  $columnsNum: 1,
  $card-height: unset
) {
  .pi-layout__00-authentication {
    &.pi-layout__00-authentication--user-profile {
      .pi-select {
        .pi-select-options-menu {
          padding: unset;
          background-color: transparent;
        }
        &.pi-select__menu-type--custom-grid {
          .pi-select-options-menu {
            & > div {
              display: grid;
              grid-template-columns: repeat(#{$columnsNum}, 1fr);
              grid-gap: var(--pi-spacing-large);
              .pi-card {
                min-height: $card-height;
              }
            }
          }
        }
      }
      // Grid wrapper 3 cols in Authentiocation User Type layout
      .pi-wrapper {
        &.pi-wrapper__grid {
          &.pi-wrapper__grid--columns-3 {
            &.is-responsive {
              grid-template-columns: repeat(#{$columnsNum}, 1fr);
            }
          }
        }
      }
    }
  }
}

@mixin authenticationLayoutMobile {
  .pi-layout__00-authentication {
    &.pi-layout__00-authentication--user-profile {
      .pi-select-option__large {
        width: -webkit-fill-available;
      }
      .pi-card {
        .pi-card-content__bottom {
          display: none;
        }
      }
      .pi-panel__gap--xxxl {
        & > section {
          gap: var(--pi-spacing-x-small);
        }
      }
    }
  }
}

.pi-layout__00-authentication {
  &.pi-layout__00-authentication--user-profile {
    .pi-card {
      &.is-active {
        .pi-card-content__bottom {
          & > span {
            font: {
              weight: 400;
            }
          }
        }
      }
    }
  }
}

html {
  // Mobile
  &.is-mobile {
    @include authenticationLayoutSelectMenuTypeCustom;
    @include authenticationLayoutMobile;
  }
  &:not(.is-desktop) {
    @media screen and (max-width: 62rem) {
      .pi-layout__00-authentication {
        &.pi-layout__00-authentication--user-profile {
          .pi-panel-content__center {
            padding-top: var(--pi-spacing-medium);
          }
        }
      }
    }
  }
  // Tablet
  &.is-tablet {
    // Tablet Small
    &.is-tablet__small {
      @include authenticationLayoutSelectMenuTypeCustom;
    }
    // Tablet L
    &.is-tablet__large {
      @include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
    }
  }
  // Desktop
  &.is-desktop {
    &.is-desktop__small {
      @include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
    }
    &:not(.is-desktop__small) {
      @include authenticationLayoutSelectMenuTypeCustom(3);
    }
  }
}