.wk-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 999;
    background-color: rgba(#323234, 0.5);

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px;

    @include screen('xs'){
        padding: 30px 0;
    }
    &--big{
        .wk-modal__body{
            max-width: 900px;
        }
    }
    &--full{
        .wk-modal__body{
            max-width: 100%;
        }
    }

    &__body{
        background-color: #fff;
        width: 100%;
        max-width: 550px;
        padding-right: 15px !important;
        border-radius: 10px;
    }


    &__content{
        margin-bottom: 30px;
        padding-right: 15px;
        
        max-height: 70vh;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 5px;
        }
           
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }
           
        &::-webkit-scrollbar-thumb {
            background-color: #a0aec0;
            // outline: 1px solid #718096;
            border-radius: 3px;
          }
    }

    &__ctas{
        text-align: right;
        padding-right: 15px;
    }
}

.wk-modal-enter-active, .wk-modal-leave-active {
    transition: opacity .2s ease, transform .2s ease;
}
  
.wk-modal-enter, .wk-modal-leave-to {
    opacity: 0;
    transform: scale(1.1);
}