.theme-mixin(@header-bgcolor, @header-fgcolor, @text-shadow-color) {
    .clock {
        color: @header-fgcolor;

        #date {
            text-shadow: 0 0 5px @text-shadow-color;
        }

        ul {
            li {
                text-shadow: 0 0 5px @text-shadow-color;

                &.point {
                    text-shadow: 0 0 20px @text-shadow-color;
                }
            }
        }
    }
}

.color-mixin() {
    // Provide different color themes
    
    &.theme-green {
        .theme-mixin(@header-bgcolor-green, @header-fgcolor, @accent-color-green);
    }

    &.theme-red {
        .theme-mixin(@header-bgcolor-red, @header-fgcolor, @accent-color-red);
    }

    &.theme-variant-b {
        .theme-mixin(fade(@header-bgcolor-variant-b, 70%), @header-fgcolor-variant-b, transparent);

        .clock {
            margin: auto 0 !important;
            ul, #date {
                text-align: left;
            }
        }
    }

    &.theme-variant-c {
        .theme-mixin(fade(@header-bgcolor-variant-c, 70%), @header-fgcolor-variant-c, transparent);

        .clock {
            margin: auto 0 !important;
            ul, #date {
                text-align: left;
            }
        }
    }
}
