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

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

// Custom OpenFlexure theming

//
// 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;
.uk-nav-header{
    text-transform:none;
}


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

@inverse-global-color: fade(@global-inverse-color, 80%);
@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;



/* UIkit modifiers
 ========================================================================== */

h4, .uk-h4 {
    line-height: normal;
    font-size: 20px;
    margin: 0;
}

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

.uk-navbar-dropdown.uk-open {
    border-radius: @paper-border-radius;
}

/*
 * Cards
 */

.uk-card {
    border-radius: @paper-border-radius;
    box-shadow: @small-shadow;
}

.uk-card-title {
    margin: 0;
    width: 240px;
}

.uk-card-body {
    padding: 20px 16px 8px 16px;
    width: 240px;
}

.uk-card-media-top img {
    width: 240px;
    margin: 0 auto;
}

.hook-inverse() {

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

/*
 * Modal
 */
.uk-modal-dialog {
    border-radius: @paper-border-radius;
    box-shadow: @big-shadow;
    transition: 0.3s ease !important;
}

.uk-modal-footer {
    border-radius: 0 0 @paper-border-radius @paper-border-radius;
}

.uk-modal-header {
    border-radius: @paper-border-radius @paper-border-radius 0 0;
}

/*
 * Notifications
 */
.uk-notification-message {
    border-radius: @paper-border-radius;
    box-shadow: @big-shadow;
}

.uk-notification-message-danger {
    border: 1px solid @notification-message-danger-color
}

.uk-notification-message-warning {
    border: 1px solid @notification-message-warning-color
}

.uk-notification-message-success {
    border: 1px solid @notification-message-success-color
}


/*
 * Alert
 */
.uk-alert {
    position: relative;
    margin-bottom: 20px;
    padding: 15px 29px 15px 15px;
    border-radius: @paper-border-radius;
    border: 1px solid @global-border
}

.uk-alert-success{
    color: rgba(28, 131, 45);
    background-color: rgba(130, 221, 145, 0.671);
}

.uk-alert-danger {
    border: 1px solid @notification-message-danger-color
}

.uk-alert-warning {
    border: 1px solid @notification-message-warning-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
 */
.uk-link,
.uk-button-link {
    color: @global-muted-color;
}

.uk-link:hover,
.uk-button-link:hover,
a:hover {
    color: @global-primary-background;
}

.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
 */
.uk-button {
    border-radius: @button-border-radius;
    padding: 0 8px;
    border-color: @global-border;
    margin-bottom: 2px;
    text-transform:none !important;
}

.uk-button-default {
    background-color: rgba(180, 180, 180, 0.10);
    border-color: @global-border;
}

.uk-button-primary {
    background-color: rgba(180, 180, 180, 0.10);
    border-color: @global-primary-background;
    color: @button-text-color;
    margin-bottom: 4px;
}

.uk-button-danger {
    background-color: transparent;
    color: #f0506e;
    border: 1px solid #f0506e;
}

.uk-button-disabled {
    border: 1px solid #999999 !important;
    background-color: #cccccc !important;
    color: #919191 !important;
}

.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: #333333 !important;
        color: #777777 !important;
    }
}

.uk-icon-button,
.uk-icon-button:hover {
    text-decoration: none
}

/*
 * Accordion
 */

.uk-accordion-title {
    display: block;
    font-size: @global-font-size;
    line-height: 1.4;
    color: #333;
    font-weight: 500;
}

.uk-accordion-title::before {
    content: "";
    width: 1.4em;
    height: 1.4em;
    float: left;
    margin: 0 2px 0 0;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
    mask-position: 100% 50%;
    background-image: none;
    background-color: #333;
}

.uk-open>.uk-accordion-title::before {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
    mask-position: 100% 50%;
    background-image: none;
}

.uk-accordion-content {
    margin-top: 10px;
}

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

}

/*
 * Pagination
 */

.uk-pagination > * > :hover, .uk-pagination > * > :focus {
    color: @global-primary-background;
    text-decoration: none;
}

.uk-pagination > .uk-active > * {
    color: @global-primary-background;
}