/*
Modalbox
==============================================
Creates a transitioned fixed modalbox overlay that displays above all other elements.

The `sizing--content` class lets the modal window get its height from the inner content.

The inline styles are generated by the `jquery.modal.js` file.

```
<div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;">
    <div class="header">
        <div class="title">This is the header</div>
    </div>
    <div class="content">
        This is the content
    </div>

    <div class="btn icon--cross is--small btn--grey modal--close">
    </div>
</div>

<div class="js--overlay" style="opacity: 0.8; display: block; cursor: pointer;"></div>
```
*/

.js--modal {
    .transition(all 0.5s);
    .box-shadow(0px 0px 0px 7px rgba(0, 0, 0, 0.25));
    .box-sizing(content-box);
    .opacity(0);
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: padding-box #fff;
    max-height: 100%;
    max-width: 100%;
    z-index: @zindex-modalbox;
    overflow-x: hidden;
    overflow-y: auto;

    .header {
        .unitize-padding(10, 10, 10, 10);
        .unitize-height(42, 16);
        border-bottom: 1px solid @border-color;

        .title {
            .unitize(font-size, 16);
            font-weight: @font-bold-weight;
        }
    }

    .modal--close {
        .unitize-height(30, 16);
        .unitize-width(30, 16);
        .unitize(line-height, 30);
        .unitize(font-size, 10);
        .unitize(right, 10);
        .unitize(top, 7);
        .tap-highlight-color(rgba(0, 0, 0, 0));
        padding: 0;
        text-align: center;
        position: absolute;
    }

    .content {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        .content--iframe {
            .unitize-padding(10, 10, 10, 10);

            width: 100%;
            height: 100%;
            border: 0 none;
            display: block;
        }
    }

    &.sizing--auto.is--fullscreen {
        height: 100% !important;
        width: 100% !important;
    }

    &.sizing--fixed {
        max-height: none !important;
        max-width: none !important;
    }

    &.sizing--content {
        position: fixed;
        bottom: auto;
        top: auto;
        height: auto;
    }

    &.no--header {
        .header {
            display: none;
        }
    }

    &.no--border-radius {
        border-radius: 0;
    }
}

@media screen and(min-width: @tabletViewportWidth) {
    .js--modal {
        .border-radius(3px);
    }
}