@import "../tokens/border_radius";
@import "../tokens/colors";
@import "../tokens/spacing";
@import "../tokens/titles";
@import "../tokens/line_height";
@import "../tokens/typography";
@import "../tokens/shadows";
@import "../tokens/transition";
@import "previewer_mixin";

[class^="pb_rich_text_editor_kit"] {
  .toolbar_button {
    display: flex;
    align-items: center;
    background: $transparent;
    border: none;
    border-radius: $border_rad_heaviest;
    color: $text_lt_light;
    cursor: pointer;
    &_icon {
      width: $space_xl + 2;
      height: $space_xl + 2;
    }
    &.open {
      color: $primary;
    }
    &.is-active,
    &:active {
      color: $primary;
      background-color: $bg_light;
    }
    &:hover:not([disabled]) {
      background-color: $neutral_subtle;
    }
    &:disabled {
      .pb_icon_kit {
        color: $border_light;
      }
    }
    &:focus-visible {
      outline: none !important;
    }
  }

  .toolbar {
    border-radius: $border_rad_heaviest $border_rad_heaviest 0 0;
    border: 1px solid $border_light;
    overflow-x: auto;
    &_block {
      gap: $space_xs;
    }
    .editor-dropdown-button {
      background: transparent;
      border: none;
      color: $text_lt_light;
      cursor: pointer;
      font-weight: $light;
      padding: ($space_xs - 1) 0px;
      width: $space_xl * 3;
      &:focus-visible {
        box-shadow: unset;
      }
    }
  }

  .ProseMirror {
    background: $white;
    border: 1px solid $border_light;
    border-radius: $border_rad_heaviest;
    height: 100%;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    line-height: $lh_loose;
    @include transition_default;
    :first-child {
      margin-top: 0;
    }

    h4,
    h5,
    h6,
    ul,
    ol,
    blockquote,
    p {
      margin: 1rem 0 0 0;
    }

    code {
      @include preview_tiptap_code;
    }

    pre {
      @include preview_tiptap_pre_codeblock;
    }
    a {
      @include preview_tiptap_a;
    }
    blockquote {
      @include preview_tiptap_blockquote;
    }
    &:focus-visible {
      outline: unset;
      @include transition_default;
    }
    h1 {
      @include preview_tiptap_h1;
    }
    h2 {
      @include preview_tiptap_h2;
    }
    h3 {
      @include preview_tiptap_h3;
    }
    h4,
    h5,
    h6 {
      @include preview_tiptap_smaller_headings;
    }
    hr {
      @include preview_tiptap_hr;
    }
    ol {
      @include preview_tiptap_ol;
    }
    ul {
      @include preview_tiptap_ul;
    }
  }
}

.pb_tiptap_toolbar_dropdown_list_item {
  &.is-active,
  &:active {
    color: $primary;
    background-color: $bg_light;
    border-radius: unset !important;
    .pb_nav_list_item_text,
    .pb_nav_list_item_icon_left {
      color: $primary !important;
    }
  }
  &:hover {
    background-color: $neutral_subtle;
    border-radius: unset !important;
    .pb_nav_list_item_text,
    .pb_nav_list_item_icon_left {
      background-color: unset;
      color: $text_lt_light !important;
    }
    .pb_nav_list_item_link {
      background-color: unset !important;
    }
  }
}
.pb_rich_text_editor_advanced_container {
  transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  &:focus-visible,
  &:focus-within {
    outline: unset;
    box-shadow: 0 0 0 1px $primary;
    border-radius: $border_rad_heaviest;
    transition: box-shadow 0.3s ease-in-out, border-radius 0.3s ease-in-out;
  }
  &.toolbar-active {
    .ProseMirror { 
      border-top: none;
      border-top-left-radius: initial;
      border-top-right-radius: initial;
    }
  }
}
.tiptap-content {
  @include preview_tiptap_first_child;
  a {
    @include preview_tiptap_a;
  }
  blockquote {
    @include preview_tiptap_blockquote;
  }
  h1 {
    @include preview_tiptap_h1;
  }
  h2 {
    @include preview_tiptap_h2;
  }
  h3 {
    @include preview_tiptap_h3;
  }
  h4,
  h5,
  h6 {
    @include preview_tiptap_smaller_headings;
  }
  hr {
    @include preview_tiptap_hr;
  }
  ol {
    @include preview_tiptap_ol;
  }
  p {
    @include preview_tiptap_p;
  }
  pre {
    @include preview_tiptap_pre_codeblock;
  }
  ul {
    @include preview_tiptap_ul;
  }
}