@import '~@angular/material/theming';

@mixin meta-theme($theme) {
    $primary: map-get($theme, primary);
    $primary-color: mat-color($primary, 500);
    $primary-dark: mat-color($primary, A800);

    $lighter-color: rgba(mat-color($primary, 300),.5);

    .meta-wrapper {
        .meta {
            position: relative;
            flex: 1 0 300px;
            background: linear-gradient(to bottom right,rgba($lighter-color, .05) 20%,transparent 50%);

            &.hidden {
                background: linear-gradient(to bottom right, rgba($lighter-color, .05),transparent 50%);
            }
    
            &:after {
                border-left: 2px solid $primary-color;
                -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from($primary-color), to($primary-dark), color-stop(01, $primary-dark)) 50 21;
                border-image: -webkit-gradient(linear, left top, left bottom, from($primary-color), to($primary-dark), color-stop(01, $primary-dark)) 50 21;
            }
        }
    }
}