.sandbox {
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.vestDemo {
  padding: 2rem;
}

.demoWrapper {
  height: 500px;
  border: 1px solid var(--ifm-color-primary-lighter);
  border-radius: 4px;
  background: #191919;
}

.demoSwitchWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.5rem 0.5rem 0;
}

.demoSwitch {
  border-radius: 0;
  color: var(--ifm-color-primary-lightest);
  border: 1px solid var(--ifm-color-primary-lighter);
  border-bottom: 0;
  border-left: 0;
  padding: 0.5rem 2rem;
  cursor: pointer;
  background-color: var(--ifm-color-primary-darkest);
}

.demoSwitchActive {
  background-color: var(--ifm-color-primary-darker);
}

.demoSwitch:first-child {
  border-radius: 4px 0 0 0;
  border-left: 1px solid var(--ifm-color-primary-lighter);
}

.demoSwitch:last-child {
  border-radius: 0 4px 0 0;
}

@media screen and (max-width: 500px) {
  .demo {
    display: none;
  }
}

button.sandboxPlaceholder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 0;
  cursor: pointer;
  background: none;
  padding: 0;
  width: 100%;
  height: 100%;
}

.sandboxPlaceholderText {
  color: var(--ifm-color-primary-lightest);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
}

.sandboxPlaceholderArrow {
  mask-image: url(/img/play_arrow.svg);
  mask-size: 2rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--ifm-color-primary-lightest);
  border-radius: 50%;
  width: 4rem;
  height: 4rem;
  border: 0;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.sandboxPlaceholder:hover .sandboxPlaceholderArrow {
  background-color: var(--ifm-color-primary);
}
