import { styled } from '@mui/material/styles'
import { Box, IBoxProps } from '@ntpkunity/controls'

export const TenantWrap = styled(
  Box,
  {}
)<Partial<IBoxProps>>(({ theme }) => ({
  '&.control-wrap': {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column',
    width: '100%',
    '.text-primary': {
      color: theme.palette.primary.main
    },
    '.text-muted': {
      color: theme.palette.grey[600]
    },
    '.decoration-none': {
      textDecoration: 'none'
    },
    '.fp-link': {
      color: 'rgba(0,0,0,0.6)',
      marginBottom: 0,
      paddingLeft: 15
    },
    '.u-form-group': {
      marginBottom: 0,
      '.u-form-control': {
        '&.MuiInputBase-adornedEnd': {
          svg: {
            path: {
              stroke: theme.palette.grey[300]
            }
          }
        }
      }
    },
    '.progress-steps': {
      marginTop: 56,
      display: 'flex',
      flexDirection: 'row',
      '.progress-step': {
        flex: '0 0 33%',
        maxWidth: '33%',
        paddingRight: 8,
        '&:last-child': {
          paddingRight: 0
        },
        '&.active-step': {
          '.u-progress-bar': {
            '.MuiLinearProgress-bar': {
              backgroundColor: theme.palette.grey[200]
            }
          }
        },
        '&.previous-step': {
          '.u-progress-bar': {
            '.MuiLinearProgress-bar': {
              backgroundColor: theme.palette.primary.main
            }
          }
        }
      },
      '.u-progress-bar': {
        '&.progress-header': {
          backgroundColor: theme.palette.grey[50],
          height: 8
        }
      }
    },
    '.custom-checkbox-wrap': {
      '.u-custom-control-label': {
        marginBottom: 0
      }
    }
  }
}))
