@import '../../styles/common';

.CalloutCard {
  display: flex;
  align-items: center;
}

.Image {
  display: none;
  flex: 0 0 auto;
  width: 100px;

  @include page-content-when-not-fully-condensed {
    display: block;
    margin-left: var(--p-space-5);
  }
}

.DismissImage {
  margin-right: var(--p-space-5);
}

.Content {
  flex: 1 1 auto;
}

.Title {
  margin-bottom: var(--p-space-5);
}

.Buttons {
  margin-top: var(--p-space-5);
}

.Container {
  position: relative;
}

.Dismiss {
  right: var(--p-space-4);
  top: var(--p-space-4);
  position: absolute;
}

.hasDismiss {
  padding-right: calc(var(--p-space-8) + var(--p-icon-size-small));
}