﻿@import '../../../Bit.BlazorUI/Styles/functions.scss';

.bit-rte {
    display: flex;
    flex-direction: column;

    .ql-editor.ql-blank::before {
        color: $clr-fg-ter;
    }

    .ql-snow {
        &.ql-toolbar {
            border-color: $clr-brd-pri;

            .ql-stroke {
                stroke: $clr-fg-sec;
            }

            .ql-fill {
                fill: $clr-fg-sec;
            }

            button:hover,
            .ql-picker-label:hover,
            .ql-picker-item:hover {
                color: $clr-pri-hover;

                .ql-stroke {
                    stroke: $clr-pri-hover;
                }

                .ql-fill {
                    fill: $clr-pri-hover;
                }
            }

            .ql-picker {
                color: $clr-fg-sec;

                &.ql-expanded .ql-picker-label,
                &.ql-expanded .ql-picker-options {
                    border-color: $clr-brd-pri;
                }

                .ql-picker-item.ql-selected {
                    color: $clr-pri-active;
                }
            }

            .ql-picker-options {
                background-color: $clr-bg-pri;
            }

            .ql-active {
                .ql-stroke {
                    stroke: $clr-pri;
                }

                .ql-fill {
                    fill: $clr-pri;
                }

                .ql-picker {
                    color: $clr-pri;
                }

                &.ql-picker-label {
                    color: $clr-pri;
                }
            }
        }
    }
}

.bit-rte-rvs {
    flex-direction: column-reverse;

    .bit-rte-edt {
        &.ql-container.ql-snow {
            border-bottom: 0;
            border-top: 1px solid $clr-brd-pri;
        }
    }
}

.bit-rte-tlb {
}

.bit-rte-edt {
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    &.ql-container {
        border-color: $clr-brd-pri;
    }

    .ql-editor {
        width: 100%;
        flex-grow: 1;
    }
}
