.preview-widget {
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;

  &--skin-neutral {
    background-color: var(
      --wds-preview-widget-fill,
      var(--wds-color-fill-surface-neutral, var(--wsr-color-D60, #dfe5eb))
    );
  }

  &--skin-gradient {
    background: linear-gradient(115deg, #d4e5f2 60%, #eee8e5 100%);
  }

  /* must stay a single class (0,1,0): MobilePreviewWidget overrides this node
     at (0,2,0). Nesting it as `& &__content-area` ties and this sheet, loading
     later, wins, and the mobile frame loses its radius and inset shadow */
  &__content-area {
    border-radius: 4px;
    /* needed so that the inner element won't break the border-radius */
    overflow: hidden;
  }

  &--scrollable &__content-area {
    overflow: auto;
    max-height: 100%;
  }

  &--content-outline-shadow &__content-area {
    box-shadow: var(
      --wsr-shadow30,
      0 6px 6px 0 rgba(22, 45, 61, 0.06),
      0 0 18px 0 rgba(22, 45, 61, 0.12)
    );
  }

  &--content-outline-border &__content-area {
    border: solid 1px var(--wds-color-black-550, var(--wsr-color-D55, #cfd1dc));
  }
}