/* ========================================================================
   Theme
 ========================================================================== */

// Variables
// ========================================================================

//
// Boxed Page
//

@theme-page-boxed-width:                        1200px;
@theme-page-boxed-padding-vertical:             @global-large-margin;
@theme-page-boxed-background:                   darken(@global-muted-background, 3%);

//
// Toolbar
//

@theme-toolbar-color-mode:                      light;
@theme-toolbar-padding-vertical:                10px;
@theme-toolbar-background:                      @global-secondary-background;
@theme-toolbar-font-size:                       @global-small-font-size;

//
// Header
//

@theme-headerbar-top-padding-top:               40px;
@theme-headerbar-top-padding-bottom:            40px;
@theme-headerbar-top-background:                @navbar-background;

@theme-headerbar-bottom-padding-top:            40px;
@theme-headerbar-bottom-padding-bottom:         40px;
@theme-headerbar-bottom-background:             @navbar-background;

@theme-headerbar-stacked-margin-top:            40px;

//
// Sidebar
//

@theme-sidebar-min-width:                       200px;


/* HTML
 ========================================================================== */

/*
 * Force vertical scrollbar
 */

html { overflow-y: scroll; }


/* Boxed Page
 ========================================================================== */

/* Desktop and bigger */
@media (min-width: @theme-page-boxed-width) {

    .tm-page { background: @theme-page-boxed-background 50% 50% / cover no-repeat fixed; }

    .tm-page > * {
        position: relative;
        max-width: @theme-page-boxed-width;
        background: @global-background;
    }

    .tm-page-padding {
        padding-top: @theme-page-boxed-padding-vertical;
        padding-bottom: @theme-page-boxed-padding-vertical;
    }

}


/* Toolbar
 ========================================================================== */

.tm-toolbar {
    padding-top: @theme-toolbar-padding-vertical;
    padding-bottom: @theme-toolbar-padding-vertical;
    background: @theme-toolbar-background;
    font-size: @theme-toolbar-font-size;
}

.tm-toolbar:extend(.uk-light all) when (@theme-toolbar-color-mode = light) {}
.tm-toolbar:extend(.uk-dark all) when (@theme-toolbar-color-mode = dark) {}


/* Header
 ========================================================================== */

/*
 * Header
 */

.tm-header {}

/*
 * Headerbars
 */

.tm-headerbar-top {
    padding-top: @theme-headerbar-top-padding-top;
    padding-bottom: @theme-headerbar-top-padding-bottom;
    background: @theme-headerbar-top-background;
}

.tm-headerbar-bottom {
    padding-top: @theme-headerbar-bottom-padding-top;
    padding-bottom: @theme-headerbar-bottom-padding-bottom;
    background: @theme-headerbar-bottom-background;
}

.tm-headerbar-stacked { margin-top: @theme-headerbar-stacked-margin-top; }

.tm-header-transparent .tm-headerbar-top,
.tm-header-transparent .tm-headerbar-bottom { background: transparent; }

/*
 * Header Mobile
 */

.tm-header-mobile {}


/* Sidebar
 ========================================================================== */

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .tm-sidebar { min-width: @theme-sidebar-min-width; }

}


/* Dropdown stack
 ========================================================================== */

/*
 * Reset width if column width is set
 */

.uk-dropdown-navbar.uk-dropdown-stack {
    min-width: 0 !important;
    max-width: none !important;
}


/* Blog
 ========================================================================== */

/*
 * Leading article
 * Needed for Joomla
 */

.tm-leading-article .uk-article:last-child { padding-bottom: @global-margin; }


/* Error
 ========================================================================== */

.tm-error-icon { font-size: 250px; }

.tm-error-headline { font-size: 100px; }


/* Offline
 ========================================================================== */

.tm-offline { width: 300px; }


/* Syntax Highlighter
 ========================================================================== */

/*
 * Remove the default background, so the `pre` background from UIkit shows up
 */

.hljs { background: transparent; }


/* Needed for WordPress
 ========================================================================== */

.alignleft:extend(.uk-align-left all) {}
.alignright:extend(.uk-align-right all) {}
.aligncenter:extend(.uk-align-center all) {}
