/* General Styles */
.pgcu-posts {
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
    overflow: hidden;
}

/* Header style */
.pgcu-posts__header {
    margin:0 0 30px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
    text-align: left !important;
    @include m(middle){
        text-align: center !important;
    }
    @include m(right){
        text-align: right !important;
    }
    h2 {
        font-size: var(--pgcu-headerFontSize);
        color: var(--pgcu-headerFontColor) !important;
        font-weight: 500;
        margin: 0 !important;
    }
}

/* Post card */
.pgcu-post{
    @include e(img){
        > a{
            display: block;
            line-height: 0;
            img{
                margin: 0;
            }
        }
        @include e(upper-content){
            position: absolute;
            box-sizing: border-box;
            @include m(bottom-left){
                left: 0;
                bottom: 0;
                width: 100%;
                padding: 15px;
            }
        }
    }
    @include m(rounded-border){
        border-radius: 6px;
        .pgcu-post__img{
            position: relative;
            img{
                border-radius: 6px 6px 0 0;
                width: 100%;
            }
        }
        .pgcu-post__details{
            border: 1px solid $borderColor;
            border-top: 0 none;
            border-radius: 0 0 6px 6px;
            transition: 0.3s ease;
        }
    }
    @include e(content){
        background: #fff;
        border-radius: 6px;
    }
}

/* Carousel default */
.pgcu-carousel{
    position: relative;
    overflow: hidden;
    /* Carousel marquee effect */
    @include m("marquee"){
        .swiper-wrapper{
            transition: none !important;
        }
        &:hover{
            .swiper-wrapper{
                animation-play-state: paused;
            }
        }
        .pgcu-carousel-nav{
            display: none;
        }
    }
}

/* Carousel nav style */
.pgcu-carousel-nav {
    margin: 0 -5px;
    padding: 0 15px;

    @include e(btn) {
        width: 40px;
        height: 40px;
        border: 1px solid var(--pgcu-navBorderColor) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 5px;
        cursor: pointer;
        transition: 0.3s ease;
        background: var(--pgcu-navBgColor) !important;

        svg {
            width: 8px;
            height: 16px;
            fill: var(--pgcu-navArrowColor) !important;
        }

        &:hover {
            border-color: var(--pgcu-navBorderColorHover) !important;
            background: var(--pgcu-navBgColorHover) !important;

            svg {
                fill: var(--pgcu-navArrowColorHover) !important;
            }
        }
    }

    @include m(circle) {
        .pgcu-carousel-nav__btn {
            border-radius: 50%;
        }
    }

    @include m(bottom-left) {
        margin-top: 35px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0;
    }

    @include m(bottom-center) {
        margin-top: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    @include m(bottom-right) {
        margin-top: 35px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0;
    }

    @include m(middle) {
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
        margin: 0;
        padding: 0;
        pointer-events: none;
        .pgcu-carousel-nav__btn{
            margin: 0;
            pointer-events: all;
        }
        .pgcu-carousel-nav__btn--prev {
            margin-left: 0;
        }

        .pgcu-carousel-nav__btn--next {
            margin-right: 0;
        }
    }

    @include m(top-right) {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-bottom: 30px;
        padding: 0;
    }

    @include m(top-left) {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 30px;
        padding: 0;
    }

    @include m(top-center) {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
        padding: 0;
    }
}

/* Sortable grid */
.pgcu-post-sortable{
    @include e(nav){
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        margin: -4px -4px 36px;
        .pgcu-post-sortable__btn{
            margin: 4px;
            color: var(--pgcu-sortableBtnColor) !important;
            font-size: 14px;
            font-weight: 500;
            height: 38px;
            padding: 0 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border: 1px solid var(--pgcu-sortableBtnBorder) !important;
            border-radius: 4px;
            background: #fff;
            @include m(active){
                border-color: var(--pgcu-sortableBtnActiveBg) !important;
                color: var(--pgcu-sortableBtnActiveColor) !important;
                background: var(--pgcu-sortableBtnActiveBg) !important;
            }
        }
    }
    .pgcu-row{
        margin-top: 0;
        .pgcu-post{
            margin-top: 0;
            margin-bottom: 30px;
        }
    }
}

/* Loading effect */
.pgcu-post-loading{
    position: relative;
    &:before{
        content:"";
        position: absolute;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid #F31C1C;
        border-top-color: transparent;
        z-index: 9999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        animation: pgcu-rotate 1s linear infinite;
    }
    &:after{
        content:"";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(#fff, 0.8);
        position: absolute;
    }
}