Resizable

export const Resizable: ComponentMultiStyle<"Resizable"> = {
  baseStyle: ({ direction: d }) => ({
    container: {},
    item: {},
    trigger: {},
    icon: {
      color: ["blackAlpha.600", "whiteAlpha.700"],
      rotate: d === "vertical" ? "90deg" : "0deg",
    },
  }),

  variants: {
    border: ({ direction: d }) => ({
      trigger: {
        bg: "border",
        ...(d === "vertical" ? { h: "px" } : { w: "px" }),
        _focus: {
          outline: "none",
        },
        _focusVisible: {
          outline: "none",
          bg: "focus",
        },
        _after: {
          content: "''",
          position: "absolute",
          ...(d === "vertical"
            ? { left: "0", right: "0", transform: "translateY(-50%)" }
            : { top: "0", bottom: "0", transform: "translateX(-50%)" }),
          ...(d === "vertical" ? { h: "2" } : { w: "2" }),
        },
      },
      icon: {
        p: "1",
        bg: "border",
        rounded: "full",
      },
    }),
    spacer: ({
      direction: d,
      theme: t,
      colorMode: m,
      colorScheme: c = "gray",
    }) => ({
      trigger: {
        ...(d === "vertical" ? { p: "1" } : { p: "1" }),
        _after: {
          transitionProperty: "common",
          transitionDuration: "slower",
          bg: "transparent",
          content: "''",
          display: "block",
          rounded: "full",
          ...(d === "vertical" ? { w: "full", h: "2" } : { w: "2", h: "full" }),
        },
        _dark: {
          _after: {
            bg: "transparent",
          },
        },
        _focus: {
          outline: "none",
        },
        _active: {
          _after: {
            bg: isGray(c) ? "border" : `${c}.50`,
          },
          _dark: {
            _after: {
              bg: isGray(c)
                ? "border"
                : transparentizeColor(`${c}.600`, 0.12)(t, m),
            },
          },
        },
        _focusVisible: {
          outline: "none",
          _after: {
            bg: isGray(c) ? "border" : `${c}.100`,
          },
          _dark: {
            _after: {
              bg: isGray(c)
                ? "border"
                : transparentizeColor(`${c}.600`, 0.24)(t, m),
            },
          },
        },
      },
      icon: {
        transitionProperty: "common",
        transitionDuration: "slower",
        _active: {
          color: ["transparent", "transparent"],
        },
      },
    }),
    unstyled: ({ direction: d }) => ({
      trigger: {
        _after: {
          content: "''",
          position: "absolute",
          ...(d === "vertical"
            ? { left: "0", right: "0", transform: "translateY(-50%)" }
            : { top: "0", bottom: "0", transform: "translateX(-50%)" }),
          ...(d === "vertical" ? { h: "2" } : { w: "2" }),
        },
      },
    }),
  },

  defaultProps: {
    variant: "border",
    colorScheme: "gray",
  },
}