/**
 * This file provides styles for the note plugin if the option pluginNote is enabled
*/

&:root[pluginnote="1"] {

    /* Base colors */
    @classic_light:     __note_plugin_classic_color__;
    @important_light:   __note_plugin_important_color__;
    @warning_light:     __note_plugin_warning_color__;
    @tip_light:         __note_plugin_tip_color__;

    @opacity_dark: 0.8;
 
    /* general styles */
    .noteclassic, .noteimportant, .notewarning, .notetip {
        margin: 1em auto;
        width: auto;
        max-width: 100%;
        min-height: 20px;
        clear: none;
        text-align: justify;
        vertical-align: middle;
        border-collapse: collapse;
        padding: 15px 20px 15px 50px;
        background-position: 15px 50%;
        background-repeat: no-repeat;
        border-radius: 2px;
        color: black;
        font-size: 100%;
        overflow: auto;
        font-family: Consolas,"Andale Mono WT","Andale Mono","Bitstream Vera Sans Mono","Nimbus Mono L",Monaco,"Courier New",monospace;
        border-left: 13px solid;
        border-right: 1px solid;
        border-top: 1px solid;
        border-bottom: 1px solid;
    }

    .noteclassic {
        border-color: darken(@classic_light, 20%);
        background-color: @classic_light;
        background-image: url(images/plugin_note/note.svg);
    }

    .noteimportant {
        border-color: darken(@important_light, 40%);
        background-color: @important_light;
        background-image: url(images/plugin_note/important.svg);
    }

    .notewarning {
        border-color: darken(@warning_light, 20%);
        background-color: @warning_light;
        background-image: url(images/plugin_note/warning.svg);
    }

    .notetip {
        border-color: darken(@tip_light, 20%);
        background-color: @tip_light;
        background-image: url(images/plugin_note/tip.svg);
    }

    /**************************************************/
    /* DARK MODE                                      */
    /* for dark mode just reduce the opacity a little */
    /**************************************************/

    .darkModeNotePlugin{
        .noteclassic {
            opacity: @opacity_dark;
        }

        .noteimportant {
            opacity: @opacity_dark;
        } 

        .notewarning {
            opacity: @opacity_dark;
        }
    
        .notetip {
            opacity: @opacity_dark;
        }
    }

    /* dark theme and automatic is switched off*/
    &:root[theme="dark"] {
        .darkModeNotePlugin();
    }

    /* User prefers dark theme and automatic is switched on*/
    @media (prefers-color-scheme: dark){
        &:root[theme="auto"] {
            .darkModeNotePlugin();
        }
    }
}