// Name:            Utility
// Description:     Collection of useful utility classes to style your content
//
// Component:       `wk-container-*`
//                  `wk-clearfix`
//                  `wk-nbfc-*`
//                  `wk-float-*`
//                  `wk-align-*`
//                  `wk-vertical-align-*`
//                  `wk-height-*`
//                  `wk-responsive-*`
//                  `wk-margin-*`
//                  `wk-padding-*`
//                  `wk-border-*`
//                  `wk-heading-*`
//                  `wk-link-*`
//                  `wk-scrollable-*`
//                  `wk-overflow-*`
//                  `wk-position-*`
//                  `wk-display-*`
//                  `wk-visible-*`
//                  `wk-hidden-*`
//                  `wk-invisible`
//
// Used by:         Overlay
//
// ========================================================================


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

@utility-container-max-width:                   980px;
@utility-container-padding-horizontal:          25px;

@utility-container-large-max-width:             1200px;
@utility-container-large-padding-horizontal:    35px;

@utility-align-horizontal:                      15px;
@utility-align-vertical:                        15px;

@utility-height-viewport-min-height:            600px;

@utility-margin:                                15px;
@utility-margin-small:                          5px;
@utility-margin-large:                          50px;

@utility-border-rounded:                        5px;

@utility-heading-large-small-font-size:         36px;
@utility-heading-large-small-line-height:       42px;
@utility-heading-large-font-size:               52px;
@utility-heading-large-line-height:             64px;

@utility-link-muted-color:                      #444;
@utility-link-muted-hover-color:                #444;

@utility-scrollable-text-height:                300px;

@utility-scrollable-box-height:                 170px;
@utility-scrollable-box-padding:                10px;
@utility-scrollable-box-border:                 #ddd;
@utility-scrollable-box-border-width:           1px;


/* ========================================================================
   Component: Utility
 ========================================================================== */

/* Container
 ========================================================================== */

.wk-container {
    box-sizing: border-box;
    max-width: @utility-container-max-width;
    padding: 0 @utility-container-padding-horizontal;
    .hook-container;
}

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

    .wk-container {
        max-width: @utility-container-large-max-width;
        padding: 0 @utility-container-large-padding-horizontal;
    }

}

/*
 * Micro clearfix
 */

.wk-container:before,
.wk-container:after {
    content: "";
    display: table;
}

.wk-container:after { clear: both; }

/*
 * Center container
 */

.wk-container-center {
    margin-left: auto;
    margin-right: auto;
}


/* Clearing
 ========================================================================== */

/*
 * Micro clearfix
* `table-cell` is used with `:before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
 * `table` is used again with `:after` because `clear` only works with block elements.
 * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
 */

.wk-clearfix:before {
    content: "";
    display: table-cell;
}

.wk-clearfix:after {
    content: "";
    display: table;
    clear: both;
}


/*
 *  Create a new block formatting context
 */

.wk-nbfc { overflow: hidden; }

.wk-nbfc-alt {
    display: table-cell;
    width: 10000px;
}


/* Alignment of block elements
 ========================================================================== */

/*
 * Float blocks
 * 1. Prevent content overflow on small devices
 */

.wk-float-left { float: left; }
.wk-float-right { float: right; }

/* 1 */
[class*='wk-float-'] { max-width: 100%; }


/* Alignment of images and objects
 ========================================================================== */

/*
 * Alignment
 */

[class*='wk-align-'] {
    display: block;
    margin-bottom: @utility-align-vertical;
}

.wk-align-left {
    margin-right: @utility-align-horizontal;
    float: left;
}

.wk-align-right {
    margin-left: @utility-align-horizontal;
    float: right;
}

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

    .wk-align-medium-left {
        margin-right: @utility-align-horizontal;
        float: left;
    }

    .wk-align-medium-right {
        margin-left: @utility-align-horizontal;
        float: right;
    }

}

.wk-align-center {
    margin-left: auto;
    margin-right: auto;
}


/* Vertical alignment
 ========================================================================== */

/*
 * Remove whitespace between child elements when using `inline-block`
 */

.wk-vertical-align { font-size: 0.001px; }

/*
 *  The `wk-vertical-align` container needs a specific height
 */

.wk-vertical-align:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

/*
 * Sub-object which can have any height
 * 1. Reset whitespace hack
 */

.wk-vertical-align-middle,
.wk-vertical-align-bottom {
    display: inline-block;
    max-width: 100%;
    /* 1 */
    font-size: 1rem;
}

.wk-vertical-align-middle { vertical-align: middle; }
.wk-vertical-align-bottom { vertical-align: bottom; }


/* Height
 ========================================================================== */

/*
 * More robust if padding and border are used
 */

[class*='wk-height'] { box-sizing: border-box; }

/*
 * Useful to extend the `html` and `body` element to the full height of the page.
 */

.wk-height-1-1 { height: 100%; }

/*
 * Useful to create image teasers
 */

.wk-height-viewport {
    height: 100vh;
    min-height: @utility-height-viewport-min-height;
}


/* Responsive objects
 * Note: Images are already responsive by default, see Base component
 ========================================================================== */

/*
 * 1. Corrects `max-width` and `max-height` behavior if padding and border are used
 */

.wk-responsive-width,
.wk-responsive-height { box-sizing: border-box; }

/*
 * Responsiveness: Sets a maximum width relative to the parent and auto scales the height
 * `important` needed to override `wk-img-preserve img`
 */

.wk-responsive-width {
    max-width: 100% !important;
    height: auto;
}

/*
 * Responsiveness: Sets a maximum height relative to the parent and auto scales the width
 * Only works if the parent element has a fixed height.
 */

.wk-responsive-height {
    max-height: 100%;
    width: auto;
}


/* Margin
 ========================================================================== */

/*
 * Create a block with the same margin of a paragraph
 * Add margin if adjacent element
 */

.wk-margin { margin-bottom: @utility-margin; }
* + .wk-margin { margin-top: @utility-margin; }

.wk-margin-top { margin-top: @utility-margin !important; }
.wk-margin-bottom { margin-bottom: @utility-margin !important; }
.wk-margin-left { margin-left: @utility-margin !important; }
.wk-margin-right { margin-right: @utility-margin !important; }

/*
 * Larger margins
 */

.wk-margin-large { margin-bottom: @utility-margin-large; }
* + .wk-margin-large { margin-top: @utility-margin-large; }

.wk-margin-large-top { margin-top: @utility-margin-large !important; }
.wk-margin-large-bottom { margin-bottom: @utility-margin-large !important; }
.wk-margin-large-left { margin-left: @utility-margin-large !important; }
.wk-margin-large-right { margin-right: @utility-margin-large !important; }

/*
 * Smaller margins
 */

.wk-margin-small { margin-bottom: @utility-margin-small; }
* + .wk-margin-small { margin-top: @utility-margin-small; }

.wk-margin-small-top { margin-top: @utility-margin-small !important; }
.wk-margin-small-bottom { margin-bottom: @utility-margin-small !important; }
.wk-margin-small-left { margin-left: @utility-margin-small !important; }
.wk-margin-small-right { margin-right: @utility-margin-small !important; }

/*
 * Remove margins
 */

.wk-margin-remove { margin: 0 !important; }
.wk-margin-top-remove { margin-top: 0 !important; }
.wk-margin-bottom-remove { margin-bottom: 0 !important; }


/* Padding
 ========================================================================== */

.wk-padding-remove { padding: 0 !important; }
.wk-padding-top-remove { padding-top: 0 !important; }
.wk-padding-bottom-remove { padding-bottom: 0 !important; }

.wk-padding-vertical-remove {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Border
 ========================================================================== */

.wk-border-circle { border-radius: 50%; }
.wk-border-rounded { border-radius: @utility-border-rounded; }


/* Headings
 ========================================================================== */

.wk-heading-large {
    font-size: @utility-heading-large-small-font-size;
    line-height: @utility-heading-large-small-line-height;
}

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

    .wk-heading-large {
        font-size: @utility-heading-large-font-size;
        line-height: @utility-heading-large-line-height;
    }

}


/* Link
 ========================================================================== */

/*
 * Let links appear in default text color
 */

.wk-link-muted,
.wk-link-muted a { color: @utility-link-muted-color; }

.wk-link-muted:hover,
.wk-link-muted a:hover { color: @utility-link-muted-hover-color; }

/*
 * Reset link style
 */

.wk-link-reset,
.wk-link-reset a,
.wk-link-reset:hover,
.wk-link-reset a:hover,
.wk-link-reset:focus,
.wk-link-reset a:focus {
    color: inherit;
    text-decoration: none;
}


/* Scrollable
 ========================================================================== */

/*
 * Enable scrolling for preformatted text
 */

.wk-scrollable-text {
    height: @utility-scrollable-text-height;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    resize: both;
}

/*
 * Box with scrolling enabled
 */

.wk-scrollable-box {
    box-sizing: border-box;
    height: @utility-scrollable-box-height;
    padding: @utility-scrollable-box-padding;
    border: @utility-scrollable-box-border-width solid @utility-scrollable-box-border;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    resize: both;
    .hook-scrollable-box;
}

.wk-scrollable-box > :last-child { margin-bottom: 0; }


/* Overflow
 ========================================================================== */

.wk-overflow-hidden { overflow: hidden; }

/*
 * Enable scrollbars if content is clipped
 */

.wk-overflow-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.wk-overflow-container > :last-child { margin-bottom: 0; }


/* Position
 ========================================================================== */

.wk-position-absolute,
[class*='wk-position-top'],
[class*='wk-position-bottom'] { position: absolute !important; }

/* Don't use `width: 100%` because it is wrong if the parent has padding. */
.wk-position-top {
    top: 0;
    left: 0;
    right: 0;
}

.wk-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.wk-position-top-left {
    top: 0;
    left: 0;
}

.wk-position-top-right {
    top: 0;
    right: 0;
}

.wk-position-bottom-left {
    bottom: 0;
    left: 0;
}

.wk-position-bottom-right {
    bottom: 0;
    right: 0;
}

/*
 * Cover
 */

.wk-position-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/*
 * Relative
 */

.wk-position-relative { position: relative !important; }

/*
 * Z-index
 */

.wk-position-z-index { z-index: 1; }


/* Display
 ========================================================================== */

/*
 * Display
 * 1. Required if child is a responsive image
 */

.wk-display-block { display: block !important; }
.wk-display-inline { display: inline !important; }

.wk-display-inline-block {
    display: inline-block !important;
    /* 1 */
    max-width: 100%;
}

/*
 * Visibility
 * Avoids setting display to `block` so it works also with `inline-block` and `table`
 */

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

    .wk-visible-small { display: none !important; }
    .wk-visible-medium { display: none !important; }
    .wk-hidden-large { display: none !important; }

}

/* Tablets portrait */
@media (min-width: @breakpoint-medium) and (max-width: @breakpoint-medium-max) {

    .wk-visible-small { display: none !important; }
    .wk-visible-large { display: none !important ; }
    .wk-hidden-medium { display: none !important; }

}

/* Phone landscape and smaller*/
@media (max-width: @breakpoint-small-max) {

    .wk-visible-medium { display: none !important; }
    .wk-visible-large { display: none !important; }
    .wk-hidden-small { display: none !important; }

}

/* Remove from the flow and screen readers on any device */
.wk-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* It's hidden, but still affects layout */
.wk-invisible { visibility: hidden !important; }

/* Show on hover */
.wk-visible-hover:hover .wk-hidden,
.wk-visible-hover:hover .wk-invisible {
    display: block !important;
    visibility: visible !important;
}

.wk-visible-hover-inline:hover .wk-hidden,
.wk-visible-hover-inline:hover .wk-invisible {
    display: inline-block !important;
    visibility: visible !important;
}

/* Hide on touch */
.wk-touch .wk-hidden-touch,
.wk-notouch .wk-hidden-notouch { display: none !important; }


// Hooks
// ========================================================================

.hook-utility-misc;

.hook-container() {}
.hook-scrollable-box() {}
.hook-utility-misc() {}
