.sui-o-page-popin {
  pointer-events: none;
  z-index: $sui-z-index-o-page-popin;
  position: absolute;
  opacity: 0;
  bottom: 0;
  left: $sui-space-md;
  right: $sui-space-md;
  margin: $sui-space-md auto;
  color: $sui-color-brand-denim-100;
  background: $sui-color-primary;
  border-radius: $sui-border-radius-xl;
  padding: $sui-space-sm 0;
  box-shadow: $sui-shadow-100;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  overflow: auto;
  transform: translate(0, 100%);
  transition: .3s $sui-curve-easeInOutQuint;
  max-width: rem(800);

  @include suiMediaMin($sui-breakpoint-sm) {
    flex-wrap: nowrap;
    padding: $sui-space-md $sui-space-xs;
  }

  &:not(.as--open) {
    *,
    ::after,
    ::before {
      pointer-events: none;
    }
  }

  &.as--open {
    pointer-events: auto;
    transform: translate(0, 0);
    opacity: 1;
  }

  &__back {
    order: 9;
    padding: 0 $sui-space-sm;
    margin-right: auto;
    border-right: $sui-size-border solid rgba(0, 0, 0, .1);

    @include suiMediaMin($sui-breakpoint-sm) {
      order: -1;
    }
  }

  &__content {
    flex-basis: 100%;
    font-size: $sui-font-size-ms;
    padding: 0 $sui-space-md $sui-space-sm $sui-space-md;

    @include suiMediaMin($sui-breakpoint-sm) {
      font-size: $sui-font-size-md;
      padding-bottom: 0;
    }
  }

  // Hide first action border on small screens
  @include suiMediaMax($sui-breakpoint-sm) {
    &__content + &__action {
      border-left: none;
    }
  }

  &__action {
    order: 10;
    padding: 0 $sui-space-sm;
    border-left: $sui-size-border solid rgba(0, 0, 0, .1);

    @include suiMediaMin($sui-breakpoint-sm) {
      margin-left: auto;
    }
  }

  &__button {
    @include suiButtonBase();
    @include suiButtonColor(
      $background: transparent,
      $color: white,
      $border-color: transparent,
      $background-hover: darken($sui-color-primary, 5%),
      $border-color-hover: transparent,
      $color-focus-effect: black
    );
    @include suiButtonSize($sui-space-xxs, $sui-space-sm);

    @include suiMediaMin($sui-breakpoint-md) {
      @include suiButtonSize($sui-space-xs, $sui-space-md);
    }

    &[disabled] {
      pointer-events: none;
      opacity: 0.6;
    }

    &-label {
      display: none;
      margin-left: $sui-space-sm;
    }

    @include suiResponsiveModifiers($name: 'as--show-label', $suffix: ' &-label') {
      display: inline-block;
    }
  }
}