import { css } from 'styled-components';

export const pageNavigation = css`
  /**
   * @tokens Page Navigation
   */

  --page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing

  --page-navigation-button-width: var(--container-max-width); // @presenter Width
  --page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
  --page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
  --page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
  --page-navigation-button-title-line-height: var(--line-height-lg); // @presenter LineHeight
  --page-navigation-button-title-color: var(--text-color-primary); // @presenter Color
  --page-navigation-button-gap: var(--spacing-xxs); // @presenter Spacing
  --page-navigation-button-border-radius: var(--border-radius-xl); // @presenter BorderRadius
  --page-navigation-button-border-color: var(--border-color-secondary); // @presenter Color
  --page-navigation-button-border: var(--border-width) var(--border-style) var(--page-navigation-button-border-color); // @presenter Border
  --page-navigation-button-border-color-hover: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
  --page-navigation-button-border-hover: var(--border-width) var(--border-style) var(--page-navigation-button-border-color-hover); // @presenter Border
  --page-navigation-button-min-width: 220px; // @presenter Width
  // @tokens End
`;