/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  /**
   * @prop --highlight-content-font-size: customize content font size.
   * @prop --highlight-title-font-size: customize title font size.
   * @prop --highlight-icon-size: customize icon size with px value.
   */
  --highlight-title-font-size: var(--joy-font-size-primary-400);
  --highlight-content-font-size: var(--joy-font-size-primary-400);
  --highlight-icon-size: inherit;
  display: block;
  width: 100%;
  font-family: var(--joy-font-family-base);
  font-size: var(--highlight-content-font-size);
  line-height: var(--joy-line-height-large);
  font-weight: var(--joy-font-weight-normal);
  color: var(--joy-color-text-body);
}

.joy-highlight {
  --highlight-background-color: var(--joy-color-neutral-20);
  --highlight-accent-color: var(--joy-color-neutral-40);
  --highlight-content-color: var(--joy-color-neutral-60);
  display: flex;
  margin: 0;
  align-items: flex-start;
  padding: var(--joy-core-spacing-5);
  border-radius: var(--joy-core-radius-3);
  text-align: left;
  background-color: var(--highlight-background-color);
  word-break: break-word;
  color: var(--highlight-content-color);
}
.joy-highlight__accent {
  border-left: 7px solid var(--highlight-accent-color);
}
.joy-highlight joy-icon:first-child {
  color: var(--highlight-icon-color, var(--highlight-accent-color));
  --icon-size: var(--highlight-icon-size);
}
.joy-highlight__titled strong {
  display: block;
  font-weight: var(--joy-font-weight-bold);
  margin-bottom: 0;
  font-size: var(--highlight-title-font-size);
}
.joy-highlight--text {
  font-size: var(--highlight-content-font-size);
  width: 100%;
}
.joy-highlight_small {
  display: inline-flex;
}
.joy-highlight > joy-icon:first-child {
  margin-right: 10px;
  margin-top: 2px;
}

.joy-highlight_neutral {
  --highlight-icon-color: var(--joy-color-neutral-60);
}

.joy-highlight_info {
  --highlight-background-color: var(--joy-color-information-10);
  --highlight-accent-color: var(--joy-color-information-50);
}

.joy-highlight_warning {
  --highlight-background-color: var(--joy-color-warning-10);
  --highlight-accent-color: var(--joy-color-warning-50);
}

.joy-highlight_error {
  --highlight-background-color: var(--joy-color-error-10);
  --highlight-accent-color: var(--joy-color-error-50);
}

.joy-highlight_success {
  --highlight-background-color: var(--joy-color-success-10);
  --highlight-accent-color: var(--joy-color-success-50);
}