import styled from 'styled-components';
import { buttonText } from './common-styles';

export const StyledLabel = styled.span(buttonText, (props: { textOffset: number }) => ({
  paddingLeft: props.textOffset > 0 ? `${props.textOffset}px` : 0,
  paddingRight: props.textOffset < 0 ? `${-props.textOffset}px` : 0,
  textAlign: 'center',
  wordBreak: 'break-word',
}));

export const StyledButtonContent = styled.div({
  flex: 1,
  display: 'grid',
  gridTemplateColumns: '1fr auto 1fr',
  alignItems: 'center',
  padding: '9px',
});

export const transparentButton = {
  backdropFilter: 'blur(4px)',
};

export const StyledLeft = styled.div({
  justifySelf: 'start',
  display: 'flex',
  flexDirection: 'column',
});

export const StyledRight = styled(StyledLeft)({
  justifySelf: 'end',
});

export const StyledVisibleSide = styled.div({
  display: 'flex',
  flexDirection: 'row',
});

export const StyledHiddenSide = styled(StyledVisibleSide).attrs({ 'aria-hidden': true })({
  height: 0,
  visibility: 'hidden',
});
