.sc-card {
  position: relative;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: $card-border-radius;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 0;

  &:not([class*="mat-elevation-z"]) {
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
      0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  }

  &-header {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid;

    &-text {
      flex: 1;
      min-width: 0;
      padding: calc(#{$card-padding} - 1px) $card-padding calc(#{$card-padding} - 4px) $card-padding;
    }

    &-actions {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      padding-right: 8px;

      & > * {
        margin-right: 4px !important; // remove important in production?

        &:last-child {
          margin-right: 0 !important; // remove important in production?
        }
      }
    }
  }

  &-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.03125rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;

    &.text-truncate {
      display: block;
    }
  }

  &-subtitle {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.033333333rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    margin-top: 8px;
  }

  &-content {
    flex: 1 1 auto;
    overflow-y: auto;

    &-padded {
      padding: 16px;
    }
  }

  &-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    border-top: 1px solid;
    padding: 8px 16px;
  }

  &-actions {
    display: block;
  }

  //* hover
  &--hover:hover {
    cursor: pointer;
  }
}

// * different styling for cards inside cards
.sc-card .sc-card:not(.sc-card--focus.focus),
.sc-card--nested:not(.sc-card--focus) {
  border: 1px solid;
  box-shadow: none !important;
}

//* Testing new styles for "actions in a sidebar"

.sc-card {
  &--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "content"
      "aside";

    @include media-breakpoint-up(sm) {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto;
      grid-template-areas: "content aside";
    }
  }

  &__content {
    grid-area: content;
  }

  &__aside {
    grid-area: aside;
    border-top: 1px solid;
    display: flex;

    @include media-breakpoint-up(sm) {
      border-top: 0;
      border-left: 1px solid;
      flex-direction: column;
    }

    &.--align-start {
      @include media-breakpoint-up(sm) {
        .sc-card__aside-action.mat-icon-button {
          flex-grow: 0 !important;
          border-bottom: 1px solid !important;
        }
      }
    }
  }

  //? maybe drop the "aside-action"-class and just target "mat-icon-button" (easier setup)
  &__aside-action.mat-icon-button {
    flex: 1 0 auto;
    height: 48px;
    border-radius: 0;
    border-right: 1px solid;

    &:last-child {
      border-right: 0;
    }

    @include media-breakpoint-up(sm) {
      width: 48px;
      // height: 100%;
      border-right: 0;
      border-bottom: 1px solid;

      &:last-child {
        border-bottom: 0;
      }
    }
  }
}