$facebook-blue: #1877F2;
$text-color: #111827;
$light-text-color: #606770;
$light-bg: #f0f2f5;
$white-bg: #fff;
$border-color: #e0e0e0;

.meta-desktop-screen {
    width: 100%;
    height: 100%;
    background: $light-bg; 
    overflow-y: auto;
    font-size: 6.5px;
    color: $text-color;

    &__post-card {
        background: $white-bg;
        margin-left: 3rem; 
        margin-right: 3rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.2); 
        border-radius: 4px; 
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px 0px;
    }

    &__content{
        padding: 0 10px 8px 10px;
        white-space: pre-wrap;
    }

    &__profile-info {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    &__avatar-container {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: $facebook-blue;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: $white-bg;
    }

    &__profile-name {
        font-weight: bold;
        font-size: 6.5px;
        .fa-circle-check {
            color: $facebook-blue;
            font-size: 6.5px;
        }
    }

    &__post-meta {
        font-size: 6.5px;
        color: $light-text-color;
    }

    &__actions-menu {
        display: flex;
        gap: 8px;
        font-size: 9px;
        color: $light-text-color;
    }

    &__content-wrapper {
        padding: 0 10px 8px 10px;
        white-space: pre-wrap;
    }

    &__stats {
        padding: 4px 0px;
        display: flex;
        justify-content: space-between;
        font-size: 6.5px;
        color: #65676B; 
    }

    &__actions-bar {
        display: flex;
        justify-content: space-between;
        padding-top: 4px;
        border-top: 1px solid $border-color;
    }

    &__action-item {
        display: flex;
        align-items: center;
        gap: 2px;
        color: $light-text-color;
        font-size: 6.5px;
        flex-basis: 33%; 
        justify-content: center; 
    }
}