@import "/./src/assets/scss/variables.scss";
@import "/./src/assets/scss/breakpoints.scss";

.mat-tab-links {
    .card {
        background: none;
        border: none;
        box-shadow: none;
        border-radius: 0;

        .mat-card {
            background: none;
            padding: 0;
            
            @include respond-to('lg') {
                margin: 0 0 20px 10px;
                display: flex;
                flex-wrap: wrap;
            }
            
            @include respond-below('md') {
                margin: 0 0 10px 0;
                display: block;
            }

            &:not([class*="mat-elevation-z"]) {
                box-shadow: none;
            }
        }

        .mat-card-header {
            display: flex;
            align-items: center;
            background: $white;
            padding: 10px 30px 10px 0;
            border-radius: 5px;
            
            @include respond-below('sm') {
                padding: 8px 15px 8px 0;
                margin-bottom: 10px;
            }

            @include respond-to('lg') {
                // transform: skew(-15deg);
                margin-right: 10px;
            }

            @include respond-to('md') {
                width: calc(33.3333% - 20px);
                height: 73px;
                margin: 0 20px 20px 0;
                padding: 0 30px 0 0;
            }
            
            @include respond-below('md') {
                width: 100%;
                height: auto;
                margin: 0 0 10px 0;
                padding: 0 15px 15px 0;
            }

            @include respond-to('xl') {
                width: 379px;
                height: 73px;
                margin: 0 20px 0 0;
                padding: 0 30px 0 0;
            }

            // > div {
            //     @media only screen and (min-width: $lg) {
            //         transform: skew(15deg);
            //     }
            // }
        }

        .mat-card-header-text {
            margin: 0;
        }

        .mat-card-title {
            margin-bottom: 5px;
            @include font-style($nominee-regular,12px,12px,normal);
            color: $grey-5;

            @media only screen and (min-width: $xlg) {
                font-size: 16px;
                line-height: 16px;
            }
        }

        .mat-card-subtitle {
            @include font-style($nominee-bold,15px,15px,normal);
            color: $blue;
            margin: 0 0 2px;

            @media only screen and (min-width: $xlg) {
                font-size: 20px;
                line-height: 20px;
            }

            &:not(:first-child) {
                margin: 0 0 2px;
            }
        }

        .mat-card-avatar {
            width: 25px;
            height: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #dde2eb;
            border-radius: 5px;
            margin: 0 10px;

            @media only screen and (min-width: $xlg) {
                width: 33px;
                height: 33px;
                margin: 0 20px 0 40px;
            }
        }

        .mat-icon, svg {
            color: $pink;
        }

        .mat-icon {
            height: auto;
            width: auto;
            font-size: 14px;
            // background: #66cf92;

            @media only screen and (min-width: $xlg) {
                font-size: 20px;
            }
        }

        .project {
            width: 12px;
            height: 12px;

            @media only screen and (min-width: $xlg) {
                width: 20px;
                height: 20px;
            }
        }

        .volume {
            width: 16px;
            height: 16px;

            @media only screen and (min-width: $xlg) {
                width: 24px;
                height: 24px;
            }
        }
    }
}

