import { css } from 'styled-components';

export const breadcrumbs = css`
  /**
   * @tokens Breadcrumbs
   */

  --breadcrumbs-text-color: var(--text-color-description); // @presenter Color
  --breadcrumbs-text-color-active: var(--text-color-primary); // @presenter Color
  --breadcrumbs-text-color-border-hover: var(--color-info-border-hover); // @presenter Color

  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
  --breadcrumbs-icon-size: var(--font-size-base); // @presenter FontSize
  --breadcrumbs-font-weight-active: var(--font-weight-medium); // @presenter FontWeight

  --breadcrumbs-border-radius: var(--border-radius); // @presenter BorderRadius
  --breadcrumbs-gap: var(--spacing-xxs); // @presenter Spacing

  --breadcrumbs-padding: 2px var(--spacing-xs); // @presenter Spacing
  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
  --breadcrumbs-background-color-hover: var(--color-hover-base); // @presenter Color
  --breadcrumbs-background-color-focus: var(--color-info-border-hover); // @presenter Color
  --breadcrumbs-box-shadow-focus: 0 0 0 1px var(--breadcrumbs-background-color-focus); // @presenter Color

  --breadcrumb-padding: var(--spacing-xxs); // @presenter Spacing
  --breadcrumb-dropdown-active-icon-position: var(--spacing-xs); // @presenter Spacing

  // @tokens End
`;