/*
  * Container Style
 */
:root {
  --rp-container-note-border: var(--rp-c-divider-light);
  --rp-container-note-text: var(--rp-c-text-1);
  --rp-container-note-bg: var(--rp-c-bg-soft);
  --rp-container-note-code-bg: rgba(128, 128, 128, 0.1);
  --rp-container-note-link: var(--rp-c-link);

  --rp-container-tip-border: rgba(7, 156, 112, 0.2);
  --rp-container-tip-text: #008555;
  --rp-container-tip-bg: #f2f9f7;
  --rp-container-tip-code-bg: rgba(7, 156, 112, 0.1);

  --rp-container-info-border: rgba(0, 149, 255, 0.2);
  --rp-container-info-text: #07f;
  --rp-container-info-bg: rgba(0, 149, 255, 0.06);
  --rp-container-info-code-bg: rgba(0, 149, 255, 0.1);

  --rp-container-warning-border: rgba(255, 197, 23, 0.4);
  --rp-container-warning-text: #887233;
  --rp-container-warning-bg: rgba(255, 197, 23, 0.1);
  --rp-container-warning-code-bg: rgba(255, 197, 23, 0.1);

  --rp-container-danger-border: rgba(237, 60, 80, 0.2);
  --rp-container-danger-text: #ab2131;
  --rp-container-danger-bg: rgba(237, 60, 80, 0.08);
  --rp-container-danger-code-bg: rgba(237, 60, 80, 0.1);

  --rp-container-details-border: var(--rp-c-divider-light);
  --rp-container-details-text: var(--rp-c-text-1);
  --rp-container-details-bg: var(--rp-c-bg-soft);
  --rp-container-details-code-bg: rgba(128, 128, 128, 0.1);

  --rp-code-title-bg-with-opacity: color-mix(
    in srgb,
    var(--rp-code-title-bg) 70%,
    transparent
  );
  --rp-code-block-bg-with-opacity: color-mix(
    in srgb,
    var(--rp-code-block-bg) 70%,
    transparent
  );
}

.dark {
  --rp-container-tip-text: #3ec480;
  --rp-container-tip-bg: rgba(7, 156, 112, 0.1);

  --rp-container-info-text: #66c2ff;
  --rp-container-info-bg: rgba(0, 149, 255, 0.1);

  --rp-container-warning-text: rgb(251, 180, 81);
  --rp-container-warning-border: rgba(255, 197, 23, 0.25);
  --rp-container-warning-bg: rgba(255, 197, 23, 0.12);

  --rp-container-danger-text: rgb(247, 110, 133);
  --rp-container-danger-border: rgba(237, 60, 80, 0.3);
  --rp-container-danger-bg: rgba(237, 60, 80, 0.12);
}

.rp-callout {
  border: 1px solid transparent;
  border-radius: var(--rp-radius);
  padding: 20px 24px 12px 24px;
  margin: 24px 0;

  &__title {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: -5%;
      left: -24px;
      width: 4px;
      height: 110%;
      border-radius: 0 20px 20px 0;
    }
  }

  &__content {
    font-size: 14px;
    font-weight: 400;

    p {
      margin: 8px 0;
    }

    // code
    .rp-codeblock__title {
      background-color: var(--rp-code-title-bg-with-opacity);
    }

    .rp-codeblock__content {
      background-color: var(--rp-code-block-bg-with-opacity);
    }

    a {
      border-bottom: 1px solid currentColor;
    }
  }
}

// note
.rp-callout--note {
  border-color: var(--rp-container-note-border);
  background-color: var(--rp-container-note-bg);

  .rp-callout__title {
    color: var(--rp-container-note-text);
    &::before {
      background-color: var(--rp-container-note-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-note-text);
    background-color: var(--rp-container-note-code-bg);
  }

  a {
    color: var(--rp-container-note-text);
  }
}

// tip
.rp-callout--tip {
  border-color: var(--rp-container-tip-border);
  background-color: var(--rp-container-tip-bg);

  .rp-callout__title {
    color: var(--rp-container-tip-text);
    &::before {
      background-color: var(--rp-container-tip-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-tip-text);
    background-color: var(--rp-container-tip-code-bg);
  }

  a {
    color: var(--rp-container-tip-text);
  }
}

// info
.rp-callout--info {
  border-color: var(--rp-container-info-border);
  background-color: var(--rp-container-info-bg);

  .rp-callout__title {
    color: var(--rp-container-info-text);
    &::before {
      background-color: var(--rp-container-info-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-info-text);
    background-color: var(--rp-container-info-code-bg);
  }

  a {
    color: var(--rp-container-info-text);
  }
}

// warning
.rp-callout--warning {
  border-color: var(--rp-container-warning-border);
  background-color: var(--rp-container-warning-bg);

  .rp-callout__title {
    color: var(--rp-container-warning-text);
    &::before {
      background-color: var(--rp-container-warning-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-warning-text);
    background-color: var(--rp-container-warning-code-bg);
  }

  a {
    color: var(--rp-container-warning-text);
  }
}

// caution danger
.rp-callout--caution,
.rp-callout--danger {
  border-color: var(--rp-container-danger-border);
  background-color: var(--rp-container-danger-bg);

  .rp-callout__title {
    color: var(--rp-container-danger-text);
    &::before {
      background-color: var(--rp-container-danger-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-danger-text);
    background-color: var(--rp-container-danger-code-bg);
  }

  a {
    color: var(--rp-container-danger-text);
  }
}

// details
.rp-callout--details {
  border-color: var(--rp-container-details-border);
  background-color: var(--rp-container-details-bg);

  .rp-callout__title {
    color: var(--rp-container-details-text);
    &::before {
      background-color: var(--rp-container-details-text);
    }
  }

  // inline code
  :not(pre) > code {
    color: var(--rp-container-details-text);
    background-color: var(--rp-container-details-code-bg);
  }

  a {
    color: var(--rp-container-details-text);
  }
}

details.rp-callout {
  padding: 20px 24px 12px 24px; // override default padding
  margin: 24px 0; // override default padding

  font-size: normal;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--rp-c-bg-mute);
  }
}