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

const {
  spacing,
  primaryFontSize,
  colors
} = theme;

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: .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%;
    }
  `}
`;