@import 'variables';
@import 'mixins'; 

.comet-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba( 0, 0, 0, .5 );
    z-index: 99999;
    padding: 50px;
    font: 300 15px/20px sans-serif;
    color: $liDark;

    > .comet-inner {
        display: block;
        background: white;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: 100%;
        @include border_radius( 5px );

        > * {
            display: block;
            position: relative;
            border: 0;
            margin: 0;
        }

        > .comet-body {
            height: calc( 100% - 76px );
            overflow: auto;

            iframe { height: 100%; }
        }

        > .comet-header {
            border-bottom: 1px solid $daLight;
            overflow: visible;
            padding: 20px;

            h4 {
                padding: 0;
                margin: 0;
                font: 300 20px/35px sans-serif;
                text-align: center;
                color: $liDark;
            }

            > div {
                display: flex;
                width: 100%;
                align-items: center;
            }

            > .comet-searchbox {
                max-width: 1000px;
                margin: 0 auto;

                > .comet-select {
                    width: auto;
                    min-width: 20%;
                    max-width: 30%;
                    margin-right: -1px;
                    @include border_radius( 5px 0 0 5px );

                    + .comet-input { @include border_radius( 0 5px 5px 0 ); }
                }
            }
        }
    }

    > .comet-close {
        position: fixed;
        right: 5px;
        top: 5px;
        background: rgba( 0, 0, 0, .7 );
        padding: 0;
        font: 300 20px/35px sans-serif;
        color: white;
        opacity: .7;
        @include border_radius( 5px );

        &, > span {
            height: 35px;
            width: 35px;
            line-height: 35px;
            display: block;
        }

        &:hover, &:active { opacity: 1; }

    }
}