/* Wird das gebraucht? 
@import "mixins/mixins.less";
*/
/** Fonts 

    TODO: Font Import
    @import (inline) "@{googleFonts}";
*/

:root {
    /* Breakpoints 
    --xs: 320px;
    --sm: 576px;
    --container-sm: 540px;
    --md: 768px;
    --container-md: 720px;
    --lg: 992px;
    --container-lg: 960px;
    --xl: 1200px;
    --container-xl: 1140px;
    --xxl: 1920px;
    --container-xxl: 1800px;
    */
    
    /* Min-Max 
    --xxs-min: 0;
    --xxs-max: var(--xs) - 1;
    --xs-min: var(--xs);
    --xs-max: var(--sm) - 1;
    --sm-min: var(--sm);
    --sm-max: var(--md) - 1;
    --md-min: var(--md);
    --md-max: var(--lg) - 1;
    --lg-min: var(--lg);
    --lg-max: var(--xl) - 1;
    --xl-min: var(--xl);
    --xl-max: var(--xxl) - 1;
    --xxl-min: var(--xxl);
    */

    /* global colors */
    --success: var(--successColor);
    --debug:var(--success);
    --danger: var(--dangerColor);
    --error: var(--danger);
    --warning: var(--warningColor);
    --info: var(--infoColor);
    --disabled: #777;


    --font-family-headline: var(--headlineFont);
    --font-family-subline: var(--sublineFont);
    --font-family-text: var(--textFont);
    --font-family-source: var(--sourceFont);  
    --font-family-mono: var(--sourceFont);

    --font-weight-headline: var(--headlineFontWeight);
    --font-weight-subline: var(--sublineFontWeight);
    --font-weight-text: var(--textFontWeight);
    --font-weight-source: var(--sourceFontWeight);  

    --font-size-base:   var(--fontSizeBase);
    --font-size-large:  calc((var(--fontSizeBase) * 1.25));
    --font-size-small:  calc((var(--fontSizeBase) * 0.85));
    --font-size-h1:     calc((var(--fontSizeBase) * 2.6));
    --font-size-h2:     calc((var(--fontSizeBase) * 2.15));
    --font-size-h3:     calc((var(--fontSizeBase) * 1.7));
    --font-size-h4:     calc((var(--fontSizeBase) * 1.25));
    --font-size-h5:     var(--fontSizeBase);
    --font-size-h6:     calc((var(--fontSizeBase) * 0.85));

    /* to remove */
    --font-size-headline: var(--fontSizeBase) * 2.5;
    --font-size-subline: var(--fontSizeBase) * 1.5;
    --font-size-text: var(--fontSizeBase);
    --font-size-source: var(--fontSizeBase);

    --theme-bg: var(--themeColor);
    /*
    @TODO: fade and contrast
    --theme-bg-light: fade(contrast(var(--themeColor)), 25%);
    --theme-bg-lighter: fade(contrast(var(--themeColor)), 20%);
    --theme-bg-lightest: fade(contrast(var(--themeColor)), 15%);
    --theme-color: contrast(var(--themeColor));
    */


    /* Main Colors */
    --primary-background: var(--primaryColor);
    /*
    --primary-text: contrast(var(--primaryColor));
    --primary-color: contrast(var(--primaryColor));
    */
    --primary-border: var(--secondaryColor);
    /*
    --primary-hover-background: saturate(var(--primaryColor), 10%);
    --primary-hover-color: contrast(saturate(var(--primaryColor), 10%));
    --primary-focus: desaturate(var(--primaryColor), 10%);
    --primary-disable: lightness(desaturate(var(--primaryColor), 100%), 30%);
    */
    --primary-drop: var(--accentColor);
    /*
    --primary-drag: lightness(desaturate(var(--accentColor), 100%), 30%);
    */
    --primary-link: var(--secondaryColor);
    /*
    --primary-link-hover:darken(var(--secondaryColor),20%);
    --primary-placeholder: lighten(contrast(var(--primaryColor)),20%);
    */

    --secondary-base: var(--secondaryColor);
    --secondary-background: var(--secondaryColor);
    /*
    --secondary-background-hover: saturate(var(--secondaryColor), 10%);
    --secondary-text: contrast(var(--secondaryColor));
    --secondary-color: contrast(var(--secondaryColor));
    --secondary-border: contrast(var(--secondaryColor));
    --secondary-hover-background: saturate(var(--secondaryColor), 10%); //remove
    --secondary-hover-color: contrast(saturate(var(--secondaryColor), 10%));
    --secondary-focus: desaturate(var(--secondaryColor), 10%);
    --secondary-disable: lightness(desaturate(var(--secondaryColor), 100%), 30%);
    */
    --secondary-drop: var(--accentColor);
    /*
    --secondary-drag: lightness(desaturate(var(--accentColor), 100%), 30%);
    */
    --secondary-link: var(--accentColor);
    /*
    --secondary-link-hover:darken(var(--accentColor),20%);
    */
    --accent-background: var(--accentColor);
    /*
    --accent-color: contrast(var(--accentColor));
    --accent-text: contrast(var(--accentColor));
    --accent-background-hover: saturate(var(--accentColor), 10%);
    --accent-hover-color: contrast(saturate(var(--accentColor), 10%));
    --accent-focus: desaturate(var(--accentColor), 10%);
    --accent-disable: lightness(desaturate(var(--accentColor), 100%), 30%);
    */
    --accent-link: var(--primaryColor);
    /*
    --accent-link-hover: contrast(var(--primaryColor));
    */
    --accent-drop: var(--primaryColor);
    /*
    --accent-drag: lightness(desaturate(var(--primaryColor), 100%), 30%);
    */
    --accent-border: var(--primaryColor);
}
/*
.dragEnter() {
    .onDragenter & {
        // background: fade(var(--secondary)[base],10%);
        // border: solid 1px var(--secondary)[base];
        background:fade(black,5%);
        border: solid 1px black;
        padding: 10px;
    }
}

.drop() {
    &.drop-target  {
        background:fade(blue,20%);
    }
}




.portrait(@rules) {
    @media only screen and (orientation: portrait) {
        @rules();
    }
}

.landscape(@rules) {
    @media only screen and (orientation: landscape) {
        @rules();
    }
}

.responsive(@minWidth;
@maxWidth;
@rules) {
    @media only screen and (min-width: var(--minWidth)) and (max-width: var(--maxWidth)) {
        @rules();
    }
}

.responsive-portrait(@minWidth;
@maxWidth;
@rules) {
    @media only screen and (min-width: @minWidth) and (max-width: @maxWidth) and (orientation: portrait) {
        @rules();
    }
}

.responsive-landscape(@minWidth;
@maxWidth;
@rules) {
    @media only screen and (min-width: @minWidth) and (max-width: @maxWidth) and (orientation: landscape) {
        @rules();
    }
}

.responsive-max( @maxWidth;
@rules) {
    @media only screen and (max-width: @maxWidth) {
        @rules();
    }
}

.responsive-max-portrait( @maxWidth;
@rules) {
    @media only screen and (max-width: @maxWidth) and (orientation: portrait) {
        @rules();
    }
}

.responsive-max-landscape( @maxWidth;
@rules) {
    @media only screen and (max-width: @maxWidth) and (orientation: landscape) {
        @rules();
    }
}

.responsive-min(@minWidth;
@rules) {
    @media only screen and (min-width: @minWidth) {
        @rules();
    }
}

.responsive-min-portrait(@minWidth;
@rules) {
    @media only screen and (min-width: @minWidth) and (orientation: portrait) {
        @rules();
    }
}

.responsive-min-landscape(@minWidth;
@rules) {
    @media only screen and (min-width: @minWidth) and (orientation: landscape) {
        @rules();
    }
}

.xxs(@rules) { .responsive-max(@xxs-max, @rules) }
.xxs-landscape(@rules) { .responsive-max-landscape(@xxs-max, @rules) }
.xxs-portrait(@rules) { .responsive-max-portrait(@xxs-max, @rules) }
.xxs-min(@rules) { .responsive-min(@xxs-min, @rules) }
.xxs-min-landscape(@rules) { .responsive-min-landscape(@xxs-min, @rules) }
.xxs-min-portrait(@rules) { .responsive-min-portrait(@xxs-min, @rules) }
.xxs-max(@rules) { .responsive-max(@xxs-max, @rules) }
.xxs-max-landscape(@rules) { .responsive-max-landscape(@xxs-max, @rules) }
.xxs-max-portrait(@rules) { .responsive-max-portrait(@xxs-max, @rules) }


.xs(@rules) { .responsive(@xs-min, @xs-max, @rules) }
.xs-landscape(@rules) { .responsive-landscape(@xs-min, @xs-max, @rules)}
.xs-portrait(@rules) { .responsive-portrait(@xs-min, @xs-max, @rules) }
.xs-min(@rules) { .responsive-min(@xs-min, @rules) }
.xs-min-landscape(@rules) { .responsive-min-landscape(@xs-min, @rules) }
.xs-min-portrait(@rules) { .responsive-min-portrait(@xs-min, @rules) }
.xs-max(@rules) { .responsive-max( @xs-max, @rules) }
.xs-max-landscape(@rules) { .responsive-max-landscape( @xs-max, @rules) }
.xs-max-portrait(@rules) { .responsive-max-portrait( @xs-max, @rules) }


.sm(@rules) { .responsive(@sm-min, @sm-max, @rules) }
.sm-landscape(@rules) { .responsive-landscape(@sm-min, @sm-max, @rules) }
.sm-portrait(@rules) { .responsive-portrait(@sm-min, @sm-max, @rules) }
.sm-min(@rules) { .responsive-min(@sm-min, @rules) }
.sm-min-landscape(@rules) { .responsive-min-landscape(@sm-min, @rules) }
.sm-min-portrait(@rules) { .responsive-min-portrait(@sm-min, @rules) }
.sm-max(@rules) { .responsive-max( @sm-max, @rules) }
.sm-max-landscape(@rules) { .responsive-max-landscape( @sm-max, @rules) }
.sm-max-portrait(@rules) { .responsive-max-portrait( @sm-max, @rules) }


.md(@rules) { .responsive(@md-min, @md-max, @rules) }
.md-landscape(@rules) { .responsive-landscape(@md-min, @md-max, @rules) }
.md-portrait(@rules) { .responsive-portrait(@md-min, @md-max, @rules) }
.md-min(@rules) { .responsive-min(@md-min, @rules) }
.md-min-landscape(@rules) { .responsive-min-landscape(@md-min, @rules) }
.md-min-portrait(@rules) { .responsive-min-portrait(@md-min, @rules) }
.md-max(@rules) { .responsive-max( @md-max, @rules) }
.md-max-landscape(@rules) { .responsive-max-landscape( @md-max, @rules) }
.md-max-portrait(@rules) { .responsive-max-portrait( @md-max, @rules) }


.lg(@rules) { .responsive(@lg-min, @lg-max, @rules) }
.lg-landscape(@rules) { .responsive-landscape(@lg-min, @lg-max, @rules) }
.lg-portrait(@rules) { .responsive-portrait(@lg-min, @lg-max, @rules) }
.lg-min(@rules) { .responsive-min(@lg-min, @rules) }
.lg-min-landscape(@rules) { .responsive-min-landscape(@lg-min, @rules) }
.lg-min-portrait(@rules) { .responsive-min-portrait(@lg-min, @rules) }
.lg-max(@rules) { .responsive-max( @lg-max, @rules) }
.lg-max-landscape(@rules) { .responsive-max-landscape( @lg-max, @rules) }
.lg-max-portrait(@rules) { .responsive-max-portrait( @lg-max, @rules) }


.xl(@rules) { .responsive(@xl-min, @xl-max, @rules) }
.xl-landscape(@rules) { .responsive-landscape(@xl-min, @xl-max, @rules) }
.xl-portrait(@rules) { .responsive-portrait(@xl-min, @xl-max, @rules) }
.xl-min(@rules) { .responsive-min(@xl-min, @rules) }
.xl-min-landscape(@rules) { .responsive-min-landscape(@xl-min, @rules) }
.xl-min-portrait(@rules) { .responsive-min-portrait(@xl-min, @rules) }
.xl-max(@rules) { .responsive-max( @xl-max, @rules) }
.xl-max-landscape(@rules) { .responsive-max-landscape( @xl-max, @rules) }
.xl-max-portrait(@rules) { .responsive-max-portrait( @xl-max, @rules) }


.xxl(@rules) { .responsive-min(@xxl-min, @rules) }
.xxl-landscape(@rules) { .responsive-min-landscape(@xxl-min, @rules) }
.xxl-portrait(@rules) { .responsive-min-portrait(@xxl-min, @rules) }
.xxl-min(@rules) { .responsive-min(@xxl-min, @rules) }
.xxl-min-landscape(@rules) { .responsive-min-landscape(@xxl-min, @rules) }
.xxl-min-portrait(@rules) { .responsive-min-portrait(@xxl-min, @rules) }
*/