Initial Commit

src/components/buttons/radio-button/style.ts

@@ -0,0 +1,62 @@
+/**
+ * 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%;
+      }
+    `}
+`;