/* ========================================================================
   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-top-border-width:              0;
@theme-headerbar-top-border:                    transparent;

@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-top when not (@theme-headerbar-top-border-width = 0) { border-bottom: @theme-headerbar-top-border-width solid @theme-headerbar-top-border; }

.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; }
.tm-header-transparent .tm-headerbar-top  { border-bottom-color: 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; }


/* Child Utilities
 ========================================================================== */

//
// List
//

.tm-child-list > ul:extend(.uk-list all) {}
.tm-child-list-divider > ul:extend(.uk-list-divider all) {}

/*
 * Manually repeat list divider selector because
 * `:extend` won't extend a selector which is created by another `:extend`
 * Guards are only allowed on single selectors
 */

.uk-card-primary.uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-primary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}

.uk-card-primary .uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-primary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}

.uk-card-secondary.uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-secondary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}

.uk-card-secondary .uk-card-body .uk-list-divider > li:nth-child(n+2) when (@card-secondary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}

.uk-section-primary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2) when (@section-primary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}

.uk-section-secondary:not(.uk-preserve-color) .uk-list-divider > li:nth-child(n+2) when (@section-secondary-color-mode = @inverse-global-color-mode) {
    border-top-color: @inverse-list-divider-border;
    .hook-inverse-list-divider;
}


/* WordPress
 ========================================================================== */

//
// Editor
//

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


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

/*
 * Reset highlight.js
 */

.hljs {
    padding: 0;
    background: transparent;
    overflow: visible;
}