:root {
    --post-card-text: #0D0D0D;
    --post-card-muted: #4C555E;
    --post-card-avatar-border: #4C555E;

    --post-card-bage-bg: #4C555E;
    --post-card-bage-text: #fff;

    --post-card-button-bg: #F0F0F0;
    --post-card-button-hover-bg: #E6E6E6;
    --post-card-button-active-bg: #D9D9D9;

    --post-card-follow-svg--subscribe: #3276FF;
    --post-card-follow-bg--subscribe: #EAF1FF;
    --post-card-follow-hover-bg--subscribe: #DCE8FF;
    --post-card-follow-active-bg--subscribe: #C8DBFF;

    --post-card-follow-svg--unsubscribe: #4C555E;
    --post-card-follow-bg--unsubscribe: #F0F0F0;
    --post-card-follow-hover-bg--unsubscribe: #E6E6E6;
    --post-card-follow-active-bg--unsubscribe: #D9D9D9;

    --post-card-menu-bg: #fff;
    --post-card-menu-border: #F0F0F0;
    --post-card-menu-shadow-color: rgb(0 0 0 / 14%);
    --post-card-menu-item-hover-bg: #F5F6F7;
    --post-card-menu-item-active-bg: #EBEDEF;

    --post-card-tooltip-bg: #202529;
    --post-card-tooltip-text: #fff;
}

html[theme="dark"] {
    --post-card-text: #E6E6EE;
    --post-card-muted: #9A9AA8;
    --post-card-avatar-border: #777;

    --post-card-bage-bg: #5B5F78;
    --post-card-bage-text: #fff;

    --post-card-button-bg: #2B2A3A;
    --post-card-button-hover-bg: #363548;
    --post-card-button-active-bg: #414055;

    --post-card-follow-svg--subscribe: #8FB3FF;
    --post-card-follow-bg--subscribe: #273A63;
    --post-card-follow-hover-bg--subscribe: #2C3550;
    --post-card-follow-active-bg--subscribe: #354260;

    --post-card-follow-svg--unsubscribe: #9A9AA8;
    --post-card-follow-bg--unsubscribe: #2C2A3C;
    --post-card-follow-hover-bg--unsubscribe: #363348;
    --post-card-follow-active-bg--unsubscribe: #413D54;

    --post-card-menu-bg: #3A3850;
    --post-card-menu-border: #2B2A3A;
    --post-card-menu-shadow-color: rgb(0 0 0 / 35%);
    --post-card-menu-item-hover-bg: #2B2A3A;
    --post-card-menu-item-active-bg: #4A4761;

    --post-card-tooltip-bg: #3A3850;
    --post-card-tooltip-text: #fff;
}

article.post-card {
    container-type: inline-size;
    container-name: post-card;
}

.post-card__meta_flex-wrapper {
    display: flex;
}

header .post-card__meta {
    container-type: inline-size;
    container-name: post-header;

    display: grid;
    grid-template-columns: 1fr max-content;
    justify-content: space-between;
    row-gap: 12px;

    .post-card__meta_author-category {
        display: flex;
        column-gap: 12px;

       > .post-card__meta_flex-wrapper {
           flex-direction: column;
       }

        .post-card__meta_flex-wrapper > .post-card__meta_flex-wrapper {
            align-items: center;
        }

        .post-card__meta_avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border: 2px solid var(--post-card-avatar-border);
            border-radius: 50%;
            padding: 3px;

            > a {
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                overflow: hidden;
            }

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }

        .post-card__meta_name {
            display: flex;
            align-items: center;
            color: var(--post-card-text);
            font-size: 15px;
            font-weight: 600;

            .membership-badge {
                background:
                        linear-gradient(
                                var(--post-card-bage-text),
                                var(--post-card-bage-text)
                        )
                        center / calc(100% - 8px) calc(100% - 8px)
                        no-repeat;
                color: var(--post-card-bage-bg);
            }
        }

        .post-card__meta_category {
            font-size: 13px;

            .post-card__category-link {
                display: flex;
                align-items: center;
                column-gap: 6px;
                color: var(--post-card-muted);
            }
        }
    }

    .post-card__meta_follow-menu {
        display: flex;
        column-gap: 8px;
        align-items: center;

        button.post-card__meta_follow {
            order: 0;
            font-size: 13px;
            font-weight: 600;
            line-height: 16px;
            color: var(--post-card-follow-svg--subscribe);
            background-color: var(--post-card-follow-bg--subscribe);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 32px;
            width: 32px;
            height: 32px;
            padding: 0;
        }

        button.post-card__meta_follow:hover {
            background-image: none;
            background-color: var(--post-card-follow-hover-bg--subscribe);
        }
        button.post-card__meta_follow:focus,
        button.post-card__meta_follow:active {
            background-image: none;
            background-color: var(--post-card-follow-active-bg--subscribe);
        }

        button.post-card__meta_follow[data-action="unsubscribe"] {
            color: var(--post-card-follow-svg--unsubscribe);
            background-color: var(--post-card-follow-bg--unsubscribe);
        }
        button.post-card__meta_follow[data-action="unsubscribe"]:hover {
            background-color: var(--post-card-follow-hover-bg--unsubscribe);
        }
        button.post-card__meta_follow[data-action="unsubscribe"]:focus,
        button.post-card__meta_follow[data-action="unsubscribe"]:active {
            background-color: var(--post-card-follow-active-bg--unsubscribe);
        }

        .post-card__meta_follow > div {
            display: flex;
        }

        .post-card__meta_follow .post-card__follow-plus,
        .post-card__meta_follow .post-card__follow-check [stroke] {
            stroke: currentColor;
        }

        .post-card__meta_follow .post-card__follow-check [fill] {
            fill: currentColor;
        }

        .post-card__meta_follow .post-card__follow-check,
        .post-card__meta_follow[aria-pressed="true"] .post-card__follow-plus {
            display: none;
        }

        .post-card__meta_follow[aria-pressed="true"] .post-card__follow-check {
            display: block;
        }

        :is(.post-card__meta_follow, .js-faces-hide-author)[aria-disabled="true"] {
            opacity: .6;
        }

        :is(.post-card__meta_follow, .js-faces-hide-author)[aria-disabled="true"].is-auth-tooltip-open::after {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 10px);
        }

        @media (max-width: 767px), (hover: none), (pointer: coarse) {
            :is(.post-card__meta_follow, .js-faces-hide-author)[aria-disabled="true"] {
                position: relative;
                overflow: visible;
            }

            :is(.post-card__meta_follow, .js-faces-hide-author)[aria-disabled="true"]::after {
                content: attr(data-tooltip);
                position: absolute;
                top: calc(100% + 10px);
                right: 0;
                bottom: auto;
                left: auto;
                transform: none;

                display: block;
                width: auto;
                padding: .4rem .8rem;
                border-radius: .4rem;
                background-color: rgba(17, 17, 17, .8);
                box-shadow: 0 0 14px rgba(0, 0, 0, .1);
                color: #fff;
                font-size: 13px;
                font-style: normal;
                line-height: 1.25rem;
                text-align: left;
                white-space: pre;

                z-index: 10;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transition: opacity .3s, visibility .3s;
            }

            :is(.post-card__meta_follow, .js-faces-hide-author)[aria-disabled="true"].is-auth-tooltip-open::after {
                transform: none;
            }
        }

        .post-card__meta_menu {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 28px;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            background: transparent;
            color: var(--post-card-muted);
            cursor: pointer;
            transition: all .3s ease;
        }
        .post-card__meta_menu:hover {
            background-color: var(--post-card-button-bg);
        }
        .post-card__meta_menu:active {
            background-color: var(--post-card-button-hover-bg);
        }

        .post-card__menu-dropdown {
            position: relative;
            display: flex;
            flex: none;
        }

        .post-card__meta_menu[aria-expanded="true"] {
            background: var(--post-card-button-bg);
            border-radius: 8px;
        }

        .post-card__menu-panel {
            position: absolute;
            top: calc(100% + 6px);
            right: 0;
            z-index: 30;

            width: 264px;
            max-width: calc(100vw - 32px);
            padding: 4px;

            background: var(--post-card-menu-bg);
            border: 1px solid var(--post-card-menu-border);
            border-radius: 12px;
            box-shadow: 0 8px 24px var(--post-card-menu-shadow-color);
        }

        .post-card__menu-panel[hidden] {
            display: none;
        }

        .post-card__menu-panel:not([hidden]) {
            animation: post-menu-appear 160ms ease-out;
        }

        .post-card__menu-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 14px;

            border: 0;
            border-radius: 8px;
            background: transparent;
            box-shadow: none;

            font-family: inherit;
            font-size: 15px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            color: var(--post-card-text);
            cursor: pointer;
        }

        .post-card__menu-item:hover {
            background: var(--post-card-menu-item-hover-bg);
        }
        .post-card__menu-item:active,
        .post-card__menu-item:focus {
            background: var(--post-card-menu-item-active-bg);
        }

        .post-card__menu-item > svg {
            flex: none;
            color: var(--post-card-muted);
        }
    }

    .post-card__meta_data {
        font-size: 12px;
        display: flex;
        align-items: center;

        .post-date {
            position: relative;
            width: fit-content;
        }

        .post-date__trigger {
            color: var(--post-card-muted);
            list-style: none;
            cursor: pointer;
            text-underline-offset: 3px;
        }

        .post-date__tooltip {
            position: absolute;
            top: calc(100% + 12px);
            left: 0;
            z-index: 20;

            display: block;
            width: max-content;
            padding: 8px 12px;

            background: var(--post-card-tooltip-bg);
            color: var(--post-card-tooltip-text);
            border-radius: 8px;

            font-size: 14px;
            line-height: 20px;
            font-weight: 400;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(-4px);
            transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
        }

        .post-date__tooltip::before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 20px;

            border-right: 7px solid transparent;
            border-bottom: 7px solid var(--post-card-tooltip-bg);
            border-left: 7px solid transparent;
        }

        .post-date[open] > .post-date__tooltip {
            animation: post-date-appear 160ms ease-out;
            text-decoration: underline dotted;
        }

        .post-date:hover > .post-date__tooltip,
        .post-date:focus-within > .post-date__tooltip {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .post-date__tooltip::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 0;
            width: 100%;
            height: 12px;
        }
    }

    .post-card__meta_data:after {
        content: "";
        flex: 0 0 2px;
        height: 2px;
        margin-inline: 8px;
        border-radius: 50%;
        background-color: var(--post-card-muted);
    }
}

@keyframes post-date-appear {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes post-menu-appear {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-date__tooltip {
        transition: none;
    }

    .post-date[open] > .post-date__tooltip {
        animation: none;
    }

    .post-card__menu-panel:not([hidden]) {
        animation: none;
    }
}


.toasts .toast.error {
    background: #1F2328;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 120%;
}

.toasts .toast.error:before {
    content: "!";
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F04438;
    color: #fff;
    font: 700 15px/1 Arial, sans-serif;
}

@container post-card (width < 428px) {
    header .post-card__meta {
        grid-template-columns: 44px minmax(0, 1fr) max-content;
        grid-template-areas:
            "avatar author   actions"
            "avatar category actions"
            "date   date     date";
        gap: 0 12px;
        align-items: center;

        .post-card__meta_author-category,
        .post-card__meta_flex-wrapper {
            display: contents;
        }

        .post-card__meta_avatar {
            grid-area: avatar;
            align-self: center;
        }

        .post-card__meta_flex-wrapper > a {
            grid-area: author;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .post-card__meta_category {
            grid-area: category;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .post-card__meta_follow-menu {
            grid-area: actions;
            align-self: center;
        }

        .post-card__meta_data {
            grid-area: date;
            margin-block-start: 12px;
        }

        .post-card__meta_data::after {
            content: none;
        }
    }
}