.xm__mask {
    @include mask
}

.xm__popup {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: $zindex-popover;
    background-color: $body-background;
    transform: translate(0, 100%);
    transition: transform .3s;
    
    &.xm__popup--active {
        transform: translate(0, 0);
    }

    & header{
        font-size: $font-size-small;
        color: $text-color;
        height: 40px;
        line-height: 40px;
        background-color: $body-background;
        border-bottom: $border-width-default  $border-style-default  $border-color-base;
    }

    & .xm__popup--action {
        display: block;
        font-size: 1.3rem;
        color: $text-color;
        position: absolute;
        top: 0;
        right: 0;
        width: 4rem;
    }

}