// ================================================================================================
// 	File Name: page-user-profile.scss
// 	Description: Page user profile SCSS.
// 	----------------------------------------------------------------------------------------------
// 	Item Name: Frest HTML Admin Template
// 	Version: 1.0
// 	Author: PIXINVENT
// 	Author URL: http://www.themeforest.net/user/pixinvent
// ================================================================================================

// Core variables and mixins overrides
@import "../bootstrap/functions";
@import "../core/variables/variables";
@import "../bootstrap/variables";
// Overrides user variable
@import "../core/variables/components-variables";

/* user profile page css */
/*-----------------------*/
.page-user-profile{
    // user profile images wrapper
    .user-profile-images{
        position: relative;
        // user timeline image positioning
        .user-timeline-image{
            min-height: 150px;
            object-fit: cover;
        }
        // user profile image positioning
        .user-profile-image{
            position: absolute;
            left: 20px;
            bottom: -65px;
            box-shadow: 0px 0px 20px 0px rgba($black,0.41);
        }
        // user feed card image in box model
        .user-profile-card-image{
            min-height: 190px;
            object-fit: cover;
            min-width: 110px;
        }
        // user feed stories box model
        .user-profile-stories-image{
            max-height: 300px
        }
    }
    // user profile text positioning
    .user-profile-text{
        position: absolute;
        bottom: 100px;
        left: 190px;
        color: $white;
        .profile-text-color{
            color: $white;
        }
    }
    // user profile nav tabs positioning
    .user-profile-nav{
        padding-left: 12rem;
        .nav-item{
            .nav-link{
                i{
                    margin-right: 0 !important;
                }
            }
        }
    }
    .user-profile-ellipsis{
    /* user profile text ellipsis */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    // user profile stories
    .user-profile-stories{
        &.swiper-container{
            .swiper-slide {
                width: auto !important;
                cursor: pointer;
                position: relative;
                .user-swiper-text{
                    color: $white;
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                }
            }
        }
    }
    // page specific card header css
    .card-header{
        padding: 1.7rem 1.7rem 0;
    }
    // page specific card footer css
    .card-footer{
        padding: 0 1.7rem 1.7rem;
        font-size: 1rem;
    }

    // Media query for sm screen
    @media only screen and (max-width: 767px){
      .user-profile-images{
        .user-profile-image{
          /* user profile image positioning */
                height: 100px;
                width: 100px;
                top: 50%;
                left: 50%;
                margin-left: -45px;
                margin-top: 30px;
                box-shadow: 0px 0px 20px 0px rgba($black,0.41);
            }
        }
        .user-profile-text{
        /* user profile text positioning */
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: 50px;
            color: $headings-color !important;
            text-align: center !important;
            .profile-text-color{
                color: $headings-color;
            }
        }
        .user-profile-nav{
        /* user profile nav tabs positioning */
            padding-left: 0rem;
            padding-top: 8rem;
        }
    }
}