@import 'vu-base/base';

$header-h: 40px;

%close{
    position: relative;
    width: $header-h;
    height: $header-h;
    margin: 0!important;
    padding: 0!important;
    line-height: $header-h;
    color: transparent!important;

    &:after,
    &:before{
        position: absolute;
        top: 50%;
        left: 50%;
        content: "";
        width: 40%;
        height: 1px;
        background: #555;
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
                transform: translate(-50%, -50%) rotate(45deg);
    }
    &:before{
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
                transform: translate(-50%, -50%) rotate(-45deg);
    }
}

$modal-z-idx: $z-idx-2;

.Modal {
    @include full-screen(fixed, $modal-z-idx, rgba(#000,.6));

    &--small{
        .Modal__header{
            border:none;
            line-height: 65px;
        }
        .Modal__content{
            min-height: 2rem;
        }
        .Modal__simple-txt{
            max-width: 220px;
            margin: 0 auto;
            padding: 10px 0;
            text-align: center;
            line-height: 1.5;
        }
    }
    &__container{
        position: fixed;
        // top: inherit;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;

        .Modal--small &{
            top: 50%;
            left: 10%;
            right: 10%;
            bottom: auto;
            border-radius: 8px;
            transform: translate3d(0, -50%, 0);
        }
    }
    &__content{
        min-height: 100px;
    }
    &__header{
        position: relative;
        border-bottom: 1px solid $border-color;
        text-align: center;
        height: $header-h;
        line-height: $header-h;
        &.empty{ padding: 0; border: none;}
        h3{
            margin: 0;
            &:empty{ display: none; }
        }
    }
    &__close{
        @extend %close;

        position: absolute;
        top: 0;
        right: 0;

        &:before,
        &:after{
            width: 20px;
            border-radius: 2px;
        }
    }
    &__footer{
        border-top:1px solid $border-color;
        &:empty{ display: none; }

        display: -webkit-box;
        @extend %box-s;
        margin: 0;
        border-top: 1px solid $border-color;
        text-align: center;
        [class*="btn"]:not(.btnDisabled){
            display: block!important;
            -webkit-box-flex: 1;
            -moz-box-flex: 1;
            -ms-flex: 1;
            height: 42px;
            padding: 0;
            background: none;
            -webkit-border-radius: initial;
                    border-radius: initial;
            color: $main-color;
            font-size: 1.68rem;
            line-height: 42px;
            &:only-of-type{
                -webkit-border-radius: 0 0 4px 4px;
                        border-radius: 0 0 4px 4px;
            }
            &:not(:only-of-type){
                &:first-of-type{
                    -webkit-border-radius: 0 0 0 4px;
                            border-radius:0 0 0 4px;
                }
                &:last-of-type{
                    -webkit-border-radius: 0 0 4px 0;
                            border-radius:0 0 4px 0;
                }
            }
            &:not(:first-of-type){
                border-left:1px solid $border-color!important;
            }
        }
    }
}