@charset "UTF-8";

//-----------------------------------------------------
// dialog.scss
//-----------------------------------------------------
.dialog-wrap{
    @include fixed(all);
    @include center-flex(both);
    z-index: $zIndexOverlay;
    display: none;
    flex-direction: column;

    &.active{
        display: flex;
    }
}

.dialog{
    position: relative;
    width: 280px;
    background: #fff;
    border-radius: $radiusBase;
    overflow: hidden;
    z-index: $zIndexOverlay + 5;
    .dialog-bd{
        padding: 20px 10px;
        text-align: center;
        .bd-tt{
            font-size: 16px;
            font-weight: bold;
            line-height: 1.3;
            margin-bottom: 10px;
        }
        .bd-txt{
            &.txt--left{
                text-align: left;
            }
        }
    }
    .dialog-ft{
        overflow: hidden;
        text-align: center;
        line-height: $barHeight;
        @include equal-flex('.ft-btn');
        button{
            line-height: normal;
            height: $barHeight;
            border: none;
            background: transparent;
        }
        .ft-btn{
            position: relative;
            &::before{
                content: "";
                @include retina-one-px-border;
            }
            &:nth-of-type(1){
                &::after {
                    content: "";
                    @include retina-one-px-border(right);
                }
            }
            @if $activeStateSwitch{
                &:first-of-type{
                    border-bottom-left-radius: $radiusBase;
                }
                &:last-of-type{
                    border-bottom-right-radius: $radiusBase;
                }
                &:hover,
                &:active{
                    background: $colorF;
                }
            }
        }
        &.ft--full{
            flex-direction: column;
            .ft-btn{
                width: 100%;
                border-left: none;
                &:first-of-type{
                    &::after{
                        display: none;
                    }
                }
                @if $activeStateSwitch{
                    &:first-of-type{
                        border-bottom-left-radius: 0;
                    }
                    &:last-of-type{
                        border-bottom-left-radius: $radiusBase;
                        border-bottom-right-radius: $radiusBase;
                    }
                }
            }
        }
    }
}