libs/barista-components/card/src/card.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/button';
@import './card-theme';

.dt-card {
  @include dt-main-font();
  display: block;
  background-color: #ffffff;
  border-radius: 3px;
  padding: 8px;

  @media (min-width: 460px) {
    padding: 12px;
  }

  @media (min-width: 992px) {
    padding: 16px;
  }
}

.dt-card-icon {
  width: 44px;
  height: 44px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  .dt-icon {
    width: 44px;
    height: 44px;
    fill: $gray-700;
  }
}

.dt-card-header {
  display: flex;
  width: 100%;
  padding-bottom: 16px;

  // Allow reflow of elements when under a specific screen width
  @media (max-width: 460px) {
    flex-direction: column;
    justify-content: start;
  }
}

.dt-card-heading {
  flex: 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.dt-card-title {
  @include dt-h2-font();
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dt-card-subtitle {
  @include dt-h3-font();
  display: block;
}

.dt-card-title-actions,
.dt-card-footer-actions {
  display: block;

  @include dt-button-child-button-spacing();
}

.dt-card-footer-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}
