/* Simulate marketing site to preview widget */

:root {
  --demo-neutral: #ffffff;
  --demo-colour-light: #f6f5fd;
  --demo-colour: #4632d8;
  --demo-placeholder: #d1d1d2;
  --demo-header-height: 65px;
}

.demo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--demo-neutral);
  border-bottom: 1px solid var(--demo-placeholder);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  z-index: 1;
  gap: 16px;
}

.demo-header__logo {
  flex-basis: 140px;
  height: 32px;
  background-color: var(--demo-placeholder);
  border-radius: 4px;
}

.demo-header__nav {
  display: flex;
  gap: 16px;
}

.demo-header__nav-item {
  width: 72px;
  height: 24px;
  background-color: var(--demo-placeholder);
  border-radius: 4px;
}

.demo-main {
  position: relative;
  padding-top: var(--demo-header-height);
  background-color: var(--demo-colour);
}

.demo-sections {
  display: flex;
  flex-direction: column;
}

.demo-section {
  min-height: 100vh;
}

.demo-section--neutral {
  background-color: var(--demo-neutral);
}

.demo-section--light {
  background-color: var(--demo-colour-light);
}

.demo-section--colour {
  background-color: var(--demo-colour);
}

.demo-widget-sticky {
  margin-top: -300vh;
  min-height: 300vh;
  padding: 0 16px;
  box-sizing: border-box;
}

.demo-widget-sticky__inner {
  position: sticky;
  top: var(--demo-header-height);
  padding-top: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.layout--all-questions {
  margin: 0 32px;
}

.layout--single-question {
  max-width: 320px;
  min-height: 300px;
  margin: 0 auto;
}

@media (min-width: 460px) {
  .layout--single-question {
    max-width: 416px;
  }
}

@media (min-width: 850px) {
  .layout--single-question {
    max-width: 480px;
  }
}

.demo-footer {
  background-color: var(--demo-colour-light);
  padding: 48px 24px;
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.demo-footer__item {
  flex-basis: 60px;
  height: 16px;
  background-color: var(--demo-placeholder);
  border-radius: 4px;
}