import { css } from 'styled-components';

export const segmented = css`
  /**
    * @tokens Segmented
    * */
  --segmented-font-size: var(--font-size-base); // @presenter FontSize
  --segmented-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --segmented-text-color: var(--text-color-secondary); // @presenter Color
  --segmented-line-height: var(--line-height-base); // @presenter LineHeight

  --segmented-font-size-active: var(--font-size-base); // @presenter FontSize
  --segmented-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
  --segmented-text-color-active: var(--text-color-primary); // @presenter Color

  --segmented-buttons-content-color: var(--color-warm-grey-8); // @presenter Color
  --segmented-buttons-content-color-hover: var(--color-warm-grey-11); // @presenter Color
  --segmented-buttons-content-color-active: var(--color-blue-11); // @presenter Color
  --segmented-buttons-bg-color-inner: var(--color-white); // @presenter Color
  --segmented-buttons-bg-color-main: var(--color-warm-grey-2); // @presenter Color

  // @tokens End
`;