@import "styles/_typography.scss";
@import "styles/_mixins.scss";

.blog {
    &-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 64px;
    }
    &__tag-button {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 20px;
        border-radius: 4px;
        border: 1px solid var(--Grey);
        opacity: 0.6;
        transition: 0.5s;
        &:hover {
            opacity: 1;
            color: var(--Blue-purple);
            border: 1px solid var(--Blue-purple);
        }
        &.active {
            pointer-events: none;
            opacity: 1;
            color: var(--White);
            border: none;
            background: var(--Purple-gradient);
        }
    }

    &-posts {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        li {
            flex: 0 1 calc(100% / 3 - 20px / 1.5);
        }
    }

    &-post-item {
        border-radius: 8px;
        border: 1px solid var(--Grey);
        background: var(--White);
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        height: 100%;
        transition: 0.5s;

        &__image {
            overflow: hidden;
            border-radius: 4px;

            img {
                aspect-ratio: 281/172;
                transform: scale(1);
                transition: 0.5s;
            }
        }
        .description2 {
            transition: 0.5s;
            margin-bottom: 8px;
        }

        &__body {
            display: flex;
            flex-direction: column;
            gap: 24px;
            strong {
                font-weight: 500;
            }
            &-tags {
                display: flex;
                gap: 8px;
            }
            .body2 {
                opacity: 0.6;
                position: relative;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &-info {
                display: flex;
                gap: 16px;
                &-item {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    opacity: 0.7;
                }
            }
        }
        &:hover {
            box-shadow: 0px 16px 48px -16px rgba(59, 44, 177, 0.16);
            .blog-post-item__image img {
                transform: scale(1.05);
            }
            .description2 {
                color: var(--Blue-purple);
            }
        }
    }
    &-pagination {
        padding: 16px;
        border-radius: 8px;
        border: 1px solid var(--Grey);
        width: fit-content;
        margin: 64px auto 0;
        ul {
            display: flex;
            gap: 8px;
            li {
                button {
                    @include tag-text;
                    border-radius: 4px;
                    height: 40px;
                    width: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: none;
                    opacity: 0.6;
                    transition:
                        0.5s,
                        border 0.1s;
                    &:hover {
                        opacity: 1;
                        background: none;
                        color: var(--Blue-purple);
                        border: 1px solid var(--Blue-purple);
                    }
                    &.Mui-selected {
                        pointer-events: none;
                        color: var(--White);
                        opacity: 1;
                        background: var(--Purple-gradient);
                    }

                    &.MuiPaginationItem-previousNext {
                        // padding: 0 24px;
                        display: flex;
                        width: fit-content;
                        align-items: center;
                        gap: 8px;
                        &:hover {
                            border: none;
                        }
                    }

                    &.blog-pagination__ellipsis {
                        pointer-events: none;
                    }
                    &.blog-pagination__prev svg {
                        transform: scale(-1, 1);
                    }
                }

                &:first-child {
                    .MuiPaginationItem-previousNext::after {
                        @include link;
                        font-family: SpaceGrotesk-Medium, sans-serif;
                        content: "Previous page";
                    }
                }

                &:last-child {
                    .MuiPaginationItem-previousNext::before {
                        @include link;
                        font-family: SpaceGrotesk-Medium, sans-serif;
                        content: "Next page";
                    }
                }
            }
        }
    }

    @include w($lg) {
        &-posts {
            li {
                flex: 0 1 calc(100% / 2 - 20px / 2);
            }
        }
    }
    @include w($sm) {
        &-posts {
            li {
                flex: 0 1 100%;
            }
        }
        &-post-item {
            &__body {
                &-info {
                    &-item {
                        font-size: 12px;
                    }
                }
            }
        }
        &-pagination {
            ul {
                li {
                    &:first-child {
                        .MuiPaginationItem-previousNext::after {
                            content: "";
                        }
                    }

                    &:last-child {
                        .MuiPaginationItem-previousNext::before {
                            content: "";
                        }
                    }
                }
            }
        }
    }
}

• [D] BlogTitle
• [D] CurrentPost
• [D] Posts
• [F] index.jsx
  Delete
• [F] mockData.js
  Delete
• [F] style.scss
  Delete