/* this mimics the default styelsheet for the story page */
.story {
  display: flex;
  outline: var(--theme-sizes-zero);
  width: var(--theme-sizes-full);
  background-color: var(--theme-colors-gray-50);
  border-style: dashed;
  border-width: 2px;
  border-color: var(--theme-border-default);
  border-radius: var(--theme-radii-md);
  min-width: 0;
  min-height: 200px;
  max-width: 100%;
  max-height: 100%;
  justify-content: center;
  align-items: center;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.story:hover {
  border-color: var(--theme-colors-gray-300);
}
.story:focus {
  border-color: var(--theme-colors-gray-500);
}
.story:error {
  border-color: var(--theme-colors-red-500);
}
.story[data-drag-active="true"] {
  border-color: var(--theme-colors-blue-500);
}