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

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

//
// Page
//

@theme-page-border-mode:                        ;
@theme-page-border-width:                       0;
@theme-page-border-width-l:                     @theme-page-border-width;
@theme-page-border:                             transparent;

@internal-theme-page-border-gradient:           ;

//
// Page Container
//

@theme-page-container-width:                    1200px;
@theme-page-container-padding-vertical:         @global-large-margin;
@theme-page-container-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
 * 1. `overflow-x` has to be on the `body` element for Safari to prevent horizontal scrolling on touch
      This causes a random bug showing a vertical scrollbar in combination with some fonts like `Poppins`
      This is why `overflow-y` must also be set to `hidden`
 */

html { overflow-y: scroll; }

/* 1 */
body { overflow: hidden; }


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

/*
 * Page
 * Position context needed for `tm-header-transparent`
 */

.tm-page { position: relative; }

/*
 * Border
 * 1. Need to remove default `border-width` of 4px if `border-image` is used in Safari and Edge
 *    Only needed if border mode is not full, e.g. `left`
 * 2. Important: Grandient won't work if the border-color is `transparent` in Safari
 */

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    /* 1 */
    .tm-page when not (@theme-page-border-width = 0) and not (@internal-theme-page-border-gradient = ~'') and not (@theme-page-border-mode = ~'') {
        border-width: 0;
    }

    /* 2 */
    .tm-page when not (@theme-page-border-width = 0) {
        border@{theme-page-border-mode}: @theme-page-border-width solid @theme-page-border;
    }

    .tm-page when not (@theme-page-border-width = 0) and not (@internal-theme-page-border-gradient = ~'') {
        border-image: @internal-theme-page-border-gradient 1;
    }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .tm-page when not (@theme-page-border-width = 0) {
        border@{theme-page-border-mode}-width: @theme-page-border-width-l;
    }

}

/*
 * Page Container
 */

@media (min-width: @theme-page-container-width) {

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

    .tm-page-container .tm-page {
        max-width: @theme-page-container-width;
        background: @base-body-background;
    }

    .tm-page-container-padding {
        padding-top: @theme-page-container-padding-vertical;
        padding-bottom: @theme-page-container-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; }

/*
 * Transparent Header
 * 1. Position above following section
 * 2. Create stacking context because following section might create one
 * 3. Take the full width. Doesn't use width because `html` element may have a `border` or `padding`
 */

.tm-header-transparent {
    /* 1 */
    position: absolute;
    /* 2 */
    z-index: @sticky-z-index;
    /* 3 */
    left: 0;
    right: 0;
}

.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;
}


/* Section
========================================================================== */

@section-title-color:                           @global-muted-color;
@section-title-font-size:                       @global-small-font-size;
@section-title-line-height:                     @global-line-height;
@section-title-font-family:                     @global-secondary-font-family;
@section-title-font-weight:                     @global-secondary-font-weight;
@section-title-text-transform:                  @global-secondary-text-transform;
@section-title-letter-spacing:                  @global-secondary-letter-spacing;
@section-title-font-style:                      @global-secondary-font-style;

.tm-section-title {
    color: @section-title-color;
    font-size: @section-title-font-size;
    line-height: @section-title-line-height;
    // `writing-mode` has to be on the parent element to fix the width in Safari
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    .hook-section-title;
}

.tm-section-title > * {
    // `writing-mode` has to be on the element which is rotated in IE 11
    -ms-writing-mode: tb-lr;
    // Fix height in Edge and IE 11
    display: inline-block;
}

// `writing-mode` has to be on the element which is rotated in Edge
@supports (-ms-ime-align: auto) {

    .tm-section-title { writing-mode: inherit; }
    .tm-section-title > * { writing-mode: vertical-lr; }

}

.hook-section-title() when not (@section-title-font-family = inherit) {
    font-family: @section-title-font-family;
}

.hook-section-title() when not (@section-title-font-weight = inherit) {
    font-weight: @section-title-font-weight;
}

.hook-section-title() when not (@section-title-text-transform = inherit) {
    text-transform: @section-title-text-transform;
}

.hook-section-title() when not (@section-title-letter-spacing = inherit) {
    letter-spacing: @section-title-letter-spacing;
}

.hook-section-title() when not (@section-title-font-style = inherit) {
    font-style: @section-title-font-style;
}

@internal-section-title-mode:                   ; // dash
@internal-section-title-dash-border-height:     15px;
@internal-section-title-dash-border-width:      @global-border-width;
@internal-section-title-dash-border-margin:     15px;

/*
 * Dash
 */
@internal-section-title-mode:                   dash;
.hook-section-title() when (@internal-section-title-mode = dash) {

    > ::before {
        content: "";
        position: absolute;
        top: -(@internal-section-title-dash-border-height + @internal-section-title-dash-border-margin);
        left: ~'calc(50% - (@{internal-section-title-dash-border-width} / 2))';
        height: @internal-section-title-dash-border-height;
        width: @internal-section-title-dash-border-width;
        background-color: currentColor;
    }

}

//
// Inverse
//

@inverse-section-title-color:                     @inverse-global-color;

.hook-inverse() {

    .tm-section-title { color: @inverse-section-title-color; }

}


/* Utility
========================================================================== */

.tm-rotate-180 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}