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

.header {
  position: relative;
  margin: 30px 0 12px;
  color: $title-color;
  font-weight: bold;
}

.readmeEdit {
  :global {
    .for-container {
      box-shadow: $base-shadow;
      border-color: $border-color;
      border-radius: $border-radius;

      .for-toolbar {
        border-color: $border-color;
        color: $title-color;
        font-weight: bold;
        font-size: 16px;
        background-color: $bg-color;
        border-radius: $border-radius $border-radius 0 0;

        ul > li {
          &:hover {
            background-color: $light-color03;
          }

          &.for-active {
            background-color: $light-color04;
          }
        }
      }

      .for-editor {
        color: $text-color;
        border-radius: 0 0 $border-radius $border-radius;

        .for-editor-edit {
          .for-line-num {
            width: 46px;
            padding: 12px 0;
            line-height: 24px;
            background-color: $bg-color;
            color: $dark-color02;
            border-right: 1px solid $border-color;
          }

          .for-editor-content {
            margin: 0 16px;
          }

          textarea {
            padding: 12px 0;
            line-height: 24px;
            font-size: 12px;
          }
        }
      }

      .for-markdown-preview {
        img {
          display: initial;
        }
      }
    }

    .for-fullscreen {
      width: 100%;
      border: none;
      border-radius: 0;

      .for-toolbar {
        border-radius: 0;
      }

      .for-editor {
        border-radius: 0;
      }
    }
  }
}
