@import "~terriajs-variables";
@import "../../Sass/common/mixins";

.story-container {
  &.is-mounted {
    opacity: 1;
    @include transform(none);
  }
  @include transform(translateY(20%));
  opacity: 0;
  @include transition(all 0.3s);
  pointer-events: auto;
  opacity: 0;
  width: 100%;
  min-height: 2em;
  max-width: 1200px;
  background-color: #ffffff;
  color: $text-dark;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 0 15px 6px rgba(100, 100, 100, 0.3);

  .left {
    border-right: 1px solid $field-border;
  }
  .right {
    border-left: 1px solid $field-border;
  }
}

// styling for the "this map contains a story" notification
:global {
  .story.tjs-notification-window__wrapper {
    @media (min-width: $md) {
      left: $work-bench-width;
    }
    .tjs-notification-window__notification {
      // background-color: $color-primary;
      color: #ffffff;
      border: 1px solid rgba(#ffffff, 0.1);
      text-align: center;
    }
    .tjs-notification-window__footer {
      display: flex;
      border-top: 1px solid rgba(#ffffff, 0.8);
      button {
        color: #ffffff;
        background-color: transparent;
        font-weight: bold;
        &:first-of-type {
          border-right: 1px solid rgba(#ffffff, 0.8);
        }
      }
    }
  }
}