@use '@growi/core-styles/scss/bootstrap/init' as bs;

// == Colors
.callout-viewer {
  --callout-accent-note: var(--bs-info);
  --callout-accent-tip: var(--bs-success);
  --callout-accent-important: var(--bs-primary);
  --callout-accent-warning: var(--bs-warning);
  --callout-accent-caution: var(--bs-danger);
}

.callout-viewer :global{

  .callout {
    padding: 0.5rem 1rem;
    margin: 1rem 0rem;
    color: inherit;
  }

  .callout-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    line-height: 1;
  }

  .callout-hint {
    display: inline-block;
    margin-right: 0.3rem;
    vertical-align: text-bottom;
    fill: currentColor;
  }

  .callout-note {
    .callout-indicator {
      color: var(--callout-accent-note);
    }
    border-left: .25em solid var(--callout-accent-note);
  }

  .callout-tip {
    .callout-indicator {
      color: var(--callout-accent-tip);
    }
    border-left: .25em solid var(--callout-accent-tip);
  }

  .callout-warning {
    .callout-indicator {
      color: var(--callout-accent-warning);
    }
    border-left:.25em solid var(--callout-accent-warning);
  }

  .callout-caution {
    .callout-indicator {
      color: var(--callout-accent-caution);
    }
    border-left:.25em solid var(--callout-accent-caution);
  }

  .callout-important {
    .callout-indicator {
      color: var(--callout-accent-important);
    }
    border-left:.25em solid var(--callout-accent-important);
  }

  .callout-content:first-child,
  .callout-content:only-child {
    margin-block-start: 0;
  }

  .callout-content:last-child,
  .callout-content:only-child {
    margin-block-end: 0;
  }
}