@import "../../../bootstrap/variables";
@import "../../../bootstrap/mixins/breakpoints";

#ModalView{
    top:0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: transparentize($brand-black,0.2);
    justify-content: center;
    display: none;
    z-index: 1200;

    article#container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;

        section#main {
            background: white;
            width: 400px;
            min-height: 200px;
            height: auto;
            box-shadow:  -5px 13px 19px lighten($brand-black,10%);

            header{
                overflow: hidden;
                img {
                    width: calc(100% + 2px);
                    height: auto;
                    margin-top: -2px;
                    margin-left: -1px;
                }
                h3{
                    font-family: $lato;
                    padding: 20px 20px;
                }
            }

            section{
                font-family: $lato;
                padding: 0px 20px;
            }

            footer{
                padding: 20px;
                display: flex;
                justify-content: flex-end;

                button{
                    background: none;
                    font-family: $lato;
                    font-weight: bold;
                    border: none;
                    text-transform: uppercase;
                    font-size: 13px;
                    padding: 2px 0;
                    margin: 0  0 0 30px;
                    border-bottom: 2px solid #fff;

                    &.success{
                        color: $brand-info;
                        &:hover{
                            border-bottom: 2px solid $brand-info;
                        }
                    }

                    &.neutral{
                        color: $gray-light;
                        &:hover {
                            border-bottom: 2px solid $brand-black;
                            color: $brand-black
                        }
                    }

                }
            }


        }

    }



    @include media-breakpoint-down(sm) {

        article#container  section#main {
            width: 100%;
            min-height: 180px;
            height: auto;

            header h3 {
                font-size: $font-size-h5;
            }

            section{
                font-size: $font-size-xs;
            }
        }
    }
}