@use '@material/card/mixins' as card-mixins;
@use '@material/theme/mixins' as theme-mixins;
@use '@material/rtl/mixins' as rtl-mixins;

.page-containment_card {
  .hero {
    height: auto;
    padding: 24px;
  }

  .demo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
  }

  .demo-card-toggles {
    margin: 24px;
    padding: 24px;
    text-align: center;
  }

  //
  // Card container
  //
  .demo-card {
    width: 320px;
  }

  .demo-card--photo {
    width: 200px;
  }

  //
  // Images
  //
  .demo-card__media {
    background-image: url('../images/1-1.jpg');
  }

  .demo-card__media--16-9 {
    background-image: url('../images/16-9.jpg');
  }

  .demo-card__media-content--with-title {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .demo-card__media-title {
    padding: 8px 16px;
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 100%
    );
    color: white;
  }

  //
  // Book card
  //
  .demo-card__primary {
    padding: 1rem;
  }

  .demo-card__title {
    margin: 0;
  }

  .demo-card__subtitle {
    @include theme-mixins.prop(color, text-secondary-on-background);
    margin: 0;
  }

  .demo-card__secondary {
    @include theme-mixins.prop(color, text-secondary-on-background);
    padding: 0 1rem 8px 1rem;
  }

  //
  // Headlines card
  //
  .demo-card-article-group-heading {
    padding: 8px 16px;
  }

  .demo-card-article {
    padding: 16px;
    text-decoration: none;
    color: inherit;
  }

  .demo-card-article__title {
    margin: 0 0 4px 0;
  }

  .demo-card-article__snippet {
    margin: 0;
  }

  //
  // Music card
  //
  .demo-card--music {
    @include card-mixins.shape-radius((24px, 4px), true);
  }

  .demo-card__music-row {
    display: flex;
    border-top-left-radius: inherit;

    @include rtl-mixins.rtl {
      border-top-left-radius: 0;
      border-top-right-radius: inherit;
    }
  }

  .demo-card__media--music {
    width: 110px;
    border-top-left-radius: inherit;

    @include rtl-mixins.rtl {
      border-top-left-radius: 0;
      border-top-right-radius: inherit;
    }
  }

  .demo-card__music-info {
    display: flex;
    flex-direction: column;
    padding: 8px 16px;
  }

  .demo-card__action-buttons--text-only {
    margin-left: 8px;
  }

  .demo-card__action-icon--star {
    margin-left: 4px;
    margin-right: 4px;
    cursor: pointer;
  }
}
