import { css } from "styled-components";

export const admonition = css`
  /* === Admonitions === */

  /**
  * @tokens Admonition typography
  */

  --admonition-font-size: var(--font-size-base); // @presenter FontSize
  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
  --admonition-heading-transform: none;

  /**
  * @tokens Admonition spacing
  * @presenter Spacing
  */

  --admonition-margin-horizontal: 0;
  --admonition-margin-vertical: var(--spacing-lg);
  --admonition-padding-horizontal: var(--spacing-base);
  --admonition-padding-vertical-xs: var(--spacing-xs);
  --admonition-padding-vertical-md: var(--spacing-md);
  --admonition-icon-size: 24px;

  /**
  * @tokens Admonition border
  */

  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
  --admonition-border-style: var(--border-style);
  --admonition-border-width: calc(var(--border-width) * 4);

  /**
  * @tokens Admonition type info
  */

  --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
  --admonition-info-border-color: var(--color-info-border); // @presenter Color
  --admonition-info-border-style: var(--admonition-border-style);
  --admonition-info-border-width: var(--admonition-border-width);
  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
  --admonition-info-icon: none;

  /**
  * @tokens Admonition type warning
  */

  /* warning */
  --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
  --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
  --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
  --admonition-warning-icon: none;

  /**
  * @tokens Admonition type danger
  */

  --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
  --admonition-danger-border-color: var(--color-error-border); // @presenter Color
  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
  --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
  --admonition-danger-icon: none;

  /**
  * @tokens Admonition type success
  */

  --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
  --admonition-success-border-color: var(--color-success-border); // @presenter Color
  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
  --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
  --admonition-success-icon: none;

  // @tokens End
`;