summaryrefslogtreecommitdiffhomepage
path: root/gui/src/renderer/components/AppButtonStyles.tsx
blob: ac65f951f66bef4961ec0cc1976298cd8181097f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import styled from 'styled-components';

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

export const StyledLabel = styled.span<{ $textOffset: number }>(buttonText, (props) => ({
  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',
});