/* All the variables that must change depending on the viewport or that are globally useful should be defined in here */

/* default = medium screen size */
:root {
    --font-size-default: 12px;
    --font-size-statistic: 14px;
    --font-size-heading: 24px;

    --milieu-grid-padding: 6px;

    --milieu-detail-card-percentage-width: 50px;
}

/* big */
@media only screen and (min-width: 2300px) {
    :root {
        --font-size-default: 16px;
        --font-size-statistic: 24px;
        --font-size-heading: 32px;

        --milieu-grid-padding: 8px;

        --milieu-detail-card-percentage-width: 67px;
    }
}

/* small */
@media only screen and (max-width: 1600px) {
    :root {
        --font-size-default: 8px;
        --font-size-statistic: 10px;
        --font-size-heading: 12px;

        --milieu-grid-padding: 4px;

        --milieu-detail-card-percentage-width: 34px;
    }
}

/* Sizes for Milieu Grid in Chat BOX */
.milieu-grid-chatbox {
    --font-size-default: 9px;
    --font-size-statistic: 9px;
    --font-size-heading: 11px;

    --milieu-grid-padding: 3px;

    --milieu-detail-card-percentage-width: 30px;
}

/* Bei großen Screens innerhalb milieu-grid-chatbox */
@media only screen and (min-width: 2300px) {
    .milieu-grid-chatbox {
        --font-size-default: 9px;
        --font-size-statistic: 9px;
        --font-size-heading: 11px;

        --milieu-grid-padding: 3px;

        --milieu-detail-card-percentage-width: 30px;
    }
}

/* Bei kleinen Screens innerhalb milieu-grid-chatbox */
@media only screen and (max-width: 1200px) {
    .milieu-grid-chatbox {
        --font-size-default: 6px;
        --font-size-statistic: 9px;
        --font-size-heading: 11px;

        --milieu-grid-padding: 3px;

        --milieu-detail-card-percentage-width: 30px;
    }
}


/* Sizes for Milieu Grid Mini in Chat BOX */
.milieu-grid--mini {
    --font-size-default: 9px;
    --font-size-statistic: 9px;
    --font-size-heading: 11px;
    
    --milieu-grid-padding: 2px;

    --milieu-detail-card-percentage-width: 30px;
}

/* Bei großen Screens innerhalb milieu-grid- Mini*/
@media only screen and (min-width: 2300px) {
    .milieu-grid--mini {
        --font-size-default: 9px;
        --font-size-statistic: 9px;
        --font-size-heading: 11px;

        --milieu-grid-padding: 2px;

        --milieu-detail-card-percentage-width: 30px;
    }
}

/* Bei kleinen Screens innerhalb milieu-grid- Mini */
@media only screen and (max-width: 1200px) {
    .milieu-grid--mini {
        --font-size-default: 6px;
        --font-size-statistic: 9px;
        --font-size-heading: 11px;

        --milieu-grid-padding: 2px;

        --milieu-detail-card-percentage-width: 30px;
    }
}