/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import {theme, Theme} from 'components/shared/theme';

const {spacing, typography: {primaryFontSize}, colors} = theme;
const paddings = Theme.paddings;

export const RadioGroup = styled.default.div`
  display: flex;
`;

export const RadioWrapper = styled.default.div<{disabled?: boolean}>`
  padding: ${paddings.small};
  display: flex;

  ${({disabled}) =>
    disabled &&
    styled.css`
      pointer-events: none;
      opacity: 0.5;
    `}
`;

export const RadioButtonContainer = styled.default.div`
  margin-right: ${spacing.xSmall};
  align-self: center;

  input {
    position: absolute;
    visibility: hidden;
  }
`;

export const VisibleCheckBox = styled.default.div<{checked?: boolean}>`
  border: 2px solid ${colors.gray400};
  display: flex;
  align-items: center;
  justify-content: center;
  width: ${primaryFontSize};
  height: ${primaryFontSize};
  border-radius: 50%;

  ${({checked}) =>
    checked &&
    styled.css`
      border: none;
      background-color: ${colors.red};

      div {
        background-color: ${colors.black};
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }
    `}
`;
