@use "@angular/material" as mat;
@mixin sc-card-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $primary: map-get($theme, primary);

  .sc-card {
    //@include mat.overridable-elevation(1, $theme);
    background: mat.get-color-from-palette($background, card);
    color: mat.get-color-from-palette($foreground, text);

    &-header,
    &-footer {
      border-color: mat.get-color-from-palette($foreground, divider);
    }

    &-subtitle {
      color: mat.get-color-from-palette($foreground, secondary-text);
    }

    // Needs extra specificity to be able to override the elevation selectors.
    &.sc-card-flat {
      //@include mat.overridable-elevation(0, $theme);
    }

    //* hover
    &--hover {
      transition: background-color $hover-transition-duration linear;

      &:hover {
        background-color: mat.get-color-from-palette($background, hover);
        transition: background-color $hover-transition-duration linear;
      }
    }

    //* focus
    &--focus {
      &:focus,
      &.focus {
        content: "";
        box-shadow: 0 0 0 4px rgba(mat.get-color-from-palette($primary, 500), 0.4);
      }
    }
  }

  // * different styling for cards inside cards
  .sc-card .sc-card,
  .sc-card--nested {
    background-color: mat.get-color-from-palette($background, hover);
    border-color: mat.get-color-from-palette($foreground, divider) !important;
  }

  .sc-card-subtitle {
    color: mat.get-color-from-palette($foreground, secondary-text);
  }

  //* Testing new styles for "actions in a sidebar"
  .sc-card {
    &__aside,
    &__aside-action.mat-icon-button,
    &__aside.--align-start .sc-card__aside-action.mat-icon-button {
      border-color: mat.get-color-from-palette($foreground, divider) !important;
    }
  }
}

@mixin sc-card-typography($config) {
  .sc-card {
    font-family: mat.font-family($config);
  }

  .sc-card-title {
    font: {
      size: mat.font-size($config, headline);
      weight: mat.font-weight($config, title);
    }
  }

  .sc-card-header .sc-card-title {
    font-size: mat.font-size($config, title);
  }

  .sc-card-subtitle,
  .sc-card-content {
    font-size: mat.font-size($config, body-1);
  }
}