/*
We use this to determine what we should to logged in versus logged out users
For example, the actual log in and log out buttons, a my account link, and subscribe call to actions
*/
[data-show-logged-in],
[data-show-logged-out] {
  display: none !important;
}

[data-logged-in=true] [data-show-logged-in] {
  display: inline-block !important;
}

[data-logged-out=true] [data-show-logged-out] {
  display: inline-block !important;
}

/*
We use this to show sample content versus premium content in conjunction with the paywall
*/
[data-show-subs-blocked],
[data-show-has-noaccess],
[data-show-has-access] {
  display: none !important;
}

[data-subs-blocked=true] [data-show-subs-blocked] {
  display: block !important;
}

[data-has-access=true] [data-show-has-access] {
  display: block !important;
}

[data-has-access=false] [data-show-has-noaccess] {
  display: block !important;
}

/*
We use this show that we can show different content on a page before and after the complete a checkout
<div data-show-checkout-incomplete>Please Join Us<button>Subscribe</button></div>
<div data-show-checkout-complete>Welcome! We love you!</div>
*/
[data-show-checkout-complete] {
  display: none !important;
}

[data-checkout-complete=true] [data-show-checkout-complete] {
  display: inline-block !important;
}

[data-checkout-complete=true] [data-show-checkout-incomplete] {
  display: none !important;
}

[data-has-access=false] [data-show-fade-on-noaccess]{
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  mix-blend-mode: hard-light;
}

[data-has-access=false] [data-show-fade-on-noaccess]:before {
  content: '';
  background: linear-gradient(transparent, gray);
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.pp-subs iframe {
  width: 100% !important;
}