// out: false
@import "../shared/styles.less";
@import "styles/lib.less";

@header-bgcolor-opacity: 70%; // Override Header BG Color Opacity

html {
    font-family: @font-family;
}
body {
    overflow: hidden; 
    
    /* Display & Box Model */
    margin: 0;
    /* Visual */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    -ms-overflow-style: none;
}

hr {
    border: none;
    height: 2px;
    /* Set the hr color */
    color: @main-color; /* old IE */
    background-color: @main-color; /* Modern Browsers */
}
html, body {
    background-color: transparent;
}
ul.gcf-item-container-block {
    /* Only applied to the Container Block List */
    /* Display & Box Model */
    margin: 0;
    padding: 0 20px;
    /* Visual */
    list-style-type: none;
}

.hidden:not(.gcf-item-block) {
    display: none !important;
}

#gcf-custom-template {
    width: 100%;
    height: 100%;
    background: transparent !important;
    overflow: hidden;
    border: none;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
    .lang-mixin;
    .color-mixin;

    &:not(.ticker) {
        // Common styles for all types, expect "ticker"
        .gcf-item-container-block {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: solid 80px transparent;
            height: 100%;
            overflow-y: auto;
        }

        .gcf-item-description {
            white-space: normal; /* Wrap the content inside normally */

            ul {
                list-style-type: disc; /* Display list as a normal list */
            }
        }
    }

    &:not(.tasks):not(.ticker) {
        // Common styles for all types, expect "tasks" and "ticker"
        .gcf-item-container-block {
            padding: 0 20px;
            border-bottom: 1px solid @main-color;
            overflow-y: hidden !important;
        }
    }

    .gcf-header-block {
    /* Common styles for the Header Block */
        background: @header-bgcolor;
        padding: @header-padding;

        border-radius: 0 !important;

        font-size: @font-size;

        .fa, .gcf-title {
  /* Common styles for the Font Awesome icon and the title text within the 
   * Header Block
   */
            display: inline;
            font-weight: 600;
            color: @header-fgcolor;
        }

        .fa-stack {
  /* Common styles for the Font Awesome icon stack within the Header Block */
            font-size: 0.5em; // Reduse the font size by half
            //height: @font-size * (1 + (1 / 6));
        }

        .scroll_btns {
            /* Common styles for the Scroll Buttons within the Header Block */
            position: absolute;
            right: @font-size; // Positioned absolute at the right side

            a {
                //text-decoration: none;
                width: 1ch; // The button link is exactly "1" character wide
                display: inline-block; // Display inline, but take up space
                &:hover {

                }
            }
        }

        .custom-icon {
            /* Common styles for the Custom Icon within the Header Block */
            height: @font-size; // Set the height to the same as the font size
            //vertical-align: middle;
            position: relative;
            top: @font-size / 6; // vertical middle align
        }
    }

    .gcf-item-block {
        /* Common styles for the Item Block */
        padding-top: 0;
        margin-top: 0;
        margin-bottom: 8px;
        border-bottom: none;

        &.hidden {
            /* Hidden Item Block styles */
            padding: 0;
            margin: 0;
            border: none;
            height: 0;
        }

        &.disabled {
            /* Disabled Item Block styles. "task" type Item Block done styles */
            opacity: 0.50;
        }
    }

    .gcf-item-daterange {
        /* Item Block Start + End dates text (daterange) styles */
        white-space: normal;
        font-family: @font-family;
        color: @main-color;
        font-size: @font-size;
        font-weight: 300;
        font-style: normal;
        text-decoration: none;
        background-color: transparent;
    }

    .gcf-item-title {
        /* Item Block Title text styles */
        font-family: @font-family;
        color: @accent-color;
        font-size: @font-size;
        font-weight: bold;
        font-style: normal;
        text-decoration: none;
        background-color: transparent;
        white-space: normal;
        line-height: normal;
    }

    .gcf-item-location {
        /* Item Block Location text styles */
        font-family: @font-family;
        color: @main-color;
        font-size: @font-size;
        font-weight: 400;
        font-style: normal;
        white-space: normal;
        text-decoration: none;
        background-color: transparent;
    }

    .gcf-item-description {
        /* Item Block Description text styles */
        font-family: @font-family;
        color: @main-color;
        font-size: @font-size;
        font-weight: normal;
        font-style: normal;
        text-decoration: none;
        background-color: transparent;
        margin: 15px 0 0 0;

        table {
            /* Item Block Description table element styøes */
            font-size: @font-size * 0.75;

            td[nowrap] {
                padding-left: @font-size / 3;
            }

            // NAAF Pollenvarsling (Pollen alert) intensity color codes:
            td[bgcolor="#EBF187"] {
                /* modest pollen dispersal */
                .bg-color-mixin(#EBF187, @accent-color);
            }

            td[bgcolor="#F8A722"] {
                /* moderate pollen dispersal */
                .bg-color-mixin(#F8A722, @accent-color);
            }
            
            td[bgcolor="#E9473C"] {
                /* heavy pollen dispersal */
                .bg-color-mixin(#E9473C, @accent-color);
            }
            
            td[bgcolor="#7C2B0A"] {
                /* extreme pollen dispersal */
                .bg-color-mixin(#7C2B0A, @accent-color);
            }
            // /NAAF Pollenvarsling (Pollen alert) intensity color codes
        }
    }

    &.tasks, &.ticker {
        // Common styles for the "tasks" and "ticker" types
        .tasks-ticker-mixin;
    }

    &.tasks {
        // Common styles for the "tasks" type
        .tasks-mixin;
    }

    &.grouped-alt {
        // Common styles for the "grouped-alt" type
        .gcf-item-container-block {
            //overflow: hidden; // Hide the overflow of the Container Block
        }
        .gcf-item-block {
            &.week-header {
                overflow: visible !important;
                hr {
                    margin: (@font-size / 2) 0;
                    //height: (@font-size / 8);
                    position: relative;
                    //margin-left: -20px;
                    //padding-right: 40px;
                    width: 100%;
                }
                .gcf-item-daterange {
                    display: block;
                    border-bottom: (@font-size / 8) solid @accent-color;
                }
            }
        }
    }

    &.ticker {
        // Common styles for the "ticker" and the "ticker-marquee" types
        .ticker-mixin;

        &.marquee {
            // Common styles for the "ticker-marquee" type */
            .ticker-marquee-mixin;
        }
    }

    &.table {
        .gcf-item-container-block {
            display: table;
        }
        .gcf-item-block {
            display: table-row;
        }
        .gcf-item-daterange {
            display: table-cell;
        }
        .gcf-item-title {
            display: table-cell;
        }
        .gcf-item-location {
            display: table-cell;
        }
    }
}

.hide-scrollbars {
    // Styles to hide the scroll bars
    .gcf-item-container-block {
        /* Hide the vertical scroll bars */
        overflow-y: hidden !important;
    }
}

@scrollbar_size: @font-size / 3; // Custom scroll bar size

/* Custom styles for the scroll bars when using WebKit based browsers */

::-webkit-scrollbar {
    /* Set the size of the scroll bar */
    width: @scrollbar_size;
}

::-webkit-scrollbar-track {
    /* Set the main background color of the scroll bar to transparent */
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    /* Set the background color of the thumb (buttons) */
    background-color: @header-bgcolor;
}
