// UIkit Core
@import "../static/assets/uikit/src/less/uikit.theme.less";

// Highlight.js
@import "highlight.less";

// Algolia
@import "algolia.less";

// Fonts
@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova-Light-webfont.woff2') format('woff2'),
         url('../fonts/ProximaNova-Light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova-Reg-webfont.woff2') format('woff2'),
         url('../fonts/ProximaNova-Reg-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('../fonts/ProximaNova-Sbold-webfont.woff2') format('woff2'),
         url('../fonts/ProximaNova-Sbold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/montserrat-600.woff2') format('woff2'),
         url('../fonts/montserrat-600.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Mono';
    src: url('../fonts/roboto-mono-regular.woff2') format('woff2'),
         url('../fonts/roboto-mono-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


// UIkit
// ========================================================================

@global-font-family:                            ProximaNova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@global-font-size:                              15px;

@global-2xlarge-font-size:                      38px;
@global-xlarge-font-size:                       30px;
@global-large-font-size:                        24px;
@global-medium-font-size:                       20px;
@global-small-font-size:                        14px;

@global-emphasis-color:                         #222;

//
// Base
//

@base-code-font-family:                         'Roboto Mono', monospace;
@base-code-font-size:                           12px;

@base-heading-font-weight:                      300;

@base-pre-font-size:                            12px;
@base-pre-padding:                              25px;
@base-pre-background:                           @global-muted-background;
@base-pre-border-width:                         0;
@base-pre-border-radius:                        0;

.hook-base-body() {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

//
// Container
//

@container-max-width:                           1380px;
@container-small-max-width:                     700px;

//
// Navbar
//

@inverse-navbar-nav-item-color:                @inverse-global-color;
@inverse-navbar-nav-item-hover-color:          @inverse-global-emphasis-color;

//
// Nav
//

@nav-header-font-size:                          12px;

//
// Subnav
//

@inverse-subnav-item-color:                     @inverse-global-color;
@inverse-subnav-item-hover-color:               @inverse-global-emphasis-color;

//
// Tab
//

@tab-item-padding-horizontal:                   20px;
@tab-item-padding-vertical:                     9px;
@tab-item-border-width:                         2px;
@tab-item-font-size:                            12px;

.hook-tab-item() { line-height: 20px; }

//
// Table
//

@table-header-cell-font-size:                   12px;

//
// Label
//

@label-font-size:                               12px;

//
// Text
//

.hook-text-lead() { font-weight: 300; }
.hook-text-large() { font-weight: 300; }

//
// Utility
//

@inverse-logo-color:                           @inverse-global-emphasis-color;
@inverse-logo-hover-color:                     @inverse-global-emphasis-color;

//
// Off-canvas
//

@offcanvas-bar-background:                      #fff;
@offcanvas-bar-color-mode:                      dark;

//
// Inverse
//

@inverse-global-color:                          fade(@global-inverse-color, 80%);
@inverse-global-muted-color:                    fade(@global-inverse-color, 60%);



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

@sidebar-left-width:     240px;
@sidebar-left-width-xl:  300px;

@sidebar-right-width:    200px;
@sidebar-right-left:     0px;
@sidebar-right-left-xl:  60px;


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

/*
 * Force vertical scrollbar (has to be on `html`)
 */

html { overflow-y: scroll; }

/*
 * Clip content positioned outside (right or bottom) of the `body`
 * Has to be set on the `body` element. Otherwise touch gestures can still scroll horizontally.
 * 1. Use `clip` to forbid all scrolling, including programmatic scrolling.
 *    `hidden` fallback can be removed with Safari 15.5.
*/

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


/* Documentation Sidebars
 ========================================================================== */

/*
 * Sidebar Left
 */

.tm-sidebar-left {
    position: fixed;
    top: @navbar-nav-item-height;
    bottom: 0;
    box-sizing: border-box;
    width: @sidebar-left-width !important;
    padding: 40px 40px 60px 40px;
    border-right: 1px @global-border solid;
    overflow: auto;
}

/*
 * Sidebar Right
 */

.tm-sidebar-right {
    position: absolute;
    top: 0;
    left: ~'calc(100% + @{sidebar-right-left})';
    width: @sidebar-right-width;
}

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

    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width; }

}

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

    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left})'; }

    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width - (@sidebar-right-width + @sidebar-right-left); }

}

/* Large screen and bigger */
@media (min-width: 1400px) {

    .tm-sidebar-left {
        width: @sidebar-left-width-xl !important;
        padding: 45px 45px 60px 45px;
    }

    .tm-sidebar-right { left: ~'calc(100% + @{sidebar-right-left-xl})'; }

    .tm-sidebar-left + .tm-main { padding-left: @sidebar-left-width-xl - (@sidebar-right-width + @sidebar-right-left-xl); }

}


/* UIkit modifier
 ========================================================================== */

/*
 * Navbar
 */

.tm-navbar-container:not(.uk-navbar-transparent) {
    background: linear-gradient(to left, #28a5f5, @global-primary-background);
}

.tm-navbar-container .uk-navbar-nav > li > a,
.tm-navbar-container .uk-navbar-item:not(.uk-logo),
.tm-navbar-container .uk-navbar-toggle {
    height: 70px;
    font-size: 13px;
}

// Color Mode
.tm-navbar-container:not(.uk-navbar-transparent):extend(.uk-light all) {}

// Line Mode
@navbar-nav-item-line-margin-vertical:          20px;
@navbar-nav-item-line-margin-horizontal:        @navbar-nav-item-padding-horizontal;
@navbar-nav-item-line-height:                   1px;
@navbar-nav-item-line-background:               currentColor;
@navbar-nav-item-line-transition-duration:      0.3s;

.tm-navbar-container .uk-navbar-nav > li > a {
    position: relative;

    &::before {
        content: '';
        display: block;
        position: absolute;
        left: @navbar-nav-item-line-margin-horizontal;
        right: ~'calc(102% - @{navbar-nav-item-line-margin-horizontal})';
        bottom: @navbar-nav-item-line-margin-vertical;
        height: @navbar-nav-item-line-height;
        background-color: @navbar-nav-item-line-background;
        transition: @navbar-nav-item-line-transition-duration ease-in-out;
        transition-property: right;
    }
}

.tm-navbar-container .uk-navbar-nav > li > a:hover::before { right: @navbar-nav-item-line-margin-horizontal; }

/*
 * Nav
 */

.tm-nav > li.uk-active > a { position: relative; }

.tm-nav > li.uk-active > a:before {
    content: "";
    position: absolute;
    top: 15px;
    left: -25px;
    width: 15px;
    border-top: 1px solid @global-primary-background;
}

.tm-nav .uk-nav-header {
    padding: 8px 0;
    border-bottom: 1px solid @global-border;
}

/*
 * Subnav
 */

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

    .tm-subnav { margin-left: -50px; }
    .tm-subnav > * { padding-left: 50px; }

}

.tm-subnav > * > :first-child { text-transform: capitalize; }

/*
 * Label (Changelog()
 */

.tm-label-changelog {
    width: 90px;
    margin-top: 3px;
}

/*
 * Button
 */

.tm-button-default,
.tm-button-primary { border-radius: 500px; }

.tm-button-default {}

.tm-button-large { line-height: 48px; }

.tm-button-primary {}

.hook-inverse() {

    .tm-button-default {
        color: @inverse-global-color;
        border-color: @inverse-global-muted-color;
    }

    .tm-button-primary {
        background: #fff !important;
        color: @global-primary-background !important;
    }

    .tm-button-primary:hover { box-shadow: 0 10px 40px rgba(30,135,240,1); }

}

/*
 * Section
 */

.tm-section-primary {
    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
}

.tm-section-texture {
    background: url("../images/section-background.svg") 50% 17vh no-repeat,
                linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat;
}

.tm-section-intro {
    background: linear-gradient(to left top, #28a5f5, @global-primary-background) 0 0 no-repeat,
                #fff;
    background-size: 100% 75%;
}

/*
 * Heading
 */

.tm-h4,
.tm-h5,
.tm-h6 {
    font-family: Montserrat;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: @global-muted-color;
}

.tm-h4 { font-size: 14px; }
.tm-h5 { font-size: 12px; }
.tm-h6 { font-size: 11px; }

.hook-inverse() {

    .tm-h4,
    .tm-h5,
    .tm-h6 { color: rgba(255, 255, 255, 0.7); }

}

/*
 * Text
 */

.tm-text-large { font-size: 18px; }

/*
 * Box shadow
 */

.tm-box-shadow-medium {
    box-shadow: 2px 12px 35px rgba(0,0,0,0.1),
                0 1px 6px rgba(0,0,0,0.05);
}

.tm-box-shadow-large {
    box-shadow: -40px 40px 160px 0 rgba(0,0,0,0.08),
                -8px 8px 15px 0 rgba(120,120,120,0.04),
                3px 3px 30px 0 rgba(0,0,0,0.04);
}

.tm-box-shadow-modal { box-shadow: 3px 3px 40px 0 rgba(0,0,0,0.06); }

/*
 * Overlay
 */

.tm-overlay-default { background: fade(@global-background, 50%); }

/*
 * Modal
 */

.tm-modal-dialog { background: @global-muted-background; }

.tm-modal-header { padding: 20px 30px; }
.tm-modal-body { padding: 0; }

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

    .tm-modal-header { padding: 25px 50px; }
    .tm-modal-body { padding: 0 50px; }

}

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

    .tm-modal-header { padding: 50px 120px; }
    .tm-modal-body { padding: 0 120px; }

}

.tm-modal-close-full {
    background: transparent;
    padding: 30px;
}

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

    .tm-modal-close-full { padding: @global-medium-margin; }

}

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

/*
 * Heading fragment
 */

.tm-heading-fragment > a {
    color: inherit;
    text-decoration: none;
}

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

    h2.tm-heading-fragment > a:before {
        content: "#";
        position: absolute;
        width: 25px;
        margin-left: -25px;
        color: @global-muted-color;
    }

}


/* Reset container for docs
 ========================================================================== */

.tm-main .uk-container {
    padding-left: @container-padding-horizontal;
    padding-right: @container-padding-horizontal;
}

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

    .tm-main .uk-container {
        padding-left: @container-padding-horizontal-s;
        padding-right: @container-padding-horizontal-s;
    }

}

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

    .tm-main .uk-container {
        padding-left: @container-padding-horizontal-m;
        padding-right: @container-padding-horizontal-m;
    }

}


/* Pro
 ========================================================================== */

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

    .tm-intro-text { margin-top: 30px; }

}

/* Large screen and bigger */
@media (min-width: @breakpoint-xlarge) {

    .tm-intro-text { margin-top: 90px; }
    .tm-intro-image { margin-right: -75px; }

}