$card-background: #fff;
$card-padding: 17px 14px;
$card-border-radius: 3px;
$card-box-shadow: 0 3px 81px 0 rgba(49,48,118,0.07);
$card-hover-box-shadow: 0 4px 16px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,204,255,0.07);

$profile-pic-size: 50px;
$profile-right-padding: 12px;

:host {
    display: block;
    width: 100%;
    overflow: hidden;
    
    text-align: left;
    background: $card-background;
    padding: $card-padding;
    box-shadow: $card-box-shadow;
    border-radius: $card-border-radius;
    transition: .15s all linear;

    &:hover {
        box-shadow: $card-hover-box-shadow;
        transform: scale(1.02);
    }
    
    section {
        header {
            position: relative;
            padding-left: $profile-pic-size + $profile-right-padding;
            margin-bottom: 18px;
            height: 51px;

            h3 {
                color: #000;
                font-size: 16px;
                line-height: 19px;
                margin: 0;
            }

            span {
                color: #000;
                display: block;
                font-size: 14px;
                line-height: 16px;
                &.gob-id {
                    opacity: .5;
                }
            }

            app-avatar-pic {
                // this needs to be moved into app-avatar-pic
                font-family: roboto;
                // font size sets the height to ~ 50px
                font-size: 18px;
                position: absolute;
                left: 0px;
            }
        }

        .loc-exp-container {
            font-size: 14px;
            line-height: 16px;

            &::after {
                display: block;
                content: "";
                clear: both;
            }

            .location {
                float: left;
                color: #000;
                opacity: 0.7;

                mat-icon {
                    font-size: 14px;
                    line-height: 16px;
                    height: 16px;
                    width: 16px;
                    margin-right: 4px;
                }
            }

            .experience {
                float: right;
                color: #00CCFF;
            }

            margin-bottom: 14px;
        }
    }

    .skills {
        margin-bottom: 14px;
        max-height: 28px;
        overflow: hidden;

        app-ta-skill-badges {
            margin-right: 4px;
        }
    }

    hr {
        border: 1px dashed #eee;
        margin: 14px 0;
    }

    footer {
        margin: -14px -14px -17px -14px;
        min-height: 50px;
    }
}