import { getSizeStyles as i } from "../../../../utils/getSizeStyles/getSizeStyles.js";
import { getSingleLineInputLineHeight as d, getTypographyStyles as e } from "../../../../utils/getTypographyStyles.js";
import { getSharedInputStateColors as p } from "../../../../utils/getSharedInputStateColors.js";
import { DATE_RANGE_PICKER_CLASSES as n } from "./constants.js";
const u = {
  /**
   * Estilos para el elemento raíz del DateRangePicker.
   */
  root: ({ theme: r, ownerState: o }) => {
    const a = p(r, !!o?.error);
    return {
      "&&&": {
        width: "100%",
        "& .rs-picker": {
          width: "100%"
        },
        // input group
        ".rs-input-group": {
          width: "100%",
          ".rs-input-group-addon": {
            padding: 0,
            ...i(r, o?.size || "medium", "action", (t) => ({
              height: `calc(${t} - 2px)!important`,
              width: `calc(${t} - 2px)!important`,
              maxWidth: `calc(${t} - 2px)!important`,
              minWidth: `calc(${t} - 2px)!important`,
              maxHeight: `calc(${t} - 2px)!important`,
              minHeight: `calc(${t} - 2px)!important`
            }))
          },
          "& .rs-input": {
            backgroundColor: "transparent",
            color: r.vars.palette.text.primary,
            paddingTop: 0,
            paddingBottom: 0,
            paddingLeft: r.vars.size.baseSpacings.sp1,
            paddingRight: r.vars.size.baseSpacings.sp1,
            ...e(r.generalSettings.isMobile, o?.size || "medium", "bodyStandard"),
            ...d()
          },
          "& .rs-btn-close": {
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            "& svg": {
              width: "12px",
              height: "12px",
              fill: r.vars.palette.text.primary
            }
          },
          borderRadius: r.vars.size.borderRadius["r1-5"],
          borderColor: `${a.borderColor}!important`,
          border: r.vars.size.borderStroke.actionInput,
          ...o?.variant === "text" ? {
            borderTop: 0,
            borderRight: 0,
            borderLeft: 0,
            borderRadius: 0
          } : {},
          backgroundColor: o?.variant === "contained" ? r.vars.palette.default.enabledOpacity : r.vars.palette.background.default,
          transition: "all 0.3s ease",
          paddingLeft: r.vars.size.baseSpacings.sp1,
          boxShadow: "unset",
          outline: "unset",
          ...i(r, o?.size || "medium", "action"),
          "&:hover": {
            backgroundColor: a.hoverBackgroundColor,
            borderColor: `${a.hoverBorderColor}!important`
          },
          '&:focus, &[data-focus="true"]': {
            borderColor: `${a.focusBorderColor}!important`,
            ...o?.variant === "text" ? {
              boxShadow: `0px 1.5px 0px 0px ${a.focusRingColor} !important`
            } : {
              boxShadow: `0px 0px 0px 1.5px ${a.focusRingColor} !important`
            }
          }
        },
        // Estilos para el drawer en mobile (se renderiza en un portal separado)
        // El drawer se renderiza fuera del árbol del componente, por lo que usamos un selector global
        // que apunta al drawer cuando contiene el popup con nuestra clase
        "body .rs-drawer .rs-drawer-dialog": {
          backgroundColor: "red!important"
        }
      }
    };
  },
  /**
   * Estilos personalizados para el componente Skeleton.
   */
  skeleton: ({ ownerState: r, theme: o }) => ({
    [`&.${n.skeleton}`]: {
      display: "flex",
      borderRadius: o.vars.size.borderRadius["r1-5"],
      ...i(
        o,
        r?.size || "medium",
        "action"
      )
    }
  })
};
export {
  u as dateRangePickerStyles
};
