@import '../../core';

.bfo-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: calc(var(--bfo-spacing-base-m) + 1vw);
  background-color: var(--bfo-color-card-background);
  color: var(--bfo-color-brand-heading);
  border-radius: var(--bfo-border-radius-card);
  box-shadow: var(--bfo-shadow-down);
  &__icon {
    width: 32px;
    margin-bottom: var(--bfo-spacing-base-m);
    svg {
      fill: var(--bfo-color-brand-accent);
    }
  }
  &__heading {
    margin-bottom: var(--bfo-spacing-base-m);
  }
  &__body {
    margin: 0 calc(0.5rem + 2vw) calc(0.5rem + 2vw) 0;
  }
  &__footer {
    margin-top: auto;
    text-align: right;
  }
  .bfo-button--iconOnly {
    svg {
      fill: var(--bfo-color-brand-accent);
    }
  }
}