@import "../../shared/lib.less";

.theme-mixin(@header-bgcolor, @accent-color) {
    // Common styles for the green theme variant
    .gcf-header-block {
        // Set the Header Block background to a green color
        background: @header-bgcolor !important;
    }

    .gcf-item-title {
        // Set the Item Title text color to a green color
        color: @accent-color !important;
    }

    &.grouped-alt {
        .gcf-item-block {
            &.week-header {
                .gcf-item-daterange {
                    display: block;
                    border-bottom-color: @accent-color !important;
                }
            }
        }
    }

    ::-webkit-scrollbar-thumb {
        // Set the WebKit scrollbar thumb (button) to a green color
        background-color: @header-bgcolor !important;
    }
}

.color-mixin() {
    // Provide different color themes
    
    &.theme-green {
        .theme-mixin(@header-bgcolor-green, @accent-color-green);
        // Common styles for the green theme variant
        .gcf-header-block {
            // Set the Header Block background to a green color
            background: @header-bgcolor-green;
        }

        .gcf-item-title {
            // Set the Item Title text color to a green color
            color: @accent-color-green;
        }

        ::-webkit-scrollbar-thumb {
            // Set the WebKit scrollbar thumb (button) to a green color
            background-color: @header-bgcolor-green;
        }
    }

    &.theme-red {
        // Common styles for the red theme variant
        .gcf-header-block {
            // Set the Header Block background to a red color
            background: @header-bgcolor-red;
        }

        .gcf-item-title {
            // Set the Item Title text color to a red color
            color: @accent-color-red;
        }

        ::-webkit-scrollbar-thumb {
            // Set the WebKit scrollbar thumb (button) to a red color
            background-color: @header-bgcolor-red;
        }
    }

    &.theme-variant-b {
        .theme-mixin(#F5E2E6, #000);

        .gcf-header-block {
            .gcf-title, .fa {
                color: rgb(93, 93, 93) !important;
            }
        }

        .gcf-item-daterange {
            color: #000 !important;
        }

        .gcf-item-title {
            font-weight: bold;
        }
    }

    &.theme-variant-c {
        .theme-mixin(@header-bgcolor-variant-c, @accent-color-variant-c);

        .gcf-header-block {
            .gcf-title, .fa {
                color: @accent-color-variant-c !important;
            }
        }

        .gcf-item-daterange {
            color: @accent-color-variant-c !important;
        }

        .gcf-item-location {
            color: @accent-color-variant-c !important;
        }

        .gcf-item-description {
            color: @accent-color-variant-c !important;
        }

        hr {
            color: @accent-color-variant-c !important;
            background-color: @accent-color-variant-c !important;
        }

        .gcf-item-title {
            font-weight: bold;
        }
    }
}

.tasks-ticker-mixin() {
    // Common styles for the "tasks" and the "ticker" types
    .gcf-item-daterange:not(:empty):after {
        // If the Item Start and End dates text (daterange) has content, then
        // show a colon (": ") between this element and the next
        content: ": ";
    }

    .gcf-item-title:not(:empty):after {
        // If the Item Title text has content, then seperate it from the next
        // element with a space (" ")
        content: " ";
    }

    .gcf-item-location:not(:empty) {
        // If the Item Location text has content, then wrap it within
        // parentheses and separate it from the previous element with a space
        &:before {
            content: " (";
        }

        &:after {
            content: ")";
        }
    }
}

.tasks-mixin() {
    // Common styles for the "tasks" type
    .gcf-item-container-block {
        // Add a large border at the bottom of the Item Container Block
        .border-box-sizing-mixin();
        border-bottom: solid 75px transparent;
        height: 100%; // Set the height to fill the screen
        overflow-y: auto; // Let it show vertical scrollbars if necessary
    }

    .gcf-item-title > i.fa {
        // Keep the title text at the same distance regardless of the icon 
        // width
        display: inline-block;
        width: 2ch; // Set the width to a 2 character fixed size
    }
}

.ticker-mixin() {
    // Common styles for the "ticker" and "ticker-marquee" types
    //@_ticker_height: 74px;
    @_ticker_height: 100%; // Let the ticker fill the available height

    height: @_ticker_height;
    .border-box-sizing-mixin();

    .gcf-header-block {
        float: left;
        height: @_ticker_height;
        .border-box-sizing-mixin();

        padding-top: 0; // Keep the children centered vertically
        padding-bottom: 0; // Keep the children centered vertically
    }

    .gcf-title-block {
        // Align the Title Block vertically
        .vertical-align-mixin();
    }

    .gcf-title-block > span.icon {
        vertical-align: middle;
    }

    .gcf-item-container-block {
        //margin-bottom: 0.2em;
        overflow: hidden;
        height: @_ticker_height;
    }

    .gcf-item-block {
        height: @_ticker_height;

        margin-bottom: 0;
        padding: 0;
    }

    .gcf-item-header-block {
        height: @_ticker_height;
        line-height: @_ticker_height; // Keep the children centered vertically

        .vertical-align-mixin(); // Align the Item Header Block vertically

        white-space: nowrap; // Keep all elements on the same line
        text-overflow: ellipsis; // Show an ellipsis ("...") with text overflow
    }

    .gcf-item-daterange, .gcf-item-title, .gcf-item-location {
        // Shared styles for the Item Start and End Dates text (daterange), Item
        // Title text, and Item Location text
        white-space: nowrap; // Keep all text on the same line
    }

    .gcf-item-description {
        // Styles for the Item Description text
        //padding-left: 1em;
        color: @main-color; // Set the color to the Main Color
        //font-size: 78%;
        display: inline; // Display it on the same line as rest of the elements
        // Set the font size to 2/3th of the base font size
        font-size: @font-size / 1.5;
        height: @font-size * 0.75; // FIXME: Ignored with "display: inline"?
        // Set the line height to 75% of the base font size
        line-height: @font-size * 0.75;
        overflow: hidden; // Hide overflowed text
        text-overflow: ellipsis; // Show an ellipsis ("...") with text overflow

        &:before {
            //content: " -- ";
            color: @main-color;
        }
    }
}

.ticker-marquee-mixin() {
    // Common styles for the "ticker-marquee" type
    //background: mix(fade(#fff, 50%), fade(@header-bgcolor, 50%), @header-bgcolor-opacity) !important;
    //opacity: unit(@header-bgcolor-opacity) / 100.0;
    .gcf-header-block {
        padding-right: @font-size / 4;
        z-index: 999;
        position: fixed;
        // Fix Container Block shows beneath the Header Block when using CSS3
        // transition animation (via the jquery.transit plugin):
        // * Make the header-bgcolor none-transparent (opaque) and mix it with 
        //   #fff (white) with a ratio from the header-bgcolor-opacity
        // * This is is the same color as seen on screen with the Header 
        //   Background Color with an Opacity of the Header BG Color Opacity on
        //   a white background
        //background: mix(fade(@header-bgcolor, 100%), #fff, @header-bgcolor-opacity);

        &::after {
            filter: blur(10px);
            display: block;
            width: 100%;
            height: 100%;
        }
    }
    .gcf-item-block {
        // Display the Item Blocks all on the same line
        display: inline;
        white-space: nowrap; // Keep all elements on the same line 
        
        // &:not(:first-child) .gcf-item-daterange:before {
        //     content: "\2022";
        //     padding-right: @font-size * 2;
        //     display: inline-block;
        // }
    }
    .gcf-item-header-block {
        // Display the Item Header Block as inline and take up space
        display: inline-block;
        white-space: nowrap; // Keep all elements on the same line

        &:after {
            // Separate the Item Blocks with 5 non-breaking white-spaces
            font-size: @font-size;
            content: "\00a0\00a0\00a0\00a0\00a0";
            //content: "";
            //padding-left: @font-size * 2;
            //display: inline-block;
            .vertical-align-mixin(); // Align the them vertically
        }
    }

    .gcf-item-container-block {
        // Fix for not all elements was visible when using CSS3 transition
        // animation (via the jquery.transit plugin):
        overflow: visible !important; // Force the overflow to be visible
        width: auto;
        z-index: 1;
    }

    .gcf-item-daterange {
        color: @accent-color;
    }

    .gcf-item-title {
        font-weight: bold;
    }

    .gcf-item-description {
        //padding-left: 1em;
        color: @main-color;
        //font-size: 78%;
        display: inline;
        font-size: @font-size;
        height: @font-size; // FIXME: Ignored with "display: inline"?
        line-height: @font-size;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    &.theme-dark {
        .gcf-item-daterange {
            color: @accent-fgcolor1;
        }

        .gcf-item-title {
            color: @accent-fgcolor1;
        }

        .gcf-item-description {
            color: #fff;
        }
    }
}

.lang-mixin() {
    &, &[data-lang="en"] {
        .week:before {
            content: "Week ";
        }

        .gcf-title:empty:before {
            content: "Loading...";
        }
    }

    &[data-lang="nb"] {
        .week:before {
            content: "Uke ";
        }

        .gcf-title:empty:before {
            content: "Laster...";
        }
    }
}

.bg-color-mixin(@color, @base-color) {
    background-color: mix(@color, @base-color, 75%);
    //background-color: hsl(hue(@color), saturation(@base-color), lightness(@color));
}
