// Custom OpenFlexure theming
// UIKit vars imported
@import (reference) "uikit/src/less/uikit.theme.less";
//
// Colors
//

@global-color:                                  #000;
@global-emphasis-color:                         #C32280;
@global-muted-color:                            #666;

@global-primary-background: #C32280;

@inverse-primary-muted-color: lighten(@global-primary-background, 15%);
@darkened-primary-color: darken(@global-primary-background, 15%);
@inverse-global-color: fade(@global-inverse-color, 80%);

@global-border: #d5d5d5;

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

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

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



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

//
// Decorations
//
@small-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
@big-shadow: 0 14px 25px rgba(0, 0, 0, 0.16);

//
// Container
//

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

//
// Navbar
//

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

//
// Nav
//

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

//
// Subnav
//

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

//
// Tab
//

@tab-item-padding-horizontal: 10px;
@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
//
// Colours for dark mode also in the colors section
@inverse-global-muted-color: fade(@global-inverse-color, 60%);

//
// Paper
//
@paper-border-radius: 4px;
@button-border-radius: 3px;


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

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

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

/*
 * Navbar
 */

// 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;

.hook-inverse() {

    // Override background colour in dark mode
    .uk-card {
        background-color: #2a2a2a !important;
        color: @inverse-global-color;
    }
}

.hook-inverse() {
    .uk-alert {
        background-color: rgba(180, 180, 180, 0.15);
        color: @inverse-global-color;
        border-color: @inverse-global-color;
    }

    .uk-alert-danger {
        color: @notification-message-danger-color;
        border-color: @notification-message-danger-color
    }
    
    .uk-alert-warning {
        color: @notification-message-warning-color;
        border-color: @notification-message-warning-color
    }
}

/*
 * Links
 */
.hook-inverse() {
    .uk-link:hover,
    .uk-button-link:hover,
    a:hover {
        color: @inverse-primary-muted-color;
    }
    
    .uk-alert-success{
        color: rgba(28, 131, 45);
        background-color: rgba(130, 221, 145, 0.671);
    }
}

/*
 * Buttons
 */
.hook-inverse() {
    .uk-button {
        background-color: rgba(27, 13, 13, 0.15);
        color: @inverse-primary-muted-color;
        border-color: @inverse-primary-muted-color;
    }

    .uk-button:hover {
        background-color: @inverse-primary-muted-color;
        color: #fff;
        border-color: #fff;
    }

    .uk-button-primary {
        background-color: rgb(0, 0, 0);
        color: @inverse-primary-muted-color;
        border-color: @inverse-primary-muted-color;
    }

    .uk-button-primary:hover {
        background-color: @inverse-primary-muted-color;
        color: #fff;
        border-color: #fff;
    }

    .uk-button-disabled {
        border: 1px solid @darkened-primary-color !important;
        background-color: #333 !important;
        color: #777 !important;
    }
}

/*
 * Accordion
 */


.hook-inverse() {
    .uk-accordion-title::before {
        background-color: #fff;
    }

}


/*
 * Interactive elements
 */

.ofm-muted-interactive-text{
    color: @global-muted-color;

    &:hover {
        color: @global-color;
    }
}
.hook-inverse() {
    .ofm-muted-interactive-text{
        &:hover {
            color: @inverse-global-color;
        }
    }
}