@use '@angular/material' as mat;
@import '@angular/material';
// Material card mixin
@mixin mat-card-override($theme) {
  /** Angular Material Variables */
  $primary: map-get($theme, primary);
  $is-dark: map-get($theme, is-dark);
  .mat-mdc-card {
    padding: 16px;
    .mat-mdc-card-title,
    .mat-mdc-card-subtitle {
      letter-spacing: normal;
    }
    &.mdc-card {
      border-radius: 8px;
    }
    @include mic-elevation(1);
    &.flex.flex-row {
      flex-direction: row;
    }
    &[color='primary'] {
      background-color: map-get($primary, A400);
      @if $is-dark {
        background-color: map-get($mic-grey, 700);
      }
      .mat-mdc-card-title,
      .mat-mdc-card-subtitle,
      div,
      p,
      h3 {
        color: mat.m2-get-contrast-color-from-palette($primary, A400);
      }
      @media screen and (max-width: 959px) {
        .mat-mdc-tab-header-pagination-chevron {
          border-color: $mic-brand-colors-white !important;
          @if $is-dark {
            border-color: #000000 !important;
          }
        }
      }
    }
    .mat-mdc-card-image {
      display: block;
      width: auto;
      margin: -16px -16px 0;
      overflow: hidden;
      &:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
      }
    }
    .mat-mdc-card-content {
      &:last-child {
        padding: 0px;
      }
      &.flex {
        display: flex !important;
      }
    }
    &.mic-card {
      padding: 0;
      display: flex;
    }
    .mat-mdc-card-title {
      font-weight: bold;
      padding: 4px 0 8px 0;
    }
    .mat-mdc-card-subtitle {
      font-size: 16px;
    }
  }
  .mic-card-horizontal-content {
    margin: 20px;
  }
  .mic-card-picture-container {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 25%;
    border-radius: 4px 0 0 4px;
    img {
      position: relative;
      float: right;
      height: 100%;
    }
  }
}
