@import '~styles/mixins';
@import '~styles/adminMixins';

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

.CkEditorField {
  line-height: 1.3;

  @include baseTableStyle;

  .editor-wrapper {
    position: relative;
  }

  .top-actions {
    padding-top: $margin_top;
    text-align: right;
    align-items: center;

    > * {
      @include middle;
      margin-left: 10px;
      cursor: pointer;
    }

    user-select: none;
    font-size: 10px;
    z-index: 1;
    text-transform: uppercase;
    padding-bottom: 5px;

    .insert-image {
      font-size: 13px;
    }

    .open-full {
      border-left: 1px solid $color-border;
      padding-left: 10px;
    }

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

  textarea {
    padding: 0;
  }
  .code-input-wrapper {
    padding: 10px 0;
  }

  :global .ck {
    font-family: $font;
    color: $color_dark;

    .ck-toolbar {
      border: 1px solid $color_border !important;
      background-color: white !important;
    }

    .ck-editor__main > .ck-editor__editable {
      border: none !important;
      box-shadow: none !important;
      background-color: transparent;
    }

    .ck.ck-sticky-panel .ck-sticky-panel__content_sticky {
      top: $height_global_header - 15px;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    }

    p {
      margin-bottom: revert;
    }
  }

  .editor-wrapper.small {
    :global .ck {
      .ck-editor__main > .ck-editor__editable {
        max-height: 400px;
      }
    }
  }
}
.cke-modal {
  text-align: left;
  height: 80vh;
  .code-input-wrapper {
    padding: 10px;
  }

  :global {
    .ck-editor {
      height: 100% !important;

      .ck-editor__main {
        height: calc(100% - 38px) !important;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          width: 5px;
        }

        &::-webkit-scrollbar-track {
          background-color: rgba($color: #888, $alpha: 0.3);
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 2px;
          background-color: rgba($color: #888, $alpha: 0.5);
        }

        &::-webkit-scrollbar-thumb:hover {
          background-color: rgba($color: #888, $alpha: 0.6);
        }

        .ck-content {
          border: none !important;
        }
      }
    }
  }
}
