/* =========================================================
   Bootstrap 5 Callout
   Variants:  .callout-primary | -info | -success | -warning | -danger
   Accent:    left by default, .callout-end (right), .callout-top, .callout-bottom
   Extras:    .callout-title, .callout-label, .callout-icon, .callout-sm
   ========================================================= */
.callout {
  --callout-color-rgb: var(--bs-secondary-rgb);
  --callout-accent: 5px;
  --callout-bg: #fff;
  --callout-label: var(--bs-secondary-text-emphasis);
  --callout-border: rgba(var(--callout-color-rgb), .55);
  position: relative;
  padding: 1.5rem 1.25rem;
  margin-bottom: 1rem;
  color: var(--bs-body-color);
  background-color: #fff;
  border: 1px solid var(--callout-border);
  border-left: var(--callout-accent) solid rgb(var(--callout-color-rgb));
  border-radius: .375rem;
}
.callout > :last-child { margin-bottom: 0; }

/* Accent position */
.callout-end {
  border-left: 1px solid var(--callout-border);
  border-right: var(--callout-accent) solid rgb(var(--callout-color-rgb));
}
.callout-top {
  border-left: 1px solid var(--callout-border);
  border-top: var(--callout-accent) solid rgb(var(--callout-color-rgb));
}
.callout-bottom {
  border-left: 1px solid var(--callout-border);
  border-bottom: var(--callout-accent) solid rgb(var(--callout-color-rgb));
}

/* Tinted background option */
.callout-tinted { --callout-bg: rgba(var(--callout-color-rgb), .06); }

/* Content */
.callout-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: .6rem;
  color: var(--bs-emphasis-color);
}
.callout-label {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--callout-label);
  margin-right: .15rem;
}
.callout a:not(.btn) { color: var(--callout-label); font-weight: 600; }

/* Icon layout */
.callout-icon { display: flex; gap: .9rem; align-items: flex-start; }
.callout-icon > .callout-icon-mark {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.4;
  color: rgb(var(--callout-color-rgb));
}
.callout-icon > .callout-body { flex: 1; min-width: 0; }
.callout-icon > .callout-body > :last-child { margin-bottom: 0; }

/* Compact */
.callout-sm { padding: .6rem .9rem; font-size: .9rem; --callout-accent: 4px; }

/* Works with Bootstrap's dismiss plugin (add .alert .alert-dismissible .fade .show) */
.callout.alert-dismissible { padding-right: 3rem; }
.callout.alert-dismissible .btn-close { padding: 1.15rem 1rem; }

/* Colour variants */
.callout-primary { --callout-color-rgb: var(--bs-primary-rgb); --callout-label: var(--bs-primary-text-emphasis); }
.callout-info    { --callout-color-rgb: 33, 150, 243;          --callout-label: #0B5394; }
.callout-success { --callout-color-rgb: var(--bs-success-rgb); --callout-label: var(--bs-success-text-emphasis); }
.callout-warning { --callout-color-rgb: var(--bs-warning-rgb); --callout-label: #7A5200; --callout-border: rgba(var(--callout-color-rgb), .85); }
.callout-danger  { --callout-color-rgb: 240, 67, 90;           --callout-label: #7A0E1E; }