@use "@angular/material" as mat;
@mixin wysiwyg-theme($theme) {
  $primary: map-get($theme, primary);
  $danger: map-get($theme, danger);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);

  $outline-color: mat.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));

  .sc-wysiwyg {
    &__wrapper {
      border-color: $outline-color;

      .sc-wysiwyg__menu-bar {
        border-color: $outline-color;
        background: mat.get-color-from-palette($background, card);
        color: mat.get-color-from-palette($foreground, text);

        .NgxEditor {
          &__HelpText--Error {
            color: mat.get-color-from-palette($danger, 500);
          }

          &__Seperator {
            border-color: $outline-color;
          }
  
          &__MenuItem {
            &--Icon {
              background: transparent;
              border: none;
              color: mat.get-color-from-palette($foreground, text);
              opacity: 0.75;
              transition: all 0.2s ease;

              &:hover {
                background-color: transparent;
                opacity: 1;
                color: mat.get-color-from-palette($primary, 500);
              }
            }

            &--Active {
              background: transparent;
              color: mat.get-color-from-palette($primary, 500);
              opacity: 1;
            }
          }

          &__Popup {
            background-color: mat.get-color-from-palette($background, card);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            .NgxEditor__Popup--Col {
              input {
                border-color: $outline-color;
                background: mat.get-color-from-palette($background, card);
                color: mat.get-color-from-palette($foreground, secondary-text);

                &:focus-visible {
                  border-color: mat.get-color-from-palette($primary, 500) !important;
                  outline: unset;
                }
              }
            }
          }

          &__Dropdown {
            background: transparent !important;
            border: none !important;
            color: mat.get-color-from-palette($foreground, text);
            opacity: 0.75;
            transition: all 0.2s ease;
            padding: 0;
            min-width: 24px;
            min-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none !important;
            box-shadow: none !important;
            position: relative;

            &--DropdownMenu {
              background-color: transparent;
            }

            &:hover,
            &:focus,
            &:active {
              background-color: transparent !important;
              opacity: 1;
              color: mat.get-color-from-palette($primary, 500);
              border: none !important;
              outline: none !important;
              box-shadow: none !important;
            }

            &--Selected {
              color: mat.get-color-from-palette($primary, 500);
            }

            &--Menu {
              background-color: mat.get-color-from-palette($background, card);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              border: 1px solid $outline-color;
              border-radius: 4px;
              margin-top: 4px;
              min-width: 120px;
              padding: 4px 0;
              display: none;
              position: absolute;
              top: 100%;
              left: 0;
              z-index: 1000;

              &.show {
                display: block;
              }
            }

            &--Text {
              color: mat.get-color-from-palette($foreground, text);
              border-color: mat.get-color-from-palette($foreground, text);
            }

            &--Item {
              width: 100%;
              padding: 6px 12px;
              background: none;
              border: none;
              color: mat.get-color-from-palette($foreground, text);
              cursor: pointer;
              text-align: left;
              opacity: 0.75;
              transition: all 0.2s ease;

              &:hover:not([disabled]) {
                opacity: 1;
                color: mat.get-color-from-palette($primary, 500);
                background-color: rgba(mat.get-color-from-palette($primary, 500), 0.1);
              }

              &[disabled] {
                opacity: 0.5;
                cursor: not-allowed;
                
                &:hover {
                  color: inherit;
                  background-color: transparent;
                }
              }
            }

            &--Separator {
              border-top: 1px solid $outline-color;
              margin: 4px 0;
            }
          }
        }
      }
    }

    &__editor {
      .NgxEditor {
        border-color: $outline-color;
        background: mat.get-color-from-palette($background, card);
        color: mat.get-color-from-palette($foreground, text);

        .NgxEditor__Content--Disabled {
          background: mat.get-color-from-palette($background, disabled-button) !important;
        }

        .NgxEditor__Placeholder::before {
          color: map-get($foreground, disabled-text);
        }

        .ProseMirror {
          // table {
          //   border-collapse: collapse;
          //   margin: 0;
          //   overflow: hidden;
          //   table-layout: fixed;
          //   width: 100%;
          //   position: relative;

          //   td, th {
          //     border: 1px solid $outline-color;
          //     box-sizing: border-box;
          //     min-width: 1em;
          //     padding: 8px;
          //     position: relative;
          //     vertical-align: top;

          //     > * {
          //       margin-bottom: 0;
          //     }

          //     &:hover {
          //       &::after {
          //         background-color: $outline-color;
          //         content: '';
          //         height: 100%;
          //         position: absolute;
          //         right: -2px;
          //         top: 0;
          //         width: 4px;
          //         cursor: col-resize;
          //       }
          //     }
          //   }

          //   th {
          //     background-color: rgba(mat.get-color-from-palette($primary, 500), 0.1);
          //     font-weight: bold;
          //     text-align: left;
          //   }

          //   .selectedCell:after {
          //     background: rgba(mat.get-color-from-palette($primary, 500), 0.1);
          //     content: "";
          //     left: 0;
          //     right: 0;
          //     top: 0;
          //     bottom: 0;
          //     pointer-events: none;
          //     position: absolute;
          //     z-index: 2;
          //   }
          // }

          // .tableWrapper {
          //   margin: 1em 0;
          //   overflow-x: auto;
          // }
        }
      }
    }

    &__preview {
      background: mat.get-color-from-palette($background, card);
      
      &-container {
        border-color: $outline-color;
        background: mat.get-color-from-palette($background, card);
        color: mat.get-color-from-palette($foreground, text);

        p {
          margin: 0 0 10px;
        }
      }
    }

    .NgxEditor__Dropdown {
      position: relative;
      display: inline-block;

      &--Button {
        background: transparent;
        border: none;
        color: mat.get-color-from-palette($foreground, text);
        cursor: pointer;
        padding: 4px 8px;
        opacity: 0.75;
        transition: all 0.2s ease;

        &:hover, &.active {
          opacity: 1;
          color: mat.get-color-from-palette($primary, 500);
        }
      }

      &--Menu {
        background: mat.get-color-from-palette($background, card);
        border: 1px solid $outline-color;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        display: none;
        min-width: 180px;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        padding: 4px 0;

        .NgxEditor__Dropdown:hover & {
          display: block;
        }
      }

      &--Item {
        background: none;
        border: none;
        color: mat.get-color-from-palette($foreground, text);
        cursor: pointer;
        display: block;
        padding: 6px 12px;
        text-align: left;
        width: 100%;
        opacity: 0.75;
        transition: all 0.2s ease;

        &:hover {
          opacity: 1;
          color: mat.get-color-from-palette($primary, 500);
          background-color: rgba(mat.get-color-from-palette($primary, 500), 0.1);
        }
      }

      &--Separator {
        border-top: 1px solid $outline-color;
        margin: 4px 0;
      }
    }
  }
}



/*
.sc-wysiwyg {
    &__label {
      color: mat.get-color-from-palette($foreground, secondary-text);
    }

    &__label-wrapper::before,
    &__label-wrapper::after {
      border-color: $outline-color !important;
    }

    .ql {
      &-picker-options{
        background-color: mat.get-color-from-palette($background, card) !important;
      }

      &-toolbar {
        button.ql-active,
        button:hover,
        button:focus {
          color: mat.get-color-from-palette($primary, 500) !important;
        }
      }

      &-toolbar.ql-snow,
      &-container.ql-snow {
        border-color: $outline-color;
      }

      &-picker-label:hover,
      &-picker-label:focus {
        color: mat.get-color-from-palette($primary, 500) !important;
      }
      
      &-picker-item:hover,
      &-picker-item:focus,
      &-picker-item.ql-selected{
        color: mat.get-color-from-palette($primary, 500) !important;
      }

      &-picker-label:not(:hover):not(:focus) {
        color: mat.get-color-from-palette($foreground, text) !important;
      }

      &-picker-item:not(:hover):not(:focus) {
        color: mat.get-color-from-palette($foreground, text) !important;
      }

      &-code-output__textarea,
      &-preview-output__div {
        background: mat.get-color-from-palette($background, card);
        color: mat.get-color-from-palette($foreground, text);
      }
    }
  }
*/