@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";

[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-top-color: transparent;
    border-bottom-right-radius: $border_rad_heaviest;
    border-bottom-left-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 {
      font-family: monospace;
      background: $bg_light;
      padding: 0.1rem 0.3rem;
      margin: 0 5px;
      box-shadow: 0 2px 10px $shadow;
      border-radius: 0.25rem;
      overflow: hidden;
      font-size: ($text_small - 1px);
    }

    pre {
      background: $bg_dark;
      padding: $space_sm;
      border-radius: $border_rad_heaviest;
      margin: 1.5rem 0 2rem 0;
      code {
        background: transparent;
        box-shadow: none;
        border: 0;
        color: #faf6e4;
      }
    }
    a {
      color: $primary;
      border-bottom: 1px solid $primary;
      &:hover {
        color: $text_lt_default;
        border-bottom: 1px solid $text_lt_default;
      }
    }
    blockquote {
      font-size: $font_larger;
      padding: $space_sm $space_md;
      font-style: italic;
      p {
        margin: 0;
      }
    }
    &:focus-visible {
      outline: unset;
      border-top-color: $primary;
      @include transition_default;
    }
    h1 {
      font-size: $text_largest;
      line-height: $text_larger;
      font-weight: $bolder;
      letter-spacing: $lspace_tight;
      margin: 2.1rem 0 0 0;
    }
    h2 {
      font-size: $text_larger;
      line-height: $text_larger;
      font-weight: $bolder;
      letter-spacing: $lspace_tight;
      margin: 1.9rem 0 0 0;
    }
    h3 {
      font-size: $text_large;
      line-height: $text_large;
      font-weight: $bolder;
      letter-spacing: $lspace_tight;
      margin: 1.7rem 0 0 0;
    }
    h4,
    h5,
    h6 {
      font-size: $text_base;
      line-height: $text_base;
      letter-spacing: $lspace_tight;
      font-weight: $bolder;
    }
    hr {
      margin: 2.2rem 0;
      box-sizing: content-box;
      overflow: hidden;
      background: transparent;
      border-bottom: 1px solid $transparent;
      height: 1px;
      padding: 0;
      background-color: $border_light;
      border: 0;
    }
    ol {
      margin: 1rem 0 0 0;
      padding-left: $space_md;
      list-style: decimal;
      li {
        margin: 2px 0;
        p {
          margin: 0;
        }
      }
    }
    ul {
      list-style-position: disc;
      margin: 1rem 0 0 0;
      padding-left: $space_md;
      li {
        margin: 2px 0;
        p {
          margin: 0;
        }
      }
    }
  }
}

.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;
  }
}