$card-border-radius: 12px;

.mat-card {
  border-radius: $card-border-radius;
  overflow: hidden;

  &:not([class*=mat-elevation-z]) {
    box-shadow:  0px 1px 4px $fg-1;
  }
}

.theme-dark {
  .mat-card:not([class*=mat-elevation-z]) {
    box-shadow:  0px 1px 4px $dark-bg-1;
  }
}

.mat-card-footer .mat-toolbar {
  border-bottom-left-radius: $card-border-radius;
  border-bottom-right-radius: $card-border-radius;
}

.mat-card > .mat-toolbar {
  width: initial;
  margin: -16px -16px 20px;
  border-top-left-radius: $card-border-radius;
  border-top-right-radius: $card-border-radius;
}

.mat-card {
  .mat-toolbar-row, .mat-toolbar-single-row {
    height: 50px;
  }
}

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

.mat-card-title, .mat-card-title:first-child {
  margin-top: .15rem;
  margin-bottom: 1.25rem;
}

.mat-card--icon-header {
  mat-icon {
    font-size: 1.75rem;
    margin: 1rem 0 2rem !important;
    width: auto;
    height: auto;
  }
}

.mat-card--chart-wrapper {
  @extend .my-3;
  @extend .py-1;
  width: calc(100% + 32px);
  margin-left: -16px;
  overflow: hidden;

  &:first-child {
    margin-top: -16px !important;
  }

  &:last-child {
    margin-bottom: -16px !important;
  }


  [echarts] {
    margin-left: -3px;

    canvas {
      width: calc(100% + 6px) !important;
    }
  }
}

.mat-card-actions {
  padding: 0 8px;
}

.mat-card>.mat-card-actions:last-child {
  margin-bottom: 0px;
}

.mat-card formly-form {
  display: block;
  margin-bottom: -16px;
}

.mat-card.ar-card-demo {
  @extend .p-0;
  border: 1px solid $fg-1;
  box-shadow: none;


  mat-card-title {
    @extend .mat-h2;
    border-bottom: 1px solid $fg-1;
    padding: 8px 16px;
  }

  mat-card-content {
    @extend .mat-app-background;
    @extend .p-5;
    margin: -16px;
  }
}

.ar-list-card {
  padding: 0;

  .ar-list-card-item {
    padding: 12px 16px;
    margin: 0;

    &:not(:last-child) { @extend .border-b; }
  }

}