/* ==========================================================================
 * Info Card
 * ========================================================================== */

.mds-c-info-card {
  border-radius: var(--mds-d-border-radius--default);
  color: var(--mds-t-text-color--primary);
  display: flex;
  flex-shrink: 0;
  margin: calc((var(--mds-d-spacing--xs) * -1) + 1px);

  /* 1px addition to max-width necessary for Safari subpixel rendering issue */

  overflow: hidden;
  padding: var(--mds-d-spacing--xs);
  text-align: left;
  width: calc((var(--mds-d-spacing--xs) * 2) + 100%);

  > * {
    flex-shrink: 0;
  }

  button& {
    cursor: pointer;
  }

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--lg);
  }

  &:focus-visible {
    outline: 2px solid var(--mds-d-color-brand--primary);
    outline-offset: 2px;
  }

  &--outline-dark {
    &:focus-visible {
      outline: 2px solid var(--mds-t-border-color-inverse-accent);
      outline-offset: 2px;
    }
  }

  &--align-top {
    align-items: stretch;
  }
}

.mds-c-info-card__icon {
  color: var(--mds-t-text-color--secondary);
  font-size: 32px;
  line-height: 0;
  margin-right: var(--mds-d-spacing--sm);

  .mds-c-info-card--inactive & {
    opacity: 0.5;
  }

  .mds-c-info-card--vertical & {
    margin-bottom: var(--mds-d-spacing--med);
    margin-right: 0;
  }

  &--size-med {
    font-size: 1.75rem;
  }

  &--color-tertiary {
    color: var(--mds-t-text-color--tertiary);
  }
}

.mds-c-info-card__info {
  flex-grow: 1;
  flex-shrink: 1;
  margin-bottom: calc(var(--mds-d-spacing--xxs) * -1);
  margin-top: calc(var(--mds-d-spacing--xxs) * -1);
  overflow: hidden;

  .mds-c-info-card--align-center & {
    align-self: center;
  }

  &:not(:last-child) {
    padding-right: var(--mds-d-spacing--sm);
  }

  .mds-c-info-card--inactive & {
    opacity: 0.5;
  }

  .mds-c-info-card--vertical & {
    width: 100%;

    &:not(:last-child) {
      margin-bottom: var(--mds-d-spacing--med);
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.mds-c-info-card__title {
  @mixin mds-m-heading--size-med;

  display: block;
  overflow-wrap: break-word;

  &--truncate {
    @mixin mds-m-text-overflow-ellipsis;

    & > * {
      @mixin mds-m-text-overflow-ellipsis;
    }
  }
}

.mds-c-info-card__subtitle {
  @mixin mds-m-text--size-sm;

  color: var(--mds-t-text-color--secondary);
  display: block;
  margin-top: calc(var(--mds-d-spacing--xxs) * -1);
  max-width: 100%;
  overflow-wrap: break-word;

  &--truncate {
    @mixin mds-m-text-overflow-ellipsis;

    & > * {
      @mixin mds-m-text-overflow-ellipsis;
    }
  }

  &:not(:last-child) {
    margin-bottom: var(--mds-d-spacing--sm);
  }
}

.mds-c-info-card__error {
  @mixin mds-m-text--size-med;

  color: var(--mds-t-color--orange);
  margin-top: calc(var(--mds-d-spacing--xxs) * -1);

  &--truncate {
    @mixin mds-m-text-overflow-ellipsis;

    & > * {
      @mixin mds-m-text-overflow-ellipsis;
    }
  }
}