.confluence-information-macro {
  background: var(--neutral-20);
  border: 1px solid var(--neutral-50);
  border-radius: var(--border-radius);
  margin: 15px 0;
  min-height: 20px;
  padding: 10px 10px 10px 36px;
  position: relative;

  &.has-no-icon { padding-left: 15px; }

  .confluence-information-macro-icon {
    left: 10px;
    position: absolute;
    font-size: 18px;
    font-family: "Font Awesome 7 Duotone";
    font-weight: 900;

    &::before {
      opacity: 0;
      position: absolute;
    }

    &::after { font-feature-settings: "ss01"; }

    &.aui-iconfont-info {
      color: var(--neutral-600);

      &::before,
      &::after { content: "\f30f"; }
    }

    &.aui-iconfont-error {
      color: var(--red-500);

      &::before,
      &::after { content: "\f06a"; }
    }

    &.aui-iconfont-warning {
      color: var(--yellow-500);

      &::before,
      &::after { content: "\f071"; }
    }

    &.aui-iconfont-approve {
      color: var(--green-500);

      &::before,
      &::after { content: "\f14a"; }
    }
  }

  .confluence-information-macro-body {
    display: flex;
    flex-direction: column;
    gap: 10px;

    > * { margin: 0; }
    > p:empty { display: none; }
  }

  > .title { font-weight: 600; }
}

.confluence-information-macro-warning {
  background: var(--red-50);
  border-color: var(--red-200);
}

.confluence-information-macro-information {
  background: var(--neutral-20);
  border-color: var(--neutral-60);
}

.confluence-information-macro-tip {
  background-color: var(--green-50);
  border-color: var(--green-200);
}

.confluence-information-macro-note {
  background: var(--yellow-50);
  border-color: var(--yellow-200);
}