const RadioConfig = {
  parts: ["container", "outerBox", "innerBox", "text"],
  baseStyle: {
    container: {
      my: "1",
      spacing: "2.5",
      _disabled: {
        opacity: 0.5
      }
    },
    outerBox: {
      p: "0.5",
      borderWidth: 2,
      borderRadius: "full",
      alignSelf: "center",
      borderColor: "neutral.300",
      _invalid: {
        borderColor: "danger.500"
      },
      transition: {
        duration: 50
      }
    },
    innerBox: {
      w: "100%",
      h: "100%",
      borderRadius: "full",
      transition: {
        duration: 50
      }
    },
    text: {
      alignSelf: "center"
    }
  },
  sizes: {
    xs: {
      outerBox: {
        p: 0.5,
        w: 17,
        h: 17
      },
      text: {
        variant: "p4"
      }
    },
    s: {
      outerBox: {
        p: 1,
        w: 21,
        h: 21
      },
      text: {
        variant: "p3"
      }
    },
    m: {
      outerBox: {
        p: 1,
        w: 25,
        h: 25
      },
      text: {
        variant: "p3"
      }
    },
    l: {
      outerBox: {
        p: 1.5,
        w: 29,
        h: 29
      },
      text: {
        variant: "p2"
      }
    }
  },
  variants: {
    filled: {
      outerBox: {
        animate: {
          backgroundColor: {
            light: "neutral.200",
            dark: "neutral.900"
          }
        },
        borderColor: {
          light: "neutral.300",
          dark: "neutral.600"
        },
        _checked: {
          bgColor: "primary.500",
          borderColor: "primary.500"
        }
      },
      innerBox: {
        animate: {
          backgroundColor: {
            light: "neutral.200",
            dark: "neutral.900"
          }
        },
        _checked: {
          backgroundColor: {
            light: "neutral.50",
            dark: "neutral.900"
          }
        }
      }
    },
    outline: {
      outerBox: {
        backgroundColor: "transparent",
        animate: {
          borderColor: {
            light: "neutral.400",
            dark: "neutral.500"
          }
        },
        _checked: {
          borderColor: "primary.500"
        }
      },
      innerBox: {
        animate: {
          backgroundColor: {
            light: "neutral.50",
            dark: "neutral.800"
          }
        },
        _checked: {
          backgroundColor: "primary.500"
        }
      }
    }
  },
  defaults: {
    size: "m",
    variant: "filled"
  }
};
export default RadioConfig;
//# sourceMappingURL=radio.config.js.map