.#{$n}-unstarted-wrapper:empty {
  display: none;
}

.#{$n}-unstarted-wrapper--window {
  position: fixed;
  z-index: $z-index;
  right: $spacer;
  bottom: $spacer * 1.5 + $avatarsize-large;
  max-width: calc(100% - #{$spacer * 3});

  @include media('>phablet-l') {
    max-width: $spacer * 14;
  }
}

.#{$n}-unstarted-wrapper--inline {
  display: none;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition:
    margin $transition,
    max-height $transition;

  @include media('>desktop') {
    width: 67%;
  }
}

.#{$n}-unstarted-wrapper--inline.#{$n}-transition--visible {
  display: block;
}

.#{$n}-unstarted-wrapper--inline.#{$n}-transition--in {
  max-height: $spacer * 30;
  margin-bottom: $spacer;
}