// Name:            Modal
// Description:     Component to create modal dialogs
//
// Component:       `uk-modal`
//
// Sub-objects:     `uk-modal-page`
//                  `uk-modal-dialog`
//                  `uk-modal-header`
//                  `uk-modal-body`
//                  `uk-modal-footer`
//                  `uk-modal-title`
//                  `uk-modal-close`
//                  `uk-modal-caption`
//
// Adopted:         `uk-modal-close-default`
//                  `uk-modal-close-outside`
//                  `uk-modal-close-full`
//
// Modifiers:       `uk-modal-container`
//                  `uk-modal-full`
//                  `uk-modal-lightbox`
//
// States:          `uk-open`
//
// ========================================================================


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

@modal-z-index:                                 @global-z-index + 10;
@modal-background:                              rgba(0,0,0,0.6);

@modal-dialog-margin-vertical:                  50px;
@modal-dialog-margin-vertical-xs:               15px;
@modal-dialog-margin-horizontal:                @modal-dialog-margin-vertical-xs;
@modal-dialog-width:                            600px;
@modal-dialog-background:                       @global-background;

@modal-container-margin-horizontal:             15px;
@modal-container-margin-horizontal-s:           @global-gutter;
@modal-container-margin-horizontal-m:           @global-medium-gutter;
@modal-container-margin-horizontal-l:           @global-large-gutter;

@modal-body-padding-horizontal:                 @global-gutter;
@modal-body-padding-vertical:                   @global-gutter;

@modal-header-padding-horizontal:               @global-gutter;
@modal-header-padding-vertical:                 (@modal-header-padding-horizontal / 2);
@modal-header-background:                       @global-muted-background;

@modal-footer-padding-horizontal:               @global-gutter;
@modal-footer-padding-vertical:                 (@modal-footer-padding-horizontal / 2);
@modal-footer-background:                       @global-muted-background;

@modal-title-font-size:                         @global-xlarge-font-size;
@modal-title-line-height:                       1.3;

@modal-close-position:                          @global-small-margin;
@modal-close-padding:                           5px;

@modal-close-outside-position:                  0;
@modal-close-outside-translate:                 100%;
@modal-close-outside-color:                     lighten(@global-inverse-color, 20%);
@modal-close-outside-hover-color:               @global-inverse-color;

@modal-caption-margin-top:                      @global-margin;
@modal-caption-color:                           #fff;


/* ========================================================================
   Component: Modal
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Mask the background page
 * 5. Fade-in transition
 */

.uk-modal {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @modal-z-index;
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 */
    background: @modal-background;
    /* 5 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    .hook-modal;
}

/*
 * Open
 */

.uk-modal.uk-open { opacity: 1; }


/* Page
 ========================================================================== */

/*
 * Prevent scrollbars
 */

.uk-modal-page { overflow: hidden; }


/* Dialog
 ========================================================================== */

/*
 * 1. Create position context for caption, spinner and close button
 * 2. Dimensions
 * 3. Style
 * 4. Slide-in transition
 */

.uk-modal-dialog {
    /* 1 */
    position: relative;
    /* 2 */
    box-sizing: border-box;
    margin: @modal-dialog-margin-vertical auto;
    width: @modal-dialog-width;
    max-width: ~'calc(100% - (2 * @{modal-dialog-margin-horizontal}))';
    /* 3 */
    background: @modal-dialog-background;
    /* 4 */
    opacity: 0;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
    transition: opacity 0.3s linear, transform 0.3s ease-out;
    .hook-modal-dialog;
}

/* Phone portrait and smaller */
@media (max-width: @breakpoint-xsmall-max) {

    .uk-modal-dialog {
        margin-top: @modal-dialog-margin-vertical-xs;
        margin-bottom: @modal-dialog-margin-vertical-xs;
    }

}

/*
 * Open
 */

.uk-open > .uk-modal-dialog {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}


/* Size modifier
 ========================================================================== */

/*
 * Container size
 * Take the same size as the Container component
 */

.uk-modal-container .uk-modal-dialog {
    width: 100%;
    max-width: 1200px;
}

.uk-modal-container {
    padding-left: @modal-container-margin-horizontal;
    padding-right: @modal-container-margin-horizontal;
}

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

    .uk-modal-container {
        padding-left: @modal-container-margin-horizontal-s;
        padding-right: @modal-container-margin-horizontal-s;
    }

}

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

    .uk-modal-container {
        padding-left: @modal-container-margin-horizontal-m;
        padding-right: @modal-container-margin-horizontal-m;
    }

}

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

    .uk-modal-container {
        padding-left: @modal-container-margin-horizontal-l;
        padding-right: @modal-container-margin-horizontal-l;
    }

}

/*
 * Full size
 * 1. Remove background from modal
 * 2. Reset all default declarations from modal dialog
 */

/* 1 */
.uk-modal-full { background: none; }

/* 2 */
.uk-modal-full .uk-modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    .hook-modal-full;
}


/* Lightbox modifier
 ========================================================================== */

.uk-modal-lightbox { background: rgba(0,0,0,0.9); }

.uk-modal-lightbox .uk-modal-dialog {
    margin-left: @modal-dialog-margin-horizontal;
    margin-right: @modal-dialog-margin-horizontal;
}


/* Sections
 ========================================================================== */

.uk-modal-body {
    padding: @modal-body-padding-vertical @modal-body-padding-horizontal;
    .hook-modal-body;
}

.uk-modal-header {
    padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
    background: @modal-header-background;
    .hook-modal-header;
}

.uk-modal-footer {
    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
    background: @modal-footer-background;
    .hook-modal-footer;
}

/*
 * Micro clearfix
 */

.uk-modal-body::before,
.uk-modal-body::after,
.uk-modal-header::before,
.uk-modal-header::after,
.uk-modal-footer::before,
.uk-modal-footer::after {
    content: "";
    display: table;
}

.uk-modal-body::after,
.uk-modal-header::after,
.uk-modal-footer::after { clear: both; }

/*
 * Remove margin from the last-child
 */

.uk-modal-body > :last-child,
.uk-modal-header > :last-child,
.uk-modal-footer > :last-child { margin-bottom: 0; }


/* Title
 ========================================================================== */

.uk-modal-title {
    font-size: @modal-title-font-size;
    line-height: @modal-title-line-height;
    .hook-modal-title;
}


/* Close
 * Adopts `uk-close`
 ========================================================================== */

[class*='uk-modal-close-'] {
    position: absolute;
    top: @modal-close-position;
    right: @modal-close-position;
    padding: @modal-close-padding;
    .hook-modal-close;
}

/*
 * Remove margin from adjacent element
 */

[class*='uk-modal-close-']:first-child + * { margin-top: 0; }

/*
 * Hover
 */

[class*='uk-modal-close-']:hover {
    .hook-modal-close-hover;
}

/*
 * Default
 */

.uk-modal-close-default {
    .hook-modal-close-default;
}

.uk-modal-close-default:hover {
    .hook-modal-close-default-hover;
}

/*
 * Outside
 */

.uk-modal-close-outside {
    top: @modal-close-outside-position;
    right: @modal-close-outside-position;
    -webkit-transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
    transform: translate(@modal-close-outside-translate, -(@modal-close-outside-translate));
    color: @modal-close-outside-color;
    .hook-modal-close-outside;
}

.uk-modal-close-outside:hover {
    color: @modal-close-outside-hover-color;
    .hook-modal-close-outside-hover;
}

/*
 * Full
 */

.uk-modal-close-full {
    .hook-modal-close-full;
}

.uk-modal-close-full:hover {
    .hook-modal-close-full-hover;
}


/* Caption
 ========================================================================== */

.uk-modal-caption {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: @modal-caption-margin-top;
    color: @modal-caption-color;
    text-align: center;
    .hook-modal-caption;
}


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

.hook-modal-misc;

.hook-modal() {}
.hook-modal-dialog() {}
.hook-modal-full() {}
.hook-modal-header() {}
.hook-modal-body() {}
.hook-modal-footer() {}
.hook-modal-title() {}
.hook-modal-close() {}
.hook-modal-close-hover() {}
.hook-modal-close-default() {}
.hook-modal-close-default-hover() {}
.hook-modal-close-outside() {}
.hook-modal-close-outside-hover() {}
.hook-modal-close-full() {}
.hook-modal-close-full-hover() {}
.hook-modal-caption() {}
.hook-modal-misc() {}
