@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-post-zoom{
    @include d-flex();
    margin-left: -15px;
    margin-right: -15px;
    &.column-3{
        .dnetor-post-zoom-item{
            max-width: 25%;
            @include flex(0 0 25%);
            &.active{
                max-width: 50%;
                @include flex(0 0 50%);
            }
        }
    }
    &.column-4{
        .dnetor-post-zoom-item{
            max-width: 16.66%;
            @include flex(0 0 16.66%);
            &.active{
                max-width: 49.98%;
                @include flex(0 0 49.98%);
            }
        }
    }
    &.column-5{
        .dnetor-post-zoom-item{
            max-width: 12.5%;
            @include flex(0 0 12.5%);
            &.active{
                max-width: 50%;
                @include flex(0 0 50%);
            }
        }
    }
    .dnetor-post-zoom-item{
        position: relative;
        cursor: pointer;
        padding-left: 15px;
        padding-right: 15px;
        @include transition(max-width .5s);
        &.active{
            .dnetor-post-content,
            ul.post-categories{
                opacity: 1;
                @include transition(opacity 2.5s);
            }
        }
    }

    .dnetor-post-content{
        position: absolute;
        bottom: 45px;
        left: 45px;
        right: 45px;
        background-color: rgba(0,0,0,0.9);
        padding: 20px;
        border-radius: 8px;
        opacity: 0;
        *,* a{
            color: #fff;
        }
    }

    .dnetor-post-title{
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0;
        a:hover{
            color: $accent_color;
        }
    }

    .dnetor-post-meta{
        margin-bottom: 12px;
        @include d-flex();
        @include align-items-center();
        @include flex-wrap();
    }

    .dnetor-post-excerpt{
        margin-top: 18px;
    }

    .dnetor-post-date{
        position: relative;
        margin-left: 20px;
        &:before{
            content: '';
            width: 5px;
            height: 5px;
            display: inline-block;
            background-color: #999;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            @include transform(translateY(-50%));
            left: -12px;
        }
    }

    .dnetor-post-thumbnail-inner{
        position: relative;
    }

    .dnetor-post-thumbnail{
        margin-bottom: 20px;
        border-radius: 8px;
        img{
            border-radius: 8px;
            width: 100%;
            height: 450px;
            object-fit: cover;
        }
    }

    ul.post-categories{
        @include d-inline-flex;
        @include align-items-center();
        @include flex-wrap();
        gap: 10px;
        list-style: none;
        padding-left: 0;
        font-weight: 500;
        margin-bottom: 15px;
        position: absolute;
        top: 15px;
        left: 15px;
        opacity: 0;
        &.cat-label li{
            &:after {
                content: none;
            }
            a{
                padding: 5px 12px 5px 26px;
                border: 1px solid #eee;
                background-color: #fff;
                border-radius: 30px;
                font-size: 15px;
                color: $text_color;
                @include transition(all .3s);
                display: inline-block;
                position: relative;
                &:before {
                    content: '';
                    width: 8px;
                    height: 8px;
                    background-color: $accent_color;
                    position: absolute;
                    left: 12px;
                    top: 50%;
                    @include transform(translateY(-50%));
                    border-radius: 50%;
                }
                &:hover{
                    color: #fff;
                    background-color: $accent_color;
                    border-color: $accent_color;
                    &:before{
                        background: #fff;
                    }
                }
            }
        }
        li{
            &:after{
                content: ',';
                padding-right: 5px;
            }
            &:nth-last-child(2):after,
            &:last-child:after{
                content: none;
            }
            a{
                color: $accent_color;
            }
        }
    }

    .dnetor-post-author{
        img{
            @include border-radius(50%);
            width: 32px;
            height: 32px;
            object-fit: cover;
        }
        a{
            margin-left: 10px;
            &:hover{
                color: $accent_color;
            }
        }
    }
}

@media (max-width: 767px) {
    .dnetor-post-zoom{
        display: block;
        &.column-3,
        &.column-4,
        &.column-5{
            .dnetor-post-zoom-item{
                max-width: 100%;
                @include flex(0 0 100%);
                &.active{
                    max-width: 100%;
                    @include flex(0 0 100%);
                }
                .dnetor-post-content,
                ul.post-categories{
                    opacity: 1;
                }
            }
        }
    }
}