import styled from 'styled-components/macro';

import { Button } from '../../components/Button/Button';
import { color } from '../../theme';

export const StyledHeader = styled.header`
  background-color: ${color('sys/color/white')};
  box-sizing: border-box;
  display: flex;
  height: 48px;
  width: 100%;
`;

export const StyledSection = styled.div<{ $expanded?: boolean }>`
  align-items: center;
  border-right: 1px solid ${color('sys/color/divider')};
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
  width: ${(props) => (props.$expanded ? '100%' : undefined)};

  &:nth-last-child(1) {
    border-right: none;
  }
`;

export const TunedQuickMessageButton = styled(Button)`
  margin-left: auto;
`;

export const StyledUsageInfo = styled.span`
  color: ${color('sys/color/text/primary')};
  font-size: 14px;
  white-space: nowrap;
`;