/*
    DOT-ELEMENT #dotheader
    Author: Štefan Miščík
    Website: https://dotsystems.sk/
    Email: info@dotsystems.sk

    Version: 1.0 stable
    
    You can edit as needed, but must preserve the author's header in CSS.
*/

/*
    VARIABLES - Edit the variables as needed.

    By editing these variables, you can create an amazing looking buttons.
    All other aspects, such as element widths, padding, etc., will be computed based on your values.

*/

dot-element[eid="dotheader"] {
    --header-width: 100%;
    --header-mobile-width: var(--header-width);
    /*--header-height: 100vh;*/
    --header-min-height: 600px;
    --header-max-height: none;
    --header-mobile-height: var(--header-height);
    --header-mobile-min-height: var(--header-min-height);
    --header-mobile-max-height: unset;
    --background-image: none;
    --background-image-mobile: var(--background-image);

    --desktop: 1;
    --touch-screen: 0;
}

dot-element[eid="dotheader"] * {
    box-sizing: border-box;
}

@media (hover: none) and (pointer: coarse) {
    /* Detection of touch screens */
    dot-element[eid="dotheader"] {
        --touch-screen: 1;
    }
}

@media (max-width: 991.98px) {
    dot-element[eid="dotheader"] {
        --desktop: 0;
    }
}

/*
    MOBILE VERSION
*/

@media (max-width: 991.98px) {

    dot-element[eid="dotheader"] {
        margin: auto;
        display: block;
        width: var(--header-mobile-width,95%);
        min-height: var(--header-mobile-min-height,none);
        max-height: var(--header-mobile-max-height,none);
        height: var(--header-mobile-height,none);
        background-image: var(--background-image-mobile, none);
        background-position: 75% 10vh;
        background-repeat: no-repeat;
    }

}

@media (orientation: portrait) {

    dot-element[eid="dotheader"] {
        max-height: unset;
    }

}

/* DESKTOP VERSION */

@media (min-width: 992px) {

    dot-element[eid="dotheader"] {
        margin: auto;
        display: block;
        width: var(--header-width,95%);
        min-height: var(--header-min-height,none);
        max-height: var(--header-max-height,none);
        height: var(--header-height,none);
        background-image: var(--background-image, none);
        background-position: 85% 0%;
        background-repeat: no-repeat;
    }

}
}