@import '../variables';
@import '../theme-colors';

// Summernote Editor
.note-editor {
  &.note-frame {
    border: 1px solid var(--default-border-color);
  }

  &.card {
    box-shadow: none;

    .card-header {
      padding: 10px 10px 5px 10px;
    }
  }

  .note-toolbar {
    > .note-btn-group {
      margin: 0 5px 5px 0;

      .btn {
        box-shadow: none !important;

        &.active {
          color: var(--default-font-color);
          border-color: var(--summernote-option-focus-color);
          background-color: var(--summernote-option-focus-color);
        }

        &:active {
          background-color: var(--base-color) !important;
        }

        &.dropdown-toggle {
          &[aria-label="More Color"] {
            &:after {
              margin-left: 0;
            }
          }
        }
      }

      .show {
        .dropdown-toggle {
          color: var(--default-font-color);
          border-color: var(--summernote-option-focus-color);
          background-color: var(--summernote-option-focus-color);
        }
      }

      .dropdown-menu {
        background-color: var(--dropdown-menu-bg);

        .dropdown-item {
          color: var(--default-font-color);

          &:hover, &:focus {
            text-decoration: none;
            color: var(--default-font-color);
            background-color: var(--base-color);
          }
        }
      }
    }
  }

  .note-editing-area {
    min-height: 150px;
  }
}

// CK Editor
.ck {
  &.ck-reset_all {
    * {

    }
  }

  &.ck-toolbar {
    background: var(--base-color) !important;
    color: var(--default-font-color) !important;
    border: 1px solid var(--default-border-color) !important;
    border-radius: $default-radius $default-radius 0 0 !important;
  }

  &.ck-editor__editable {
    min-height: 150px;
    color: var(--default-font-color) !important;
    background: var(--default-card-bg) !important;
    border: 1px solid var(--default-border-color) !important;
    border-radius: 0 0 $default-radius $default-radius !important;
  }

  &.ck-button {
    color: var(--default-font-color) !important;

    &.ck-on {
      background-color: var(--summernote-option-focus-color) !important;
    }

    &:not(.ck-disabled) {
      &:hover {
        background-color: var(--summernote-option-focus-color) !important;
      }
    }
  }

  a {
    &.ck {
      &.ck-button {
        color: var(--default-font-color) !important;

        &.ck-on {
          background-color: var(--summernote-option-focus-color) !important;
        }

        &:not(.ck-disabled) {
          &:hover {
            background-color: var(--summernote-option-focus-color) !important;
          }
        }
      }
    }
  }

  &.ck-dropdown {
    .ck-dropdown__panel {
      border: 1px solid var(--default-border-color);
      background-color: var(--dropdown-menu-bg) !important;

      .ck-list {
        background-color: var(--dropdown-menu-bg) !important;
      }
    }
  }
}

// SCSS for RTL Layout
[dir="rtl"] {
  .note-editor {
    .note-toolbar {
      > .note-btn-group {
        .btn {
          &.dropdown-toggle {
            &[aria-label="More Color"] {
              &:after {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    .note-editing-area {
      .note-editable {
        text-align: start;
      }
    }
  }
}