@import "uikit/uikit.less";

@icon-font-path: "../../../../app/assets/uikit/fonts";
@global-image-path: '../less/uikit/images';

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

[v-cloak] { display: none; }

/*
 * Force vertical scrollbar
 */

html { overflow-y: scroll; }


/* Navbar
 ========================================================================== */

.tm-navbar {
    position: relative;
    background: @navbar-background;
    box-shadow: 0px 3px 8px -4px rgba(0,0,0,0.15);
    z-index: 1;
}

/* Navbar as overlay */
.tm-navbar-overlay:not(.uk-active) {
    position: absolute;
    z-index: 1;
    width: 100%;
}

/* Transparent background */
.tm-navbar-transparent {
    border-bottom-color: transparent;
    background: transparent;
    box-shadow: none;
}

.tm-navbar-transparent .uk-navbar { background: none; }

/*
 * Contrast color
 */

.tm-logo-contrast { display: none; }

.tm-navbar-contrast {

    .uk-navbar { color: @contrast-color; }

    // Nav
    .uk-navbar-nav > li > a { color: fade(@contrast-color, 70%); }

    .uk-navbar-nav > li:hover > a,
    .uk-navbar-nav > li > a:focus,
    .uk-navbar-nav > li.uk-open > a { color: @contrast-color; }

    .uk-navbar-nav > li > a:active { color: @contrast-color; }

    .uk-navbar-nav > li.uk-active > a { color: @contrast-color; }

    // Link
    .uk-navbar-content > a:not([class]) { color: fade(@contrast-color, 70%); }
    .uk-navbar-content > a:not([class]):hover { color: @contrast-color; }

    // Brand
    .uk-navbar-brand { color: fade(@contrast-color, 70%); }

    .uk-navbar-brand:hover,
    .uk-navbar-brand:focus { color: @contrast-color; }

    // Toggle
    .uk-navbar-toggle { color: fade(@contrast-color, 70%); }

    .uk-navbar-toggle:hover,
    .uk-navbar-toggle:focus { color: @contrast-color; }

    .uk-navbar-toggle:after { background: url("../less/uikit/images/navbar-toggle-contrast.svg") 0 0 no-repeat; }

    // Logo
    .tm-logo { display: none; }
    .tm-logo-contrast { display: inline-block; }

}


/* Blocks
 ========================================================================== */

.tm-hero-height { min-height: ~"calc(100vh - 81px)"; }

.tm-hero-padding > * { padding-top: 81px; }

/*
 * Footer
 */

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

    .tm-footer {
        padding-top: 60px;
        padding-bottom: 60px;
    }

}


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

.tm-container-small {
    max-width: 800px;
    margin: auto;
}