.post_attachments {
    display: flex;

    width: 100%;

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

    transition: all 0.2s ease-in-out;

    .carousel-root {
        position: relative;

        font-family: "DM Mono", monospace;

        height: 100%;
        width: 100%;

        .carousel {
            display: flex;
            background-color: black;
            border-radius: 8px;

            .slider-wrapper {
                align-self: center;
            }
        }

        .control-prev,
        .control-next {
            color: #ffffff;

            height: 100%;
            width: 30px;

            opacity: 0;

            transition: all 150ms ease-in-out;

            &:hover {
                opacity: 1;
                width: 50px;
            }

            &:active {
                transform: scale(0.5);
                background-color: transparent;
            }

            ::before {
                font-size: 20px;
            }
        }

        .control-arrow {
            z-index: 50;
        }

        .control-dots {
            top: 0;
            height: fit-content;
            margin: 0;

            &:hover {
                .dot {
                    height: 8px;
                    width: 20px;
                }
            }

            .dot {
                transition: all 100ms ease-in;

                height: 3px;
                width: 15px;

                border-radius: 2px;

                box-shadow: none;
            }
        }

        .carousel-status {
            padding: 10px;
        }
    }

    .attachment {
        display: flex;
        flex-direction: column;

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

        width: 100%;
        height: 100%;

        max-height: 50vh;

        .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%;

            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);
        }
    }
}