@import "../bootstrap/variables";

.blog-show-hero {
    width: 100%;
    height: 480px;

    &__mask {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(1deg, rgba(18, 31, 62, 0.9) 0%, rgba(18, 31, 62, 0) 100%);
        backdrop-filter: blur(12px);

        .dark-mode & {
            background: linear-gradient(1deg, rgba(170, 184, 197, 0.90) 0%, rgba(170, 184, 197, 0.00) 100%);
        }
    }
}

.blog-show-cover-image {
    width: 100%;
    height: 560px;

    @media (max-width: $screen-sm-max) {
        height: 360px;
    }
}


.blog-show-body {
    position: relative;
    top: -368px;
    margin-bottom: -368px;
    z-index: 5;

    &__header {
        position: relative;
        top: -78px;
        margin-bottom: -78px;

        &-mask {
            position: absolute;
            top: 8px;
            left: 32px;
            right: 32px;
            bottom: -8px;
            border-radius: 32px;
            opacity: 0.5;
            background: var(--white);
        }

        &-first-item-line {
            border-left: 1px solid var(--gray-200);

            @media (max-width: $screen-sm-max) {
                border: 0;
            }
        }
    }
}


.post-author-info-card {

    &__mask {
        position: absolute;
        inset: 8px;
        bottom: -8px;
        border-radius: 16px;
        opacity: 0.5;
        background: var(--white);
        z-index: 1;
    }

    &__secondary-img {
        width: 308px;
        height: 316px;
        bottom: 0;
        top: -40px;
        margin-bottom: -40px;

        @media (max-width: $screen-sm-max) {
            bottom: auto;
            top: auto;
            margin-bottom: 0;
            width: 100%;
        }
    }

    &__details {
        width: calc(100% - 332px);

        &-about {
            height: 84px;
            overflow: hidden;
        }

        @media (max-width: $screen-sm-max) {
            width: 100%;
        }
    }
}

.post-bottom-fixed-card {
    position: fixed;
    bottom: -150%;
    left: 0;
    right: 0;
    padding: 16px 0;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.02);
    transition: all .5s ease;
    z-index: 50;

    &.show {
        bottom: 0;
    }

    &__post-img {
        width: 68px;
        height: 48px;
    }

    &__progress {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: transparent;
        z-index: 55;

        .progress-line {
            width: 0;
            height: 100%;
            background-color: var(--primary);
        }
    }
}

.author-random-post-image {
    width: 68px;
    height: 48px;
}