@import "theme/vars.less";

@modal_background_blur: 10px;

.post_creator_modal {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;

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

    width: 100%;
    height: 100%;

    transition: all 150ms ease-in-out;

    &.active {
        background-color: rgba(var(--bg_color_6), 0.5);

        backdrop-filter: blur(@modal_background_blur);
        -webkit-backdrop-filter: blur(@modal_background_blur);

        .postCreator {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .postCreator {
        transition: all 150ms ease-in-out;

        opacity: 0;
        transform: translateY(100px);
    }

    .postCreator {
        box-shadow: @card-shadow;
        -webkit-box-shadow: @card-shadow;
        -moz-box-shadow: @card-shadow;
    }
}