import { css } from 'styled-components';

export const accordion = css`
  /**
  * @tokens Accordion spacing
  * @presenter Spacing
  */

  --accordion-gap: var(--spacing-base);

  /**
  * @tokens Accordion common
  */

  --accordion-border-radius: var(--border-radius); // @presenter BorderRadius
  --accordion-border: none; // @presenter Border

  --accordion-line-height: var(--line-height-base); // @presenter LineHeight
  --accordion-font-size: var(--font-size-base); // @presenter FontSize
  --accordion-font-family: var(--font-family-base); // @presenter FontFamily
  --accordion-font-weight: var(--font-weight-regular); // @presenter FontWeight

  /**
  * @tokens Accordion header common
  */

  --accordion-header-font-family: var(--font-family-base); // @presenter FontFamily
  --accordion-header-font-size: var(--font-size-base); // @presenter FontSize
  --accordion-header-font-weight: var(--font-weight-medium, 500); // @presenter FontWeight
  --accordion-header-text-color: var(--text-color-primary);
  --accordion-header-padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-base);
  --accordion-header-line-height: var(--line-height-base); // @presenter LineHeight
  --accordion-header-bg-color: transparent; // @presenter Color
  --accordion-header-border: none; // @presenter Border

  /**
  * @tokens Accordion body common
  */

  --accordion-body-font-family: var(--font-family-base); // @presenter FontFamily
  --accordion-body-font-size: var(--font-size-base); // @presenter FontSize
  --accordion-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --accordion-body-text-color: var(--text-color-secondary);
  --accordion-body-padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-base);
  --accordion-body-bg-color: transparent; // @presenter Color
  --accordion-body-border: none; // @presenter Border

  /**
  * @tokens Accordion chevron icon
  */

  --accordion-chevron-icon-color: var(--text-color-secondary); // @presenter Color
  --accordion-chevron-icon-size: 16px;

  // @tokens End
`;