import styled from 'styled-components/macro';

import { color, typography } from '../../theme';
import { font } from '../../theme/font';

export const StyledSectionHeadline = styled.h1`
  @mixin ${typography('sys/typography/section-headline')};

  color: ${color('sys/color/text/primary')};
  margin: 0;
  padding: 0;

  & > a {
    color: inherit;
  }
`;

export const StyledCardTitle = styled.h2`
  @mixin ${typography('sys/typography/card-title')};

  color: ${color('sys/color/text/primary')};
  margin: 0;
  padding: 0;

  & > a {
    color: inherit;
  }
`;

export const StyledCardSubtitle = styled.div`
  @mixin ${typography('sys/typography/card-subtitle')};

  color: ${color('sys/color/text/secondary')};
  margin: 0;
  padding: 0;

  & > a {
    color: inherit;
  }
`;

export const StyledGroupHeader = styled.h3`
  @mixin ${typography('sys/typography/group-header')};

  color: ${color('sys/color/text/primary')};
  margin: 0;
  padding: 0;

  & > a {
    color: inherit;
  }
`;

export const StyledBody = styled.div`
  @mixin ${typography('sys/typography/body')};

  color: ${color('sys/color/text/primary')};
  margin: 0;
  padding: 0;

  & > a {
    color: ${color('sys/color/primary/default')};
  }
`;

export const StyledCaption = styled.div`
  @mixin ${typography('sys/typography/caption')};

  color: ${color('sys/color/text/secondary')};
  margin: 0;
  padding: 0;

  & > a {
    color: ${color('sys/color/text/primary')};
  }
`;

export const StyledCode = styled.code`
  background-color: ${color('ref/palette/gray/25')};
  border: 1px solid ${color('ref/palette/gray/100')};
  border-radius: 3px;
  color: ${color('sys/color/text/secondary')};
  font-family: ${font('ref/font-family/mono')};
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  margin: 0;
  padding: 5px 4px;
  white-space: pre-wrap;

  & > a {
    color: ${color('sys/color/text/primary')};
  }
`;

export const StyledTextAutoTooltip = styled.span`
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;