@import '../../../styles';

.jse-welcome {
  flex: 1;
  overflow: auto; // FIXME: overflow doesn't work (try giving editor 100px height)
  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);

  display: flex;
  flex-direction: column;
  align-items: center;

  border-left: var(--jse-main-border);
  border-right: var(--jse-main-border);

  &:last-child {
    border-bottom: var(--jse-main-border);
  }

  .jse-space.jse-before {
    flex: 1;
  }

  .jse-space.jse-after {
    flex: 2;
  }

  .jse-contents {
    margin: 2em $padding 0;
    color: var(--jse-panel-color-readonly);

    ul {
      $list-padding: 10px;

      list-style: '●';
      list-style-position: outside;
      padding-left: 2 * $list-padding;

      li {
        padding-left: $list-padding;

        span.jse-bold {
          font-family: var(--jse-font-family-mono);
          font-weight: bold;
        }
      }
    }
  }
}