@import '../node_modules/sh-core/src/base';

@mixin stroke-style {
    svg {
        .ql-stroke {
            stroke: $color-primary;
        }
    }
}

.sh-quill {
    border-radius: $size-border-radius-small;
    min-width: 380px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;

    .ql-snow {
        &.ql-toolbar {
            border: 0;
            flex: initial;
            color: $color-box-dark-background2;
            background: $colorToolTipBackground;
            padding: 4px 10px;
            margin-bottom: 5px;
            border-radius: $size-border-radius-small;

            .ql-formats {
                margin-right: 7px;

                .ql-picker {
                    &.ql-font {
                        width: 160px;

                          .ql-picker-item, .ql-picker-label {
                            &:before {
                              content: 'Sans Serif';
                            }
                            &[data-value] {
                              &:before {
                                content: attr(data-value);
                              }
                            }
                          }
                    }

                    &.ql-size {
                        width: 70px;
                    }

                    .ql-picker-options {
                        .ql-picker-item {
                            &.ql-selected {
                                @include stroke-style;
                                color: $color-primary;
                            }

                            &:hover {
                                @include stroke-style;
                                color: $color-primary;
                            }
                        }
                    }
                }

                .ql-picker-label {
                    &.ql-active {
                        color: $color-primary;
                    }

                    &:hover,
                    &.ql-active {
                        @include stroke-style;
                        color: $color-primary;
                    }
                }
            }

            .ql-active {
                @include stroke-style;
            }

            button {
                &:hover {
                    @include stroke-style;
                    color: $color-primary;
                    stroke: $color-primary;
                }
            }
        }

        &.sh-quill-contents {
            background-color: $color-box-background;
            position: relative;
            border: 0;
            border-radius: $size-border-radius-small;
            width: 100%;
            height: initial;
            overflow-y: visible;
            padding: 0;
            outline: 0;
            color: $color-box-dark-background;
            flex: 1 1 auto;

            .ql-editor {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: $color-box-background;
                border-radius: $size-border-radius-small;

                .ql-font-arial {
                    font-family: Arial, sans-serif;
                }

                li {
                    display: list-item;
                }
            }

            .ql-out-bottom,
            .ql-out-top {
                visibility: visible;
            }
        }

        .ql-tooltip, &.ql-tooltip {
            left: 0px !important;
            background-color: #fff;
            left: -1px;
            top: -16px;
            color: #444;
            margin-top: 10px;
            padding: 5px 12px;
            white-space: nowrap;
            border: 0;
            border-radius: 0 0 2px 2px;
            box-shadow: 5px 7px 5px $color-box-dark-background3;
            font-size: 13px;

            a {
                font-size: 13px;
                color: $color-primary;
            }
        }

        &.insert-image-by-url {
          position: absolute;
          top: 27px;
          z-index: 1;
          font-size: 13px;

          input {
            margin-right: 16px;
          }

          a {
            cursor: pointer;
          }
        }
    }

    &.sm {
        .ql-toolbar {
            .ql-picker-label {
                padding: 0;
            }

            .ql-image {
                display: none;
            }

            .ql-strike {
                display: none;
            }

            .ql-color-picker {
                display: none;
            }

            .ql-font {
                &.ql-picker {

                    .ql-picker-label {
                        font-size: 14px;
                        overflow: hidden;
                        width: 86px;
                    }
                }
            }

            .ql-picker {
                &.ql-size {

                    margin-left: -69px;
                    width: 70px;

                    .ql-picker-label {
                        width: 70px;
                    }
                }
            }

            .ql-align {
                margin-left: 0;

                .ql-picker-label {
                    svg {
                        height: 15px;
                        position: absolute;
                        top: 4px;
                        right: 4px;
                    }
                }

                button {
                    width: 24px;
                    padding: 0;
                }
            }

            .ql-formats {
                margin: 0;

                &:nth-child(2),
                &:nth-child(3),
                &:nth-child(4) {
                    margin-left: 0;

                    svg {
                        height: 15px;
                    }

                    button {
                        width: 24px;
                        padding: 0;
                    }
                }
            }
        }
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-track {
        display: none;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: $color-box-dark-background3;
    }
}