@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  width: 916px;
  margin: 0 auto;
}

.step {
  margin: 20px 0;
  & > div {
    @include TypographyTitleH4($dark-color08);
  }
  & > p {
    margin-top: 4px;
    @include TypographyParagraph($dark-color01);
  }
}

.codeWrapper {
  padding: 12px;
  background-color: $card-bg-color;
  border-radius: $border-radius;
}

.pane {
  padding: 12px;
  border-radius: $border-radius;
  border: solid 1px $border-color;
  background-color: $white;
}

.editor {
  height: calc(100vh - 340px);
  min-height: 500px;

  & > div {
    height: 100%;
  }
}

.title {
  @include TypographySymbolText;
  margin-bottom: 12px;

  & > span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
  }
}