import { PRIMARY_COLORS_LIGHT as t, PRIMARY_COLORS_DARK as n } from "@m4l/styles";
import { getTypographyStyles as d } from "../../utils/getTypographyStyles.js";
import { varFade as s } from "../animate/variants/fade.js";
import { getSizeStyles as l } from "../../utils/getSizeStyles/getSizeStyles.js";
const g = {
  /**
   * Estilos css de la ranura root
   */
  root: ({ theme: r, ownerState: o }) => ({
    top: 0,
    right: 0,
    bottom: 0,
    transform: "unset!important",
    padding: r.vars.size.baseSpacings.sp6,
    opacity: "1!important",
    display: "flex",
    position: "fixed",
    width: o?.width,
    flexDirection: "column",
    gap: r.vars.size.baseSpacings.sp6,
    boxShadow: r.vars.customShadows?.z4,
    overflowY: "auto",
    zIndex: r.zIndex.drawer + 3,
    ...o?.themeDirection === "ltr" && {
      borderTopLeftRadius: r.vars.size.borderRadius.r3,
      borderBottomLeftRadius: r.vars.size.borderRadius.r3
    },
    ...o?.themeDirection === "rtl" && {
      borderTopRightRadius: r.vars.size.borderRadius.r3,
      borderBottomRightRadius: r.vars.size.borderRadius.r3
    },
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette.border.secondary,
    backgroundColor: r.vars.palette.background.base,
    ...o?.themeDirection !== "rtl" ? s({
      distance: o?.width,
      durationIn: 0.32,
      durationOut: 0.32
    }).inRight : s({
      distance: o?.width,
      durationIn: 0.32,
      durationOut: 0.32
    }).inLeft
  }),
  /**
   * Estilos css de la ranura backdrop
   */
  backdrop: ({ theme: r }) => ({
    background: "transparent",
    zIndex: r.zIndex.drawer + 1,
    transform: "unset",
    opacity: 1
  }),
  /**
   * Estilos css de la ranura header
   */
  headerContainer: () => ({
    width: "100%",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }),
  /**
   * Estilos css de la ranura headerActions
   */
  headerActions: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    width: "fit-content",
    alignItems: "center",
    padding: r.vars.size.baseSpacings["sp0-5"],
    gap: r.vars.size.baseSpacings["sp0-5"],
    borderRadius: r.vars.size.borderRadius.r2,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette.border.disabled,
    backgroundColor: r.vars.palette.background.default
  }),
  /**
   * Estilos css de la ranura content
   */
  bodyContent: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    position: "relative",
    overflowY: "auto",
    width: "100%",
    gap: r.vars.size.baseSpacings.sp6
  }),
  /**
   * Estilos css de la ranura settingContainer
   */
  settingContainer: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "column",
    padding: r.vars.size.baseSpacings.sp4,
    gap: r.vars.size.baseSpacings.sp4,
    borderRadius: r.vars.size.borderRadius.r2,
    backgroundColor: r.vars.palette.background.default
  }),
  /**
   * Estilos css de la ranura settingIconTitle
   */
  settingIconTitle: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings["sp2-5"],
    justifyContent: "flex-start",
    alignItems: "center"
  }),
  /**
   * Estilos css de la ranura settingItemContent
   */
  settingItemContent: ({ theme: r }) => ({
    display: "flex",
    flexDirection: "row",
    gap: r.vars.size.baseSpacings.sp4,
    justifyContent: "space-between"
  }),
  /**
   * Estilos css de la ranura settingItem
   */
  settingItem: ({ theme: r, ownerState: o }) => ({
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%",
    borderRadius: r.vars.size.borderRadius.r2,
    border: r.vars.size.borderStroke.container,
    borderColor: r.vars.palette.border.disabled,
    padding: r.vars.size.baseSpacings.sp2,
    outline: "unset",
    "& .M4LIcon-root": {
      width: r.vars.size.baseSpacings.sp5,
      height: r.vars.size.baseSpacings.sp5
    },
    ...o?.onChange ? {
      transition: "all 0.3s ease",
      cursor: "pointer",
      "&:hover": {
        backgroundColor: r.vars.palette.default.hoverOpacity
      },
      "&:active": {
        backgroundColor: r.vars.palette.default.activeOpacity
      },
      "&:focus-visible": {
        borderColor: r.vars.palette.border.main,
        boxShadow: r.vars.customShadows?.primary
      },
      ...o?.selected ? {
        borderColor: r.vars.palette.border.main,
        backgroundColor: r.vars.palette.primary.enabledOpacity,
        "&:hover": {
          backgroundColor: r.vars.palette.primary.hoverOpacity
        },
        "&:active": {
          backgroundColor: r.vars.palette.primary.activeOpacity
        }
      } : {}
    } : {}
  }),
  /**
   * Estilos css de la ranura settingItemColorContainer
   */
  settingItemColorContainer: () => ({
    display: "flex",
    flexDirection: "row",
    width: "auto",
    height: "auto",
    position: "relative"
  }),
  /**
   * Estilos css de la ranura settingItemColor
   */
  settingItemColor: ({ theme: r, ownerState: o }) => {
    const i = o?.color ?? "patronus", e = o?.mode === "light" ? t[i] : n[i];
    return {
      ...l(
        r,
        o?.size || "medium",
        "box",
        (a) => ({
          width: a,
          height: a
        })
      ),
      "&:focus-visible": {
        borderColor: r.vars.palette.border.main,
        boxShadow: r.vars.customShadows?.primary,
        "&:after": {
          content: '""',
          position: "absolute",
          inset: "-4px",
          borderRadius: "40% / 45%",
          boxShadow: `0 0 0 1px ${e.focus}`,
          zIndex: 1
        }
      },
      ...o?.selected ? {
        "&:before": {
          content: '""',
          position: "absolute",
          inset: "0",
          borderRadius: r.vars.size.borderRadius.r3,
          boxShadow: `0 0 0 1px ${e.enabled}`,
          backgroundColor: e.enabledOpacity,
          zIndex: 1
        }
      } : {},
      "& .M4LIcon-icon": {
        display: "flex",
        flexDirection: "row",
        backgroundColor: e.enabled,
        outline: "unset",
        position: "relative",
        overflow: "visible",
        transition: "all 0.3s ease",
        ...o?.onChange ? {
          cursor: "pointer",
          transition: "all 0.3s ease",
          "&:hover": {
            backgroundColor: e.hover
          },
          "&:active": {
            backgroundColor: e.active
          }
        } : {}
      }
    };
  },
  /**
   * Estilos css de la ranura settingFullscreen
   */
  settingFullscreen: ({ theme: r, ownerState: o }) => ({
    /*  borderRadius: theme.vars.size.borderRadius['r1-5'],
    border: 'unset',
    outline: 'unset', */
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: r.vars.size.borderRadius["r1-5"],
    "& .MuiTypography-root": {
      width: "fit-content",
      ...d(
        r.generalSettings.isMobile,
        o?.size || "medium",
        "bodyDens"
      )
    }
  }),
  /**
   * Estilos css de la ranura icon
   */
  icon: {},
  /**
   * Estilos css de la ranura typography
   */
  typography: {},
  /**
   * Estilos css de la ranura divider
   */
  divider: {}
};
export {
  g as settingsLayoutStyles
};
