import styled from "styled-components";
import { composeStyle as comp } from "../../util";
import { currentTheme } from "../../theme";
export const RadioButtonsDefaults = {
    wrapperWidth: "414px",
    optionWidth: "100%",
    optionHeight: "48px",
    optionPadding: "0 16px",
    optionMargin: "0 0 8px 0",
};
export const Wrapper = styled.div(({ theme: { wrapperWidth } }) => `
  ${comp("width", wrapperWidth)}
`);
export const Option = styled.div(({ theme: { optionWidth, optionHeight, optionPadding, optionMargin }, selected }) => `
  display: flex;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #${selected ? "1792FF" : "CCDAE9"};
  ${comp("width", optionWidth)}
  ${comp("height", optionHeight)}
  ${comp("padding", optionPadding)}
  ${comp("margin", optionMargin)}
`);
export const Checked = styled.div(({ selected }) => `
  width: 8px;
  height: 8px;
  border-radius: 7px;
  background: #1792ff;
  position: absolute;
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  ${!selected ? "display: none;" : ""}
`);
export const RadioButton = styled.div `
  box-sizing: border-box;
  min-width: 14px;
  max-width: 14px;
  min-height: 14px;
  max-height: 14px;
  border-radius: 7px;
  background: #ffffff;
  border: 1px solid ${currentTheme.colors?.border};
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
`;
//# sourceMappingURL=styled.js.map