@import '~styles/mixins';

$margin_top: 8px;
$height_small: 350px;
$height_bar: 75px;

.Wysiwyg {
  line-height: 1.3;

  .editor-wrapper {
    padding-top: $margin_top;
    position: relative;

    &.code-wrapper {
      > * {
        > * {
          border-bottom: none;
        }
      }
    }
  }

  .editor {
    min-height: 500px;
    padding: 0 10px;
    max-height: 600px;
  }

  img {
    max-width: 100%;
  }

  .switch {
    text-align: right;
    user-select: none;
    font-size: 10px;
    z-index: 1;
    text-transform: uppercase;
    padding-bottom: 5px;

    .text {
      cursor: pointer;
      display: inline-block;
    }

    &.code {
      border-bottom: 1px solid #f1f1f1;
    }
  }

  .editor-wrapper.small {
    .editor {
      max-height: $height_small;
      min-height: $height_small;
      overflow: auto;
    }
  }

  textarea {
    padding: 0;
  }
}
