/** Component: Alert */

.theme-admonition {
  --custom-admonition-background-color: var(--strapi-neutral-100);
  --custom-admonition-border-color: var(--strapi-neutral-500);
  --custom-admonition-border-radius: var(--strapi-spacing-0);
  --custom-admonition-color: var(--strapi-neutral-800);
  --custom-admonition-heading-color: var(--strapi-neutral-700);
  --custom-admonition-heading-mb: var(--strapi-spacing-2);
  --custom-admonition-mb: var(--strapi-spacing-4);
  --custom-admonition-px: var(--strapi-spacing-4);
  --custom-admonition-py: var(--strapi-spacing-4);

  --ifm-link-decoration: none;
  --ifm-link-color: var(--custom-admonition-heading-color);
  --ifm-link-hover-color: var(--custom-admonition-heading-color);

  background-color: var(--custom-admonition-background-color);
  border-left: 4px solid var(--custom-admonition-border-color);
  border-radius: var(--custom-admonition-border-radius);
  color: var(--custom-admonition-color);
  margin: 0 0 var(--custom-admonition-mb);
  padding: var(--custom-admonition-py) var(--custom-admonition-px);

  /** Alert Title element */
  &__heading {
    color: var(--custom-admonition-heading-color);
    font-weight: var(--custom-admonition-heading-font-weight, 600);
    margin-bottom: var(--custom-admonition-heading-mb);
  }

  h1, h2, h3, li, p, table {
    code,
    a code {
      --custom-code-border-color: transparent;
      --custom-code-background-color: var(--custom-admonition-code-background-color);
      --custom-code-color: var(--custom-admonition-heading-color);
    }
  }

  a {
    font-weight: 700;
  }

  *:last-child {
    margin-bottom: 0;
  }

  &--info,
  &--callout,
  &--prerequisites {
    --custom-admonition-background-color: var(--strapi-neutral-100);
    --custom-admonition-border-color: var(--strapi-neutral-500);
    --custom-admonition-code-background-color: var(--strapi-neutral-200);
    --custom-admonition-code-color: var(--strapi-primary-600);
    --custom-admonition-heading-color: var(--strapi-neutral-700);

    --custom-selection-background-color: var(--strapi-neutral-700);
    --custom-selection-color: var(--strapi-neutral-100);

    --ifm-link-color: var(--strapi-primary-600);
    --ifm-link-hover-color: var(--strapi-primary-600);
  }

  &--note {
    --custom-admonition-background-color: var(--strapi-secondary-100);
    --custom-admonition-border-color: var(--strapi-secondary-500);
    --custom-admonition-code-background-color: var(--strapi-secondary-200);
    --custom-admonition-code-color: var(--strapi-secondary-600);
    --custom-admonition-heading-color: var(--strapi-secondary-700);

    --custom-selection-background-color: var(--strapi-secondary-700);
    --custom-selection-color: var(--strapi-secondary-100);
  }

  &--tip,
  &--success {
    --custom-admonition-background-color: var(--strapi-success-100);
    --custom-admonition-border-color: var(--strapi-success-500);
    --custom-admonition-code-background-color: var(--strapi-success-200);
    --custom-admonition-code-color: var(--strapi-success-600);
    --custom-admonition-heading-color: var(--strapi-success-700);

    --custom-selection-background-color: var(--strapi-success-700);
    --custom-selection-color: var(--strapi-success-100);
  }

  &--caution {
    --custom-admonition-background-color: var(--strapi-warning-100);
    --custom-admonition-border-color: var(--strapi-warning-500);
    --custom-admonition-code-background-color: var(--strapi-warning-200);
    --custom-admonition-code-color: var(--strapi-warning-600);
    --custom-admonition-heading-color: var(--strapi-warning-700);

    --custom-selection-background-color: var(--strapi-warning-700);
    --custom-selection-color: var(--strapi-warning-100);
  }

  &--danger,
  &--warning  {
    --custom-admonition-background-color: var(--strapi-danger-100);
    --custom-admonition-border-color: var(--strapi-danger-500);
    --custom-admonition-code-background-color: var(--strapi-danger-200);
    --custom-admonition-code-color: var(--strapi-danger-600);
    --custom-admonition-heading-color: var(--strapi-danger-700);

    --custom-selection-background-color: var(--strapi-danger-700);
    --custom-selection-color: var(--strapi-danger-100);
  }

  &--strapi {
    --custom-admonition-background-color: var(--strapi-primary-100);
    --custom-admonition-border-color: var(--strapi-primary-500);
    --custom-admonition-code-background-color: var(--strapi-primary-200);
    --custom-admonition-code-color: var(--strapi-primary-600);
    --custom-admonition-heading-color: var(--strapi-primary-700);

    --custom-selection-background-color: var(--strapi-primary-700);
    --custom-selection-color: var(--strapi-primary-100);
  }

  &--subtle {
    border-radius: 8px;
    border: none;
    background-color: transparent;
    border: solid 1px var(--strapi-neutral-500);
    font-size: 90%;
  }
}

@media screen and (min-width: 997px) {
  [class*="sbs-column"]:nth-of-type(2) .theme-admonition--subtle {
    margin-left: 80px;
  }
}

/** Dark mode */
@include dark {
  .theme-admonition {
    // --custom-admonition-color: var(--strapi-neutral-150);
    --custom-admonition-background-color: var(--strapi-neutral-100);
    --custom-admonition-code-background-color: var(--strapi-neutral-200);

    &--info,
    &--callout,
    &--prerequisites {
      --custom-admonition-code-color: var(--strapi-primary-500);
      --custom-admonition-heading-color: var(--strapi-neutral-500);
    }

    &--note {
      --custom-admonition-code-color: var(--strapi-secondary-500);
      --custom-admonition-heading-color: var(--strapi-secondary-500);
    }

    &--tip,
    &--success {
      --custom-admonition-code-color: var(--strapi-success-500);
      --custom-admonition-heading-color: var(--strapi-success-500);
    }

    &--caution,
    &--warning {
      --custom-admonition-code-color: var(--strapi-warning-500);
      --custom-admonition-heading-color: var(--strapi-warning-500);
    }

    &--danger {
      --custom-admonition-code-color: var(--strapi-danger-500);
      --custom-admonition-heading-color: var(--strapi-danger-500);
    }

    &--strapi {
      --custom-admonition-code-color: var(--strapi-primary-500);
      --custom-admonition-heading-color: var(--strapi-primary-500);
    }

    code,
    a code {
      --custom-code-border-color: transparent;
      --custom-code-background-color: var(--custom-admonition-code-background-color);
      --custom-code-color: var(--custom-admonition-code-color);
    }

    .strapi-iqb {
      --strapi-iqb-background-color: var(--strapi-neutral-0);
    }
  }
}
