// _card.scss

/*Box Shadow*/
%col-box-shadow {
    border: 1px solid $koala;
    border-radius: 4px;

    &:hover {
        box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

}

.contact-support-icon{
  height: 10vh;
}

.title-space {
    padding-top: 60px;
}

.section-title {
    color: $bluejay;
    line-height: 20px;
    margin: 0;
    padding-bottom: 5px;
}

.anchor-link-style {
    background: url("../images/arrow-blue-right.svg") no-repeat right;
    font-weight: $font-weight-bold;
    font-size: 11px;
    line-height: 1.38;
    padding-right: 18px;
    text-transform: uppercase;
}

/*Browse Topics Column and Common Solutions, Workstation Updates, Product Guides*/
.browse-topics-bottom-col{
    margin-left: 17% !important;
}
.browse-topics-col,
.workstation-updates-col,
.product-guide {
    @extend %col-box-shadow;

    float: left;
    margin: 25px 25px 0 0;
    width: calc(33.33333% - 18px);

    &:last-child {
        margin-right: 0px;
    }

    &:hover,
    &:focus {
        text-decoration: none;
    }

    &:nth-child(3n+3) {
        margin-right: 0px;
    }

}

/*Common Solutions and Search Results  Style*/
.common-solutions-col,
.search-result {
    @extend %col-box-shadow;

    background-color: $white;
    margin-top: 20px;
    padding: 20px 25px;
    text-align: left;

    .section-title {

        a {
            text-decoration: none;
        }

    }

    &:hover,
    &:focus {
        text-decoration: none;
    }

    .common-solutions-description {
        margin-bottom: 10px;
    }

    .post-category-link,
    .faq-category-link {
        
        span {
            border-left: 1px solid $timberwolf;
            color: $timberwolf;
            font-size: 12px;
            font-weight: $font-weight-bold;
            margin-left: 8px;
            padding-left: 8px;
            text-transform: uppercase;

            &:first-child {
                border-left: 0;
                margin: 0;
                padding: 0;
            }
            
        } 

    }

    .section-title-link {
        text-decoration: none;
    }

    &.no-results {
        margin: 30px 0 50px 0;
        padding: 50px 0 50px 0;

        &:hover {
            box-shadow: none;
        }

        .search-result-img {
            height: 45px;
            width: 45px;
        }

        h4 {
            color: $timberwolf;
        }

        p {
            color: $timberwolf;
            margin-bottom: 25px;
            padding-top: 5px;
        }

    }

}

.search-count {
    padding-right: 5px;
}

/*Workstation Updates Style*/
.workstation-updates-col {
    padding: 25px;

    &:nth-child(3n+3) {
        margin-right: 0px;
    }

    &:focus,
    &:hover {
        text-decoration: none;
    }

    .workstation-updates {
        border-radius: 1px;
        border: 1px solid $koala;
        display: table;
        margin-bottom: 15px;

        .post-image {
            display: table-cell;
            vertical-align: middle;

            img {
                height: 100%;
                max-width: 100%;
                max-height: 121px;
                width: 100%;
            }
            
        }

    }

    .workstation-updates-date {
        color: $timberwolf;
        font-size: 12px;
        font-weight: $font-weight-bold;
        text-transform: uppercase;
    }

    .workstation-updates-description {
        max-height: 104px;
        margin-bottom: 10px;
        overflow: hidden;
    }

}

/*Single Post Page Style*/
.category-single-post-page {

    .single-post-date {
        color: $timberwolf;
        font-size: 12px;
        font-weight: $font-weight-bold;
        padding-top: 8px;
        text-transform: uppercase;
    }
    
    .single-post-description {
        padding-top: 20px; 

        img {
            height: 100%;
            max-width: 100%;
        }

        /*WP post image right Style*/
        .alignright {
            float: right;
            margin-left: 20px;
        }

        /*WP post image left Style*/
        .alignleft {
            float: left;
            margin-right: 20px;
        }
    }

    .single-post-image {
        padding-top: 10px;
    }

}

/*Browse Topics Column Style*/
.browse-topics-col {
    
    .section-heading {
        color: $rhino;
        font-size: 16px;
        margin: 0;
    }

    .browse-topics-icon {
        height: 45px;
        margin: 7px 0 14px;
    }
    
    .browse-topics-link {
        padding: 25px 0;
        text-decoration: none;

        &:hover {
            text-decoration: none;
        }

    }

}

/*Product Guides Style*/
.product-guide {
    background-image: url("../images/bg-product-default.svg");
    background-repeat: no-repeat;
    background-position: right bottom;
    min-height: 200px;
    padding: 25px;

    &.accounting {
        background-image: url("../images/bg-product-accounting.svg");
    }

    &.digital {
        background-image: url("../images/bg-product-digital.svg");
    }

    &.physical {
        background-image: url("../images/bg-product-physical.svg");
    }

    &.analytics {
        background-image: url("../images/bg-product-analytics.svg");
    }

    .product-post-title {
        line-height: 1.33;
        margin-top: 5px;
    }
    
    .product-post-subtitle {
        color: $timberwolf;
        font-size: 12px;
        font-weight: $font-weight-bold;
        line-height: 1.17;
        text-transform: uppercase;
    }

}

/*Contact and Support Style*/
.contact-support {
    margin: 15px -12px 0;

    .section {
        display: flex;
        flex-wrap: wrap;
        padding: 0;

        .section-heading {
            color: $rhino;
            font-size: 16px;
            margin: 12px 0;
        }

        .contact-text {
            @extend %col-box-shadow;

            display: flex;
            flex-direction: column;
            margin: 0 12px;
            padding: 20px;
            vertical-align: top;
            width: calc(100% / 2 - 24px);
        }

    }

}

.view-more {
    padding-top: 27px;
    
    .anchor-link-style {
        text-decoration: none;
    }
    
}

/*Search Result Styles*/
.search-result-section {
    padding-bottom: 50px;

    .section-grid {
        text-align: center;

        h3 {
            padding-top: 40px;
            
        }

    }

    .search-base-grid {

        h3 {
            padding-bottom: 10px;
        }

    }

    .search-browse-link {
        color: $bluejay;
        font-size: 16px;
        font-weight: $font-weight-bold;
        line-height: normal;
        padding-top: 10px;
        text-decoration: none;

        &:focus,
        &:hover {
            text-decoration: none;
        }

    }

    .workstation-updates-col,
    .product-guide {
        display: inline-block;
        float: none;
        text-align: left;
        vertical-align: top;
    }

}

/*Load More Link Style*/
.load-more {

    a {
        font-weight: $font-weight-bold;
        text-decoration: none;
    }

}

/*For ELlipsis based on height*/
.add-ellipsis {
    overflow: hidden;
}

.multiline {

    @at-root {

        .common-solutions-description {

            .add-ellipsis {
                @include ellipsis(40px);
            }

        }

        .workstation-updates-description {

            .add-ellipsis {
                @include ellipsis(80px);
            }

        }

        .common-solutions-description,
        .workstation-updates-description {
            
            p { 
                margin: 0;
            }

        }

    }

    .workstation-updates-description {

        .add-ellipsis {
            @include ellipsis(60px);
        }

    }

}

.product-guide {

    .add-ellipsis {
        @include ellipsis(95px);
    }

}