.mds-c-info-plate {
  align-items: center;
  display: flex;
  flex-direction: row;

  &__toggle {
    align-self: flex-start;
    margin-right: var(--mds-d-spacing--sm);
  }

  &__info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &.mds-is-clickable {
      cursor: pointer;
    }
  }

  &__badges {
    flex-shrink: 0;
    margin-right: var(--mds-d-spacing--xxl);
  }

  &__buttons {
    flex-shrink: 0;
    margin-left: var(--mds-d-spacing--sm);
  }

  &__title {
    align-items: center;
    display: flex;
    flex-direction: row;

    &__icon {
      display: inline-flex;
      margin-right: var(--mds-d-spacing--sm);
    }
  }

  &__description {
    margin-top: var(--mds-d-spacing--xs);

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

/* 
  Add WCAG Reflow Compliance 
  While WCAG Reflow (SC 1.4.10) specifically requires support up to 400% zoom,
  applied reflow styles starting at 250% zoom, since some elements are cut off
  or difficult to use even at that level.
  At 250% zoom on a 1280px screen, the effective CSS width is about 512px.
*/
@media (max-width: $reflow-zoom-level--250) {
  .mds-c-info-plate {
    align-items: flex-start;
    flex-direction: column;

    &__buttons {
      margin-left: 0.15rem;
    }
  }
}