import { globalColor } from "@/utils/colorBuilder"
import { css } from "@emotion/react"

export const directionPaddingContainerStyle = css`
  display: flex;
  padding: 8px 16px;
`

export const setterContainerStyle = css`
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
`

export const optionsIconHotSpotStyle = css`
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
`

export const prefixContainerStyle = css`
  color: ${globalColor("grayBlue-04")};
  font-size: 12px;
`

// export const OtpStyle = {
//   width: '50px',
//   fontSize:"8px",
//   fontWeight: 'bold',
//   padding:"4px",
//   borderRadius: myTheme.shape.borderRadius * 2,
//   textAlign: 'center',
//   color: mytheme.palette.text.secondary,
//   background: myTheme.palette.secondary.main,
//   border: `1.5px solid transparent`,
//   "&:not([value=''])": {
//     border: `1.5px solid ${myTheme.palette.primary.main}`
//   },
//   "&:hover": {
//     backgroundColor: mytheme.palette.grey[300],
//     border: `1.5px solid ${myTheme.palette.primary.main}`
//   },

//   '&:focus': {
//     border: `1.5px solid ${myTheme.palette.primary.main}`
//   },

//   '&:focus-visible': {
//     outline: 'none',
//     border: `1.5px solid ${myTheme.palette.primary.main}`
//   }
// }
// primary: {
//   main: "#eef2f6",
// },
// secondary: {
//   main: "#ffffff",
// },
// text: {
//   primary: "#000000",
//   button: "#ffffff",
//   input: "#000000",
//   iconButton: "#3949ab",
// },
// background: {
//   paper: "#ffffff",
//   button: "#3949ab",
//   input: "#ffffff",
//   default: "#eef2f6",
//   iconButton: "#ede7f6",
// },

export const OtpStyle = {
  width: '50px',
  fontSize:"8px",
  fontWeight: 'bold',
  padding:"4px",
  borderRadius: "40px",
  border:"0.5px solid gray",
  textAlign: 'center',
  color: "#000000",
  background: "#ffffff",
  // border: `1.5px solid transparent`,
  "&:not([value=''])": {
    border: `1.5px solid #eef2f6`
  },
  "&:hover": {
    backgroundColor: "#f0f0f0",
    border: `1.5px solid #eef2f6`
  },

  '&:focus': {
    border: `1.5px solid #eef2f6`
  },

  '&:focus-visible': {
    outline: 'none',
    border: `1.5px solid #eef2f6`
  }
}