/**
 * Component: doc-blocks
 * -------------------------------------------------------------------------- */

.vp-doc .custom-block {
  border-left: 6px solid;

  p:first-child {
    margin: 0 0 0 1.25rem;
  }

  &:before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
  }

  &.info,
  &.note,
  &.tip,
  &.important {
    &:before {
      content: '\f06a';
    }
  }

  &.warning,
  &.caution,
  &.danger {
    &:before {
      content: '\f071';
    }
  }

  &.details {
    border-left-color: var(--vp-c-text-2);
    p {
      color: var(--vp-c-text-2);
    }
  }

  &.info,
  &.note {
    border-left-color: var(--vp-c-text-2);
    color: var(--vp-c-text-2);
    .custom-block-title,
    &:before {
      color: var(--vp-c-text-1);
    }
  }

  &.tip {
    border-left-color: var(--vp-c-green-1);
    color: var(--vp-c-green-2);
    background-color: var(--vp-c-green-soft);
    .custom-block-title,
    &:before {
      color: var(--vp-c-green-1);
    }
    code {
      color: var(--vp-c-green-1);
      background-color: var(--vp-c-green-soft);
    }
    a {
      color: var(--vp-c-green-1);
    }
  }

  &.warning {
    border-left-color: var(--vp-c-warning-1);
    color: var(--vp-c-warning-2);
    .custom-block-title,
    &:before {
      color: var(--vp-c-warning-1);
    }
  }

  &.danger,
  &.caution {
    border-left-color: var(--vp-c-danger-1);
    color: var(--vp-c-danger-2);
    .custom-block-title,
    &:before {
      color: var(--vp-c-danger-1);
    }
  }

  &.important {
    border-left-color: var(--vp-c-important-1);
    color: var(--vp-c-important-2);
    .custom-block-title,
    &:before {
      color: var(--vp-c-important-1);
    }
  }
}