assets/css/partials/container.scss
:root {
  --color-info-bg: hsl(210, 90%, 96%);
  --color-info-text: hsl(210, 100%, 40%);
  --color-info-shadow: hsl(210, 100%, 98%);

  --color-warning-bg: hsl(40, 100%, 94%);
  --color-warning-text: hsl(34, 94%, 35%);
  --color-warning-shadow: hsl(40, 100%, 98%);

  --color-danger-bg: hsl(0, 100%, 97%);
  --color-danger-text: hsl(356, 72%, 45%);
  --color-danger-shadow: hsl(0, 100%, 98%);

  --color-tip-bg: hsl(138, 76%, 96%);
  --color-tip-text: hsl(152, 95%, 28%);
  --color-tip-shadow: hsl(138, 100%, 98%);

  --color-important-bg: hsl(270, 80%, 96%);
  --color-important-text: hsl(270, 80%, 45%);
  --color-important-shadow: hsl(270, 80%, 98%);
}

[data-theme="dark"] {
  &:root {
    --color-info-bg: hsl(210, 30%, 25%);
    --color-info-text: hsl(210, 80%, 70%);
    --color-info-shadow: hsl(210, 30%, 16%);

    --color-warning-bg: hsl(40, 30%, 25%);
    --color-warning-text: hsl(40, 80%, 70%);
    --color-warning-shadow: hsl(40, 30%, 16%);

    --color-danger-bg: hsl(0, 30%, 25%);
    --color-danger-text: hsl(0, 80%, 70%);
    --color-danger-shadow: hsl(0, 30%, 16%);

    --color-tip-bg: hsl(138, 30%, 25%);
    --color-tip-text: hsl(138, 80%, 70%);
    --color-tip-shadow: hsl(138, 30%, 16%);

    --color-important-bg: hsl(270, 30%, 25%);
    --color-important-text: hsl(270, 80%, 70%);
    --color-important-shadow: hsl(270, 30%, 16%);
  }
}

.alert-blockquote {
  margin: 28px 0;
  border-radius: $post-radius;
  transition: 0.3s;
  display: flow-root;
  padding: 0 12px;

  .alert-heading:before {
    font-weight: normal;
    margin-right: 8px;
    @if $icon_font {
      font-family: $font-icon;
    } @else {
      font-family: var(--font-icon);
    }
  }

  &.info,
  &.note {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-left: 6px var(--color-info-text) solid;
    box-shadow: 0 0 5px 2px var(--color-info-shadow);

    .alert-heading:before {
      @if $icon_font {
        content: "\e647";
      } @else {
        content: "\f05a";
      }
    }
  }

  &.warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    box-shadow: 0 0 5px 2px var(--color-warning-shadow);
    border-left: 6px var(--color-warning-text) solid;

    .alert-heading:before {
      @if $icon_font {
        content: "\e646";
      } @else {
        content: "\f06a";
      }
    }
  }

  &.danger,
  &.caution {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    box-shadow: 0 0 5px 2px var(--color-danger-shadow);
    border-left: 6px var(--color-danger-text) solid;

    .alert-heading:before {
      @if $icon_font {
        content: "\e645";
      } @else {
        content: "\f057";
        font-weight: 900;
      }
    }
  }

  &.tip {
    background: var(--color-tip-bg);
    color: var(--color-tip-text);
    box-shadow: 0 0 5px 2px var(--color-tip-shadow);
    border-left: 6px var(--color-tip-text) solid;

    .alert-heading:before {
      @if $icon_font {
        content: "\e643";
      } @else {
        content: "\f058";
        font-weight: 900;
      }
    }
  }

  &.important {
    background: var(--color-important-bg);
    color: var(--color-important-text);
    box-shadow: 0 0 5px 2px var(--color-important-shadow);
    border-left: 6px var(--color-important-text) solid;

    .alert-heading:before {
      @if $icon_font {
        content: "\e649";
      } @else {
        content: "\f192";
        font-weight: 900;
      }
    }
  }
  p {
    margin: 12px 0;
  }
}

.alert-heading {
  margin: 12px 0 !important;
  font-size: 18px;
  font-weight: bold;
}
