// Name:            Modal
// Description:     Defines styles for modal dialogs
//
// Component:       `uk-modal`
//
// Sub-objects:     `uk-modal-dialog`
//                  `uk-modal-close`
//
// Modifiers:       `uk-modal-dialog-slide`
//                  `uk-modal-dialog-frameless`
//
// States:          `uk-open`
//
// Uses:            Close: `uk-close`
//
// ========================================================================


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

@modal-z-index:                                 1020;
@modal-background:                              rgba(0,0,0,0.6);

@modal-dialog-padding:                          20px;
@modal-dialog-width:                            600px;
@modal-dialog-background:                       #fff;


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

/*
 * This is the modal overlay and modal dialog container
 * 1. Hide by default
 * 2. Set fixed position
 * 3. Webkit needs a height to position the modal dialog vertically in percent
 * 4. Allow scrolling for the modal dialog
 * 5. Mask the background page
 * 6. 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 */
    height: 100%;
    /* 4 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 5 */
    background: @modal-background;
    /* 6 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    .hook-modal;
}

/*
 * Open state
 */

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

/*
 * Prevents dublicated scrollbar caused by 4.
 */

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


/* Sub-object: `uk-modal-dialog`
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set box sizing
 * 3. Center dialog box
 * 4. Set style
 */

.uk-modal-dialog {
    /* 1 */
    position: relative;
    top: 10%;
    left: 50%;
    /* 2 */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: @modal-dialog-padding;
    width: @modal-dialog-width;
    /* 3 */
    margin-left: (@modal-dialog-width / -2);
    /* 4 */
    background: @modal-dialog-background;
    .hook-modal-dialog;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

    /*
     * Fit the phone width perfectly
     */

    .uk-modal-dialog {
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        margin: 10px;
    }

}

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

.uk-modal-dialog > :last-child { margin-bottom: 0; }


/* Modifier: `uk-modal-dialog-slide`
 ========================================================================== */

/*
 * Adds a slide-in transition to the modal dialog
 */

.uk-modal-dialog-slide {
    opacity: 0;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    -webkit-transition: opacity 0.3s linear, -webkit-transform 0.3s ease-out;
    transition: opacity 0.3s linear, transform 0.3s ease-out;
}

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


/* Close in modal
 ========================================================================== */

.uk-modal-dialog > .uk-close:first-child {
    margin: -10px -10px 0 0;
    float: right;
}

/*
 * Remove margin from adjacent element
 */

 .uk-modal-dialog > .uk-close:first-child + * { margin-top: 0; }


/* Modifier: `uk-modal-dialog-frameless`
 ========================================================================== */

.uk-modal-dialog-frameless { padding: 0; }

/*
 * Close in modal
 */

.uk-modal-dialog-frameless > .uk-close:first-child {
    position: absolute;
    top: -12px;
    right: -12px;
    margin: 0;
    float: none;
}

/* Only phones */
@media (max-width: @breakpoint-small-max) {

    .uk-modal-dialog-frameless > .uk-close:first-child {
        top: -7px;
        right: -7px;
    }

}


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

.hook-modal-misc;

.hook-modal() {}
.hook-modal-dialog() {}
.hook-modal-misc() {}