.post_attachments {
    box-sizing: border-box;

    position: relative;

    display: flex;

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

    width: 100%;
    max-width: 100%;

    overflow-x: hidden;

    transition: all 150ms ease-in-out;

    .bear-react-carousel__root {
        font-family: "DM Mono", monospace;

        border-radius: 12px;

        overflow: hidden;

        background-color: var(--background-color-primary);

        .bear-react-carousel__pagination-group {
            top: 0;
            bottom: unset;

            margin-top: 10px;
        }

        .bear-react-carousel__pagination-group:not([data-page-content="true"]) .bear-react-carousel__pagination-button[data-active] {
            background-color: var(--colorPrimary);
        }
    }

    .attachment {
        position: relative;

        display: flex;
        flex-direction: column;

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

        width: 100%;
        height: 50vh;

        max-height: 700px;

        .plyr {
            width: 100%;
            height: 100%;
        }

        // fixtures for media content
        img {
            width: 100%;
            height: 100%;

            user-select: none;
            -webkit-user-drag: none;

            object-fit: contain;
        }

        video {
            height: 100%;
            width: 100%;

            user-select: none;
            -webkit-user-drag: none;

            object-fit: contain;
        }

        audio {
            width: 100%;
            height: 100%;

            user-select: none;
            -webkit-user-drag: none;
        }
    }
}

.plyr__controls {
    position: absolute;
    z-index: 60;

    padding: 10px 30px !important;

    .plyr__control {
        &:hover {
            background-color: var(--colorPrimary);
        }

        svg {
            color: white;

            margin: 0;
        }
    }

    .plyr__progress,
    .plyr__volume {
        input {
            color: var(--colorPrimary);
        }
    }
}