@import (reference) "./colortheme-all.less";

.help_vars (
    @color: @colortheme_default-color,
    @bg-color: @colortheme_default-bg
) {
    @help-bg-color-l15: lighten(@bg-color, 15%);
    @help-text-color: contrast(@help-bg-color-l15, #fff, #000); //@color;
    @help-link-color: contrast(@help-bg-color-l15, lighten(spin(@bg-color, 180), 10%), darken(spin(@bg-color, 180), 10%));
}
.help_main (
    @color: @colortheme_default-color,
    @bg-color: @colortheme_default-bg
) {
    --LessLoader_require: LessLoader_currentFile();
    .help_vars(@color, @bg-color);
    --help-bg-color-l15: @help-bg-color-l15;
    --help-text-color: @help-text-color;
    --help-link-color: @help-link-color;
};
& {
    .help_vars();
    .cp-help-container {

        position: relative;
        background-color: @help-bg-color-l15;
        background-color: var(--help-bg-color-l15);
        &.cp-help-hidden {
            display: none;
        }

        .cp-help-close {
            position: absolute;
            top: 5px;
            right: 5px;
        }
        .cp-help-text {
            color: @help-text-color;
            color: var(--help-text-color);
            margin: 0;
            padding: 5px 15px;
            a {
                color: @help-link-color;
                color: var(--help-link-color);
            }
            h1 {
                font-size: 20px;
            }
            h2 {
                font-size: 18px;
            }
            h3 {
                font-size: 16px;
            }
            ul, ol, p, h1, h2, h3 { margin: 0; }
            &.cp-help-small {
                ul {
                    display: none;
                }
                cursor: pointer;
            }
        }
    }
}