ihk24/gfi-ihk-2024/stories/components/infobox/infobox.scss

@import '../../_global/styles/mixins';
@import '../../_global/styles/vars';

.infobox,
.richtext div.strong,
article.col div.strong {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
  margin: calc(3% + 26px) 0;
  background-color: var(--theme-color-secondary-dimmed);
  padding: var(--content-box-padding);
  border-top-left-radius: calc(4 * (var(--border-radius-xs)));
  border-top-right-radius: calc(4 * (var(--border-radius-xs)));
  @media (max-width: 767px) {
    padding-top: calc(2 * var(--content-box-padding));
    padding-bottom: calc(2 * var(--content-box-padding));
  }

  &:after {
    content: "";
    display: block;
    width: 100%;
    height: var(--border-width);
    background: var(--theme-color-secondary);
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--border-width));
    border-bottom-left-radius: calc(4 * (var(--border-radius-xs)));
    border-bottom-right-radius: calc(4 * (var(--border-radius-xs)));
  }

  &.success {
    background-color: var(--theme-color-success-dimmed);
    &:after {
      background: var(--theme-color-success);
    }
  }

  &.error {
    background-color: var(--theme-color-error-dimmed);
    &:after {
      background: var(--theme-color-error);
    }
  }

  &.warning {
    background-color: var(--theme-color-warning-dimmed);
    &:after {
      background: var(--theme-color-warning);
    }
  }

  &.secondary {
    background-color: var(--theme-color-primary-dimmed-04);
    &:after {
      background: var(--theme-color-primary);
    }
    blockquote {
      border-left-color: var(--theme-color-primary);
    }
  }

  > *:first-child {
    margin-top: -0.4em;
  }

  > *:last-child {
    margin-bottom: -0.4em;
  }

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
  .infobox--content {
    flex: 1;
  }
  .icon-box {
    flex-shrink: 0;
    margin-top: -15px;
    width: 76px;
    height: 76px;
    font-size: 76px;
    line-height: 76px;
    font-family: "Pictograms", sans-serif;
    color: var(--theme-color-secondary);
    @media (max-width: 767px) {
      position: absolute;
      right: 15px;
      top: 15px;
      margin-top: 0;
    }
  }
  h2, .like-h2 {
    @media (max-width: 767px) {
      padding-right: 90px;
    }
  }
  p.kicker {
    @media (max-width: 767px) {
      padding-right: 90px;
    }
  }
}

.snippingTool {
  margin: calc(3% + 26px) 50px;
  background-color: var(--theme-color-secondary-dimmed);
  padding: var(--content-box-padding);
  width: 652px;

  .topicSnippingTool {
    margin: 10px 0;
  }

  .snippingToolLink {
    font-size: var(--font-size-xs);
    margin: 5px 0 0;
  }

  .snippingToolTitle {
    margin: 0;
  }

  .snippingToolDescription {
    font-size: var(--font-size-xs);
  }
}