@use '@lucas-labs/lui-micro/var' as var;
@use '@lucas-labs/lui-micro/color' as color;

@mixin editor {
    .combo-markdown-editor {
        .top.tabular.menu {
            background-color: var(--color-box-header);
            border-radius: var(--border-radius) var(--border-radius) 0 0;
            min-height: 0px;
            margin-bottom: var.get('measure/1x') !important;
            
            .item {
                margin: -1px 0 0 -1px; // merge borders
                border-top-left-radius: var(--border-radius) !important;
                border-top-right-radius: var(--border-radius) !important;
                padding: var.get('measure/.5x') var.get('measure/.75x') !important;
                font-weight: 400;

                &:hover {
                    color: var(--color-text-light-2);
                }

                &.active {
                    color: var(--color-text);
                    &:after {
                        // a hacky 1 pixel "button border" to make the border
                        // of the whole menu disappear under the active tab
                        display: block;
                        content: '';
                        position: absolute;
                        top: 100%;
                        right: 0;
                        width: 100%;
                        height: 1px;
                        background-color: var(--color-body);
                    }
                }
            }
        }

        .tab {
            .EasyMDEContainer { // legacy editor
                border: none !important;

                .editor-toolbar {
                    border: none !important;
                }
            }

            markdown-toolbar, .EasyMDEContainer .editor-toolbar {
                padding: 0 10px !important;

                .markdown-toolbar-group {
                    border: none !important;
                    padding: 0 !important;

                    &:not(:last-child) {
                        &:after {
                            content: '';
                            display: block;
                            position: relative;
                            width: 1px;
                            flex: 1;
                            margin: var.get('measure/.375x') var.get('measure/.375x') !important;
                            background-color: color.get('elevation/6');
                        }
                    }
                }

                .markdown-toolbar-button, button {
                    line-height: 0;
                    display: inline-block;
                    color: var(--color-text-light-2) !important;
                    padding: var.get('measure/.375x') !important;
                    transition: background-color .1s ease;
                    border-radius: var.get('measure/.375x') !important;
                    height: auto;
                    min-width: fit-content;

                    &:hover {
                        background-color: color.get('elevation/5') !important;
                    }
                    
                    // if has attribute level
                    &[level] {
                        width: 34px;
                    }

                    // if aria-checked is true
                    &[aria-checked="true"] {
                        background-color: color.get('elevation/4');
                    }
                }

                button {
                    &:after {
                        vertical-align: unset !important;
                    }
                }
            }
            
            textarea, .CodeMirror.cm-s-easymde.CodeMirror-wrap {
                background-color: transparent !important;
                border: none !important;
                padding: var.get('measure/1x') var.get('measure/1x') !important;
            }

            .editor-statusbar {
                margin-bottom: 0 !important;
            }

            &.markup {
                padding: 0 var.get('measure/1x') var.get('measure/1x');
            }
        }
    }

    .combo-markdown-editor {
        border: 1px solid var(--color-secondary);
        border-radius: var(--border-radius);
        &:focus-within {
            outline: 2px solid var(--color-accent);
            border-radius: var(--border-radius);
        }

        textarea:focus {
            outline: none !important;
        }

        .ui.tab.markup[data-tab-panel=markdown-previewer] {
            border-bottom: 0px;
        }
    }

    #comment-form, .edit-content-zone, .comment-form, .comment-code-cloud form {
        padding: 0 !important;
        border: none !important;

        .field {
            margin-bottom: var.get('measure/1x') !important;
        }
    }
}
