import { ColorItem } from "../core/Colors";
import WebImage from "../core/WebImage";
import { IStyleDeclaration } from "../web/styles/IStyleDeclaration";

export type StylePosition = "" | "default" | "initial" | "static" | "relative" | "absolute" | string;
export type TextAlignType = "" | "default" | "initial" | "left" | "right" | "center" | "justify";
export type FloatPosition = "" | "default" | "none" | "left" | "right" | "initial" | "inherit";
export type OverFlowType = "" | "default" | "visible" | "hidden" | "scroll" | "auto";
export type ItemAlignType =  "" | "default" | "stretch" | "center" |"flex-start" | "flex-end" | "baseline" |
"initial" | "inherit" | "start" | "end";
export type SelfAlignType =  "" | "default" | "auto" | "stretch" | "center" |"flex-start" | "flex-end" | "baseline" |
"initial" | "inherit";
export type ContentAlignType =  "" | "default" | "stretch" | "center" |"flex-start" | "flex-end" | "space-between" |
"space-around" | "initial" | "inherit";
export type JustifyType = "" | "default" | "auto" | "inter-word" | "inter-character" | "none" | "initial" |
"inherit";
export type TextSize = "" | "default" | "medium" | "xx-small" | "x-small" | "small" | "large" |
"x-large" | "xx-large" | "smaller" | "larger" | "initial" | "inherit";
export type AnimationType = "" | "animation-name" | "animation-duration" | "animation-timing-function" |
"animation-delay" | "animation-iteration-count" | "animation-direction" |"animation-fill-mode" |
"animation-play-state" | "initial" | "inherit";
export type AnimationNameType = "" | "keyframename" | "none" | "initial" | "inherit";
export type AnimationDirection = "" | "default" | "reverse" | "alternate" | "alternate-reverse" | "initial" |
"inherit";
export type AnimationTimeType = "" | "initial" | "inherit";
export type AnimationModeType = "" | "default" | "none" | "forwards" | "backwards" | "both" | "initial" |
"inherit";
export type IterationCount = "" | "default" | "infinite" | "initial" |"inherit";
export type PlayState = "" | "default" | "paused" | "running" | "initial" | "inherit";
export type TimingFunction = "" | "default" | "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" |
"step-start" | "step-end" | "steps()" | "cubic-bezier()" | "initial" | "inherit";
export type Visibility = "" | "default" | "visible" | "hidden" | "initial" | "inherit";
export type BackgroundType = "" | "background-color" | "background-image" | "background-position" |
"background-size" | "background-repeat" | "background-origin" |"background-clip" | "background-attachment" |
"initial" | "inherit";
export type BackgroundAttachmentType = "" | "default" | "scroll" | "fixed" | "local" |"initial" | "inherit" |
string;
export type BackgroundBlendType = "" | "default" | "normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" |
"color-dodge" | "saturation" | "color" | "luminosity" |"initial" | "inherit";
export type BackgroundClipType = "" | "default" | "border-box" | "padding-box" | "content-box" |"initial" |
"inherit";
export type BackgroundImageType = "" | "default" | "url()" | "none" | "linear-gradient()" |"radial-gradient()" |
"repeating-linear-gradient()" | "repeating-radial-gradient()" | "initial" | "inherit";
export type BackgroundOriginType = "" | "default" | "padding-box" | "border-box" | "content-box" |"initial" |
"inherit";
export type BackgroundPositionType = "" | "default" | "left top" | "left center" | "left bottom" |"right top" |
"right center" | "right bottom" | "center top" | "center center" | "center bottom" | "0% 0%" | "0px 0px" |
"initial" | "inherit";
export type BackgroundRepeatType = "" | "default" | "repeat" | "repeat-x" | "repeat-y" | "no-repeat" | "space" |
"round" |"initial" | "inherit";
export type BackgroundSizeType = "" | "default" | "auto" | "0px" | "0px 0px" | "0%" | "50% 50%" | "cover" |
"contain" |"initial" | "inherit";
export type BorderStyleType = "" | "default" | "none" | "hidden" | "dotted" | "dashed" | "solid" | "double" |
"groove" | "ridge" | "inset" | "outset" | "initial" | "inherit";
export type CommonWidthType = "" | "default" | "medium" | "thin" | "thick" | "initial" | "inherit";
export type BorderCollapseType = "" | "default" | "separate" | "collapse" | "initial" | "inherit";
export type BorderImageRepeatType = "" | "default" | "stretch" | "repeat" | "round" | "space" | "initial" |
"inherit";
// export type BorderRadiusType = "" | "default" | "0px" | "0px 0px" | "0px 0px 0px" | "0px 0px 0px" | "0%" |
// "initial" | "inherit";
export type BorderSpacingType = "" | "default" | "0px" | "0px 0px" | "initial" | "inherit" | null | string;
export type BoxSizingType = "" | "default" | "border-box" | "content-box" |"initial" | "inherit";
export type CaptionSideType = "" | "default" | "top" | "bottom" | "initial" | "inherit";
export type ClearType = "" | "default" | "none" | "left" |"right" | "both" | "initial" | "inherit";
export type ColumnCountType = "" | "default" | "auto" | "initial" | "inherit" | number;
export type ColumnGapType = "" | "default" | "normal" | "initial" | "inherit";
export type ContentType = "" | "default" | "none" | "normal" | "counter" | "attr()" | "open-quote" | "close-quote" |
"no-open-quote" | "no-close-quote" | "url()" | "initial" | "inherit";
export type CursorType = "" | "alias" | "all-scroll" | "auto" | "cell" |"context-menu" |"col-resize" | "copy" |
"crosshair" | "default" | "e-resize" | "ew-resize" | "grab" | "grabbing" |"help" |"move" | "n-resize" | "ne-resize" |
"nesw-resize" | "ns-resize" | "nw-resize" | "nwse-resize" | "no-drop" | "none" | "not-allowed" | "pointer" |
"progress" | "row-resize" | "s-resize" | "se-resize" | "sw-resize" | "text" | "url()" | "vertical-text" | "w-resize" |
"wait" | "zoom-in" | "zoom-out" |"initial" | "inherit";
export type DirectionType = "" | "default" | "ltr" | "rtl" | "initial" | "inherit";
export type DisplayType = "" | "default" | "inline" | "block" | "contents" |"flex" | "grid" | "inline-block" |
"inline-flex" | "inline-grid" | "inline-table" | "list-item" | "run-in" | "table" | "table-caption" |
"table-column-group" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-cell" |
"table-column" | "table-row" | "none" | "none" | "initial" | "inherit";
export type EmptyCellType = "" | "default" | "show" | "hide" | "initial" | "inherit";
export type FilterType = "" | "none" | "blur()" | "brightness()" | "contrast()" | "drop-shadow()" | "grayscale()" |
"hue-rotate()" | "invert()" | "opacity()" | "saturate()" | "sepia()" | "url()" | "initial" | "inherit";
export type FlexDirectionType = "" | "default" | "row" | "row-reverse" | "column" | "column-reverse" |
"initial" | "inherit";
export type FlexFlowDirectionType = "" | "default" | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" |
"unset" | "wrap" | "wrap-reverse" |"initial" | "inherit";
export type FlexWrapType = "" | "default" | "nowrap" | "wrap" | "wrap-reverse" | "initial" | "inherit";
export type FloatType = "" | "default" | "none" | "left" | "right" | "initial" | "inherit";
export type FontStretchType = "" | "default" | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" |
"normal" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded" | "initial" | "inherit";
export type FontStyleType = "" | "default" | "normal" | "italic" | "oblique" | "initial" | "inherit";
export type FontVariantType = "" | "default" | "normal" | "small-caps" | "initial" | "inherit";
export type FontWeightType = "" | "default" | "normal" | "bold" | "bolder" | "lighter" | "initial" | "inherit" |
string;
export type GridAutoColumnsType = "" | "default" | "auto" | "max-content" | "min-content";
export type GridAutoFlowType = "" | "default" | "row" | "column" | "row dense" | "column dense";
export type GridAutoRowsType = "" | "default" | "auto" | "max-content" | "min-content";
export type JustifyContentType = "" | "default" | "flex-start" | "flex-end" | "center" | "space-between" |
"space-around" | "initial" | "inherit";
export type ListStylePositionType = "" | "default" | "inside" | "max-content" | "outside" | "initial" |
"inherit";
export type ListStyleType = "" | "default" | "disc" | "circle" | "none" | "square";
export type ObjectFitType = "" | "default" | "fill" | "contain" | "cover" | "none" | "scale-down" |
"initial" | "inherit";
export type ObjectPositionType = "" | "default" | "fill" | "contain" | "cover" | "none" | "scale-down" |
"initial" | "inherit";
export type PageBreakCommonType = "" | "default" | "auto" | "always" | "avoid" | "left" | "right" |
"initial" | "inherit";
export type PageBreakInsideType = "" | "default" | "auto"| "avoid" | "initial" | "inherit";
export type ResizeType = "" | "default" | "none" | "both" | "horizontal" | "vertical" | "initial" |
"inherit";
export type TableLayoutType = "" | "default" | "auto" | "fixed" | "initial" | "inherit";
export type TextAlignLastType = "" | "default" | "auto" | "left" | "right" | "center" | "justify" |
"start" | "end" | "initial" | "inherit"| string;
export type TextDecorationType = "" | "none" | "underline" | "overline" | "line-through" |
"initial" | "inherit";
export type TextTransformType = "" | "none" | "capitalize" | "uppercase" | "lowercase" | "initial" |
"inherit";
export type TransformType = "" | "default" | "none" | "matrix()" | "matrix3d()" | "translate()" | "translate3d()" |
"translateX()" | "translateY()" | "translateZ()" | "scale()" | "scale3d()" | "scaleX()" | "scaleY()" | "scaleZ()" |
"rotate()" | "rotate3d()" | "rotateX()" | "rotateY()" | "rotateZ()" | "skew()" | "skewX()" | "skewY()" |
"perspective()" | "initial" | "inherit";
export type TransformStyleType = "" | "default" | "flat" | "preserve-3d" | "initial" | "inherit";
export type VisibilityType = "" | "default" | "visible" | "hidden" | "collapse" | "initial" | "inherit";
export type WhiteSpaceType = "" | "default" | "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" |
"initial" | "inherit";
export type WordBreakType = "" | "default" | "normal" | "break-all" | "keep-all" | "break-word" |
"initial" | "inherit";
export type WordSpacingType = "" | "default" | "normal" | "initial" | "inherit";
export type WordWrapType = "" | "default" | "normal" | "break-word" | "initial" | "inherit";

export type Units = "" | "px" | "pt" | "%" | "rem";

export interface IFlexAttributes {
    direction?: FlexDirectionType;
    alignItems?: ItemAlignType;
    justifyContent?: JustifyContentType;
    stretch?: boolean;
    inline?: boolean;
    /** Try to keep gap an even number as it hides borders of input/textarea for odd numbers */
    gap?: number;
}

export function toUnit(n: number | string, unit: string) {
    if (!unit) {
        unit = "";
    }
    return typeof n === "number" ? n + unit : n;
}

export interface IRect {
    top?: number | string;
    left?: number | string;
    right?: number | string;
    bottom?: number | string;
    width?: number | string;
    height?: number | string;
}

export class AtomStyleRules {

    public style: IStyleDeclaration = {};

    public name: string;

    constructor(name: string | object) {
        if (typeof name === "string") {
            this.name = name;
        } else {
            this.style = name ?? {};
        }
    }

    public alignContent(value: ContentAlignType) {
        if (value !== undefined && value !== null) {
            this.style.alignContent = value;
        }
        return this;
    }

    public alignItems(value: ItemAlignType) {
        if (value !== undefined && value !== null) {
            this.style.alignItems = value;
        }
        return this;
    }

    public alignSelf(value: SelfAlignType) {
        if (value !== undefined && value !== null) {
            this.style.alignSelf = value;
        }
        return this;
    }

    public alignmentBaseline(value: string) {
        if (value !== undefined && value !== null) {
            this.style.alignmentBaseline = value;
        }
        return this;
    }

    public animation(value: AnimationType) {
        if (value !== undefined && value !== null) {
            this.style.animation = value;
        }
        return this;
    }

    public animationDelay(value: AnimationTimeType) {
        if (value !== undefined && value !== null) {
            this.style.animationDelay = value;
        }
        return this;
    }

    public animationDirection(value: AnimationDirection) {
        if (value !== undefined && value !== null) {
            this.style.animationDirection = value;
        }
        return this;
    }

    public animationDuration(value: AnimationTimeType) {
        if (value !== undefined && value !== null) {
            this.style.animationDuration = value;
        }
        return this;
    }

    public animationFillMode(value: AnimationModeType) {
        if (value !== undefined && value !== null) {
            this.style.animationFillMode = value;
        }
        return this;
    }

    public animationIterationCount(value: IterationCount) {
        if (value !== undefined && value !== null) {
            this.style.animationIterationCount = value;
        }
        return this;
    }

    public animationName(value: AnimationNameType) {
        if (value !== undefined && value !== null) {
            this.style.animationName = value;
        }
        return this;
    }

    public animationPlayState(value: PlayState) {
        if (value !== undefined && value !== null) {
            this.style.animationPlayState = value;
        }
        return this;
    }

    public animationTimingFunction(value: TimingFunction) {
        if (value !== undefined && value !== null) {
            this.style.animationTimingFunction = value;
        }
        return this;
    }

    public backfaceVisibility(value: Visibility) {
        if (value !== undefined && value !== null) {
            this.style.backfaceVisibility = value;
        }
        return this;
    }

    public background(value: BackgroundType) {
        if (value !== undefined && value !== null) {
            this.style.background = value;
        }
        return this;
    }

    public backgroundAttachment(value: BackgroundAttachmentType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundAttachment = value;
        }
        return this;
    }

    public backgroundBlendMode(value: BackgroundBlendType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundBlendMode = value;
        }
        return this;
    }

    public backgroundClip(value: BackgroundClipType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundClip = value;
        }
        return this;
    }

    public backgroundColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.backgroundColor = value;
        }
        return this;
    }

    public backgroundImage(value: string | WebImage) {
        if (value !== undefined && value !== null) {
            this.style.backgroundImage = value;
        }
        return this;
    }

    public backgroundOrigin(value: BackgroundOriginType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundOrigin = value;
        }
        return this;
    }

    public backgroundPosition(value: BackgroundPositionType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundPosition = value;
        }
        return this;
    }

    public backgroundPositionX(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.backgroundPositionX = toUnit(value, unit);
        }
        return this;
    }

    public backgroundPositionY(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.backgroundPositionY = toUnit(value, unit);
        }
        return this;
    }

    public backgroundRepeat(value: BackgroundRepeatType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundRepeat = value;
        }
        return this;
    }

    public backgroundSize(value: BackgroundSizeType) {
        if (value !== undefined && value !== null) {
            this.style.backgroundSize = value;
        }
        return this;
    }

    public baselineShift(value: string) {
        if (value !== undefined && value !== null) {
            this.style.baselineShift = value;
        }
        return this;
    }

    public border(value: string) {
        if (value !== undefined && value !== null) {
            this.style.border = value;
        }
        return this;
    }

    public borderBottom(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderBottom = value;
        }
        return this;
    }

    public borderBottomColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.borderBottomColor = value;
        }
        return this;
    }

    public borderBottomLeftRadius(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.borderBottomLeftRadius = toUnit(value, unit);
        }
        return this;
    }

    public borderBottomRightRadius(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.borderBottomRightRadius = toUnit(value, unit);
        }
        return this;
    }

    public borderBottomStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.borderBottomStyle = value;
        }
        return this;
    }

    public borderBottomWidth(value: CommonWidthType): AtomStyleRules;
    public borderBottomWidth(value: string): AtomStyleRules;
    public borderBottomWidth(value: number, unit?: Units): AtomStyleRules;
    public borderBottomWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
        if (value !== undefined && value !== null) {
            this.style.borderBottomWidth = toUnit(value, unit);
        }
        return this;
    }

    public borderCollapse(value: BorderCollapseType) {
        if (value !== undefined && value !== null) {
            this.style.borderCollapse = value;
        }
        return this;
    }

    public borderColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.borderColor = value;
        }
        return this;
    }

    public borderImage(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderImage = value;
        }
        return this;
    }

    public borderImageOutset(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderImageOutset = value;
        }
        return this;
    }

    public borderImageRepeat(value: BorderImageRepeatType) {
        if (value !== undefined && value !== null) {
            this.style.borderImageRepeat = value;
        }
        return this;
    }

    public borderImageSlice(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderImageSlice = value;
        }
        return this;
    }

    public borderImageSource(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderImageSource = value;
        }
        return this;
    }

    public borderImageWidth(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderImageWidth = value;
        }
        return this;
    }

    public borderLeft(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderLeft = value;
        }
        return this;
    }

    public borderLeftColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.borderLeftColor = value;
        }
        return this;
    }

    public borderLeftStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.borderLeftStyle = value;
        }
        return this;
    }

    public borderLeftWidth(value: CommonWidthType): AtomStyleRules;
    public borderLeftWidth(value: string): AtomStyleRules;
    public borderLeftWidth(value: number, unit?: Units): AtomStyleRules;
    public borderLeftWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
        if (value !== undefined && value !== null) {
            this.style.borderLeftWidth = toUnit(value, unit);
        }
        return this;
    }

    public borderRadius(value: string | number, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.borderRadius = toUnit(value, unit);
        }
        return this;
    }

    public borderRight(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderRight = value;
        }
        return this;
    }

    public borderRightColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.borderRightColor = value;
        }
        return this;
    }

    public borderRightStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.borderRightStyle = value;
        }
        return this;
    }

    public borderRightWidth(value: CommonWidthType): AtomStyleRules;
    public borderRightWidth(value: string): AtomStyleRules;
    public borderRightWidth(value: number, unit?: Units): AtomStyleRules;
    public borderRightWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
        if (value !== undefined && value !== null) {
            this.style.borderRightWidth = toUnit(value, unit);
        }
        return this;
    }

    public borderSpacing(value: BorderSpacingType) {
        if (value !== undefined && value !== null) {
            this.style.borderSpacing = value;
        }
        return this;
    }

    public borderStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.borderStyle = value;
        }
        return this;
    }

    public borderTop(value: string) {
        if (value !== undefined && value !== null) {
            this.style.borderTop = value;
        }
        return this;
    }

    public borderTopColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.borderTopColor = value;
        }
        return this;
    }

    public borderTopLeftRadius(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.borderTopLeftRadius = toUnit(value, unit);
        }
        return this;
    }

    public borderTopRightRadius(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.borderTopRightRadius = toUnit(value, unit);
        }
        return this;
    }

    public borderTopStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.borderTopStyle = value;
        }
        return this;
    }

    public borderTopWidth(value: CommonWidthType): AtomStyleRules;
    public borderTopWidth(value: string): AtomStyleRules;
    public borderTopWidth(value: number, unit?: Units): AtomStyleRules;
    public borderTopWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
        if (value !== undefined && value !== null) {
            this.style.borderTopWidth = toUnit(value, unit);
        }
        return this;
    }

    public borderWidth(value: CommonWidthType): AtomStyleRules;
    public borderWidth(value: string): AtomStyleRules;
    public borderWidth(value: number, unit?: Units): AtomStyleRules;
    public borderWidth(value: number | string | CommonWidthType, unit: Units = "px"): AtomStyleRules {
        if (value !== undefined && value !== null) {
            this.style.borderWidth = toUnit(value, unit);
        }
        return this;
    }

    public bottom(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.bottom = toUnit(value, unit);
        }
        return this;
    }

    public boxShadow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.boxShadow = value;
        }
        return this;
    }

    public boxSizing(value: BoxSizingType) {
        if (value !== undefined && value !== null) {
            this.style.boxSizing = value;
        }
        return this;
    }

    public breakAfter(value: string) {
        if (value !== undefined && value !== null) {
            this.style.breakAfter = value;
        }
        return this;
    }

    public breakBefore(value: string) {
        if (value !== undefined && value !== null) {
            this.style.breakBefore = value;
        }
        return this;
    }

    public breakInside(value: string) {
        if (value !== undefined && value !== null) {
            this.style.breakInside = value;
        }
        return this;
    }

    public captionSide(value: CaptionSideType) {
        if (value !== undefined && value !== null) {
            this.style.captionSide = value;
        }
        return this;
    }

    public caretColor(value: ColorItem | string) {
        this.style.caretColor = value;
        return this;
    }

    public clear(value: ClearType) {
        if (value !== undefined && value !== null) {
            this.style.clear = value;
        }
        return this;
    }

    public clip(value: string) {
        if (value !== undefined && value !== null) {
            this.style.clip = value;
        }
        return this;
    }

    public clipPath(value: string) {
        if (value !== undefined && value !== null) {
            this.style.clipPath = value;
        }
        return this;
    }

    public clipRule(value: string) {
        if (value !== undefined && value !== null) {
            this.style.clipRule = value;
        }
        return this;
    }

    public color(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.color = value;
        }
        return this;
    }

    public colorInterpolationFilters(value: string) {
        if (value !== undefined && value !== null) {
            this.style.colorInterpolationFilters = value;
        }
        return this;
    }

    public columnCount(value: any) {
        if (value !== undefined && value !== null) {
            this.style.columnCount = value;
        }
        return this;
    }

    public columnFill(value: string) {
        if (value !== undefined && value !== null) {
            this.style.columnFill = value;
        }
        return this;
    }

    public columnGap(value: ColumnGapType);
    public columnGap(value: string): AtomStyleRules;
    public columnGap(value: number | string | any, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.columnGap = toUnit(value, unit);
        }
        return this;
    }

    public columnRule(value: string) {
        if (value !== undefined && value !== null) {
            this.style.columnRule = value;
        }
        return this;
    }

    public columnRuleColor(value: any | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.columnRuleColor = value;
        }
        return this;
    }

    public columnRuleStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.columnRuleStyle = value;
        }
        return this;
    }

    public columnRuleWidth(value: CommonWidthType) {
        if (value !== undefined && value !== null) {
            this.style.columnRuleWidth = value;
        }
        return this;
    }

    public columnSpan(value: string) {
        if (value !== undefined && value !== null) {
            this.style.columnSpan = value;
        }
        return this;
    }

    public columnWidth(value: any) {
        if (value !== undefined && value !== null) {
            this.style.columnWidth = value;
        }
        return this;
    }

    public columns(value: string) {
        if (value !== undefined && value !== null) {
            this.style.columns = value;
        }
        return this;
    }

    public content(value: ContentType) {
        if (value !== undefined && value !== null) {
            this.style.content = value;
        }
        return this;
    }

    public counterIncrement(value: string) {
        if (value !== undefined && value !== null) {
            this.style.counterIncrement = value;
        }
        return this;
    }

    public counterReset(value: string) {
        if (value !== undefined && value !== null) {
            this.style.counterReset = value;
        }
        return this;
    }

    public cssFloat(value: FloatPosition) {
        if (value !== undefined && value !== null) {
            this.style.cssFloat = value;
        }
        return this;
    }

    public cssText(value: string) {
        if (value !== undefined && value !== null) {
            this.style.cssText = value;
        }
        return this;
    }

    public cursor(value: CursorType) {
        if (value !== undefined && value !== null) {
            this.style.cursor = value;
        }
        return this;
    }

    public direction(value: DirectionType) {
        if (value !== undefined && value !== null) {
            this.style.direction = value;
        }
        return this;
    }

    public display(value: DisplayType) {
        if (value !== undefined && value !== null) {
            this.style.display = value;
        }
        return this;
    }

    public dominantBaseline(value: string) {
        if (value !== undefined && value !== null) {
            this.style.dominantBaseline = value;
        }
        return this;
    }

    public emptyCells(value: EmptyCellType) {
        if (value !== undefined && value !== null) {
            this.style.emptyCells = value;
        }
        return this;
    }

    public enableBackground(value: string) {
        if (value !== undefined && value !== null) {
            this.style.enableBackground = value;
        }
        return this;
    }

    public fill(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fill = value;
        }
        return this;
    }

    public fillOpacity(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fillOpacity = value;
        }
        return this;
    }

    public fillRule(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fillRule = value;
        }
        return this;
    }

    public filter(value: FilterType) {
        if (value !== undefined && value !== null) {
            this.style.filter = value;
        }
        return this;
    }

    public flex(value: string) {
        if (value !== undefined && value !== null) {
            this.style.flex = value;
        }
        return this;
    }

    public flexBasis(value: string) {
        if (value !== undefined && value !== null) {
            this.style.flexBasis = value;
        }
        return this;
    }

    public flexDirection(value: FlexDirectionType) {
        if (value !== undefined && value !== null) {
            this.style.flexDirection = value;
        }
        return this;
    }

    public flexFlow(value: FlexFlowDirectionType) {
        if (value !== undefined && value !== null) {
            this.style.flexFlow = value;
        }
        return this;
    }

    public flexGrow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.flexGrow = value;
        }
        return this;
    }

    public flexShrink(value: string) {
        if (value !== undefined && value !== null) {
            this.style.flexShrink = value;
        }
        return this;
    }

    public flexWrap(value: FlexWrapType) {
        if (value !== undefined && value !== null) {
            this.style.flexWrap = value;
        }
        return this;
    }

    public float(value: FloatType) {
        if (value !== undefined && value !== null) {
            this.style.float = value;
        }
        return this;
    }

    public floodColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.floodColor = value;
        }
        return this;
    }

    public floodOpacity(value: string) {
        if (value !== undefined && value !== null) {
            this.style.floodOpacity = value;
        }
        return this;
    }

    public font(value: string) {
        if (value !== undefined && value !== null) {
            this.style.font = value;
        }
        return this;
    }

    public fontFamily(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fontFamily = value;
        }
        return this;
    }

    public fontFeatureSettings(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fontFeatureSettings = value;
        }
        return this;
    }

    public fontSize(value: number): AtomStyleRules;
    public fontSize(value: TextSize): AtomStyleRules;
    public fontSize(value: string): AtomStyleRules;
    public fontSize(value: number | string | TextSize, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.fontSize = toUnit(value, unit);
        }
        return this;
    }

    public fontSizeAdjust(value: string) {
        if (value !== undefined && value !== null) {
            this.style.fontSizeAdjust = value;
        }
        return this;
    }

    public fontStretch(value: FontStretchType) {
        if (value !== undefined && value !== null) {
            this.style.fontStretch = value;
        }
        return this;
    }

    public fontStyle(value: FontStyleType) {
        if (value !== undefined && value !== null) {
            this.style.fontStyle = value;
        }
        return this;
    }

    public fontVariant(value: FontVariantType) {
        if (value !== undefined && value !== null) {
            this.style.fontVariant = value;
        }
        return this;
    }

    public fontWeight(value: FontWeightType) {
        if (value !== undefined && value !== null) {
            this.style.fontWeight = value;
        }
        return this;
    }

    public gap(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.gap = toUnit(value, unit);
        }
        return this;
    }

    public glyphOrientationHorizontal(value: string) {
        if (value !== undefined && value !== null) {
            this.style.glyphOrientationHorizontal = value;
        }
        return this;
    }

    public glyphOrientationVertical(value: string) {
        if (value !== undefined && value !== null) {
            this.style.glyphOrientationVertical = value;
        }
        return this;
    }

    public grid(value: string) {
        if (value !== undefined && value !== null) {
            this.style.grid = value;
        }
        return this;
    }

    public gridArea(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridArea = value;
        }
        return this;
    }

    public gridAutoColumns(value: GridAutoColumnsType) {
        if (value !== undefined && value !== null) {
            this.style.gridAutoColumns = value;
        }
        return this;
    }

    public gridAutoFlow(value: GridAutoFlowType) {
        if (value !== undefined && value !== null) {
            this.style.gridAutoFlow = value;
        }
        return this;
    }

    public gridAutoRows(value: GridAutoRowsType) {
        if (value !== undefined && value !== null) {
            this.style.gridAutoRows = value;
        }
        return this;
    }

    public gridColumn(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridColumn = value;
        }
        return this;
    }

    public gridColumnEnd(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridColumnEnd = value;
        }
        return this;
    }

    public gridColumnGap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridColumnGap = value;
        }
        return this;
    }

    public gridColumnStart(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridColumnStart = value;
        }
        return this;
    }

    public gridGap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridGap = value;
        }
        return this;
    }

    public gridRow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridRow = value;
        }
        return this;
    }

    public gridRowEnd(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridRowEnd = value;
        }
        return this;
    }

    public gridRowGap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridRowGap = value;
        }
        return this;
    }

    public gridRowStart(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridRowStart = value;
        }
        return this;
    }

    public gridTemplate(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridTemplate = value;
        }
        return this;
    }

    public gridTemplateAreas(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridTemplateAreas = value;
        }
        return this;
    }

    public gridTemplateColumns(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridTemplateColumns = value;
        }
        return this;
    }

    public gridTemplateRows(value: string) {
        if (value !== undefined && value !== null) {
            this.style.gridTemplateRows = value;
        }
        return this;
    }

    public height(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.height = toUnit(value, unit);
        }
        return this;
    }

    public imeMode(value: string) {
        if (value !== undefined && value !== null) {
            this.style.imeMode = value;
        }
        return this;
    }

    public justifyContent(value: JustifyContentType) {
        if (value !== undefined && value !== null) {
            this.style.justifyContent = value;
        }
        return this;
    }

    public justifyItems(value: string) {
        if (value !== undefined && value !== null) {
            this.style.justifyItems = value;
        }
        return this;
    }

    public justifySelf(value: string) {
        if (value !== undefined && value !== null) {
            this.style.justifySelf = value;
        }
        return this;
    }

    public kerning(value: string) {
        if (value !== undefined && value !== null) {
            this.style.kerning = value;
        }
        return this;
    }

    public layoutGrid(value: string) {
        if (value !== undefined && value !== null) {
            this.style.layoutGrid = value;
        }
        return this;
    }

    public layoutGridChar(value: string) {
        if (value !== undefined && value !== null) {
            this.style.layoutGridChar = value;
        }
        return this;
    }

    public layoutGridLine(value: string) {
        if (value !== undefined && value !== null) {
            this.style.layoutGridLine = value;
        }
        return this;
    }

    public layoutGridMode(value: string) {
        if (value !== undefined && value !== null) {
            this.style.layoutGridMode = value;
        }
        return this;
    }

    public layoutGridType(value: string) {
        if (value !== undefined && value !== null) {
            this.style.layoutGridType = value;
        }
        return this;
    }

    public left(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.left = toUnit(value, unit);
        }
        return this;
    }

    public letterSpacing(value: string) {
        if (value !== undefined && value !== null) {
            this.style.letterSpacing = value;
        }
        return this;
    }

    public lightingColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.lightingColor = value;
        }
        return this;
    }

    public lineBreak(value: string) {
        if (value !== undefined && value !== null) {
            this.style.lineBreak = value;
        }
        return this;
    }

    public lineHeight(value: string) {
        if (value !== undefined && value !== null) {
            this.style.lineHeight = value;
        }
        return this;
    }

    public listStyle(value: string) {
        if (value !== undefined && value !== null) {
            this.style.listStyle = value;
        }
        return this;
    }

    public listStyleImage(value: string) {
        if (value !== undefined && value !== null) {
            this.style.listStyleImage = value;
        }
        return this;
    }

    public listStylePosition(value: ListStylePositionType) {
        if (value !== undefined && value !== null) {
            this.style.listStylePosition = value;
        }
        return this;
    }

    public listStyleType(value: ListStyleType) {
        if (value !== undefined && value !== null) {
            this.style.listStyleType = value;
        }
        return this;
    }

    public margin(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.margin = toUnit(value, unit);
        }
        return this;
    }

    public marginBottom(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginBottom = toUnit(value, unit);
        }
        return this;
    }

    public marginLeft(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginLeft = toUnit(value, unit);
        }
        return this;
    }

    public marginRight(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginRight = toUnit(value, unit);
        }
        return this;
    }

    public marginTop(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginTop = toUnit(value, unit);
        }
        return this;
    }

    public marginInlineStart(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginInlineStart = toUnit(value, unit);
        }
        return this;
    }

    public marginInlineEnd(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginInlineEnd = toUnit(value, unit);
        }
        return this;
    }

    public marginBlockStart(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginBlockStart = toUnit(value, unit);
        }
        return this;
    }

    public marginBlockEnd(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.marginBlockEnd = toUnit(value, unit);
        }
        return this;
    }

    public marker(value: string) {
        if (value !== undefined && value !== null) {
            this.style.marker = value;
        }
        return this;
    }

    public markerEnd(value: string) {
        if (value !== undefined && value !== null) {
            this.style.markerEnd = value;
        }
        return this;
    }

    public markerMid(value: string) {
        if (value !== undefined && value !== null) {
            this.style.markerMid = value;
        }
        return this;
    }

    public markerStart(value: string) {
        if (value !== undefined && value !== null) {
            this.style.markerStart = value;
        }
        return this;
    }

    public mask(value: string) {
        if (value !== undefined && value !== null) {
            this.style.mask = value;
        }
        return this;
    }

    public maskImage(value: string) {
        if (value !== undefined && value !== null) {
            this.style.maskImage = value;
        }
        return this;
    }

    public maxHeight(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.maxHeight = toUnit(value, unit);
        }
        return this;
    }

    public maxWidth(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.maxWidth = toUnit(value, unit);
        }
        return this;
    }

    public minHeight(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.minHeight = toUnit(value, unit);
        }
        return this;
    }

    public minWidth(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.minWidth = toUnit(value, unit);
        }
        return this;
    }

    public msContentZoomChaining(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomChaining = value;
        }
        return this;
    }

    public msContentZoomLimit(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomLimit = value;
        }
        return this;
    }

    public msContentZoomLimitMax(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomLimitMax = value;
        }
        return this;
    }

    public msContentZoomLimitMin(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomLimitMin = value;
        }
        return this;
    }

    public msContentZoomSnap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomSnap = value;
        }
        return this;
    }

    public msContentZoomSnapPoints(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomSnapPoints = value;
        }
        return this;
    }

    public msContentZoomSnapType(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZoomSnapType = value;
        }
        return this;
    }

    public msContentZooming(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msContentZooming = value;
        }
        return this;
    }

    public msFlowFrom(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msFlowFrom = value;
        }
        return this;
    }

    public msFlowInto(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msFlowInto = value;
        }
        return this;
    }

    public msFontFeatureSettings(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msFontFeatureSettings = value;
        }
        return this;
    }

    public msGridColumn(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msGridColumn = value;
        }
        return this;
    }

    public msGridColumnAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msGridColumnAlign = value;
        }
        return this;
    }

    public msGridColumnSpan(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msGridColumnSpan = value;
        }
        return this;
    }

    public msGridColumns(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msGridColumns = value;
        }
        return this;
    }

    public msGridRow(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msGridRow = value;
        }
        return this;
    }

    public msGridRowAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msGridRowAlign = value;
        }
        return this;
    }

    public msGridRowSpan(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msGridRowSpan = value;
        }
        return this;
    }

    public msGridRows(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msGridRows = value;
        }
        return this;
    }

    public msHighContrastAdjust(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msHighContrastAdjust = value;
        }
        return this;
    }

    public msHyphenateLimitChars(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitChars = value;
        }
        return this;
    }

    public msHyphenateLimitLines(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitLines = value;
        }
        return this;
    }

    public msHyphenateLimitZone(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msHyphenateLimitZone = value;
        }
        return this;
    }

    public msHyphens(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msHyphens = value;
        }
        return this;
    }

    public msImeAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msImeAlign = value;
        }
        return this;
    }

    public msOverflowStyle(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msOverflowStyle = value;
        }
        return this;
    }

    public msScrollChaining(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollChaining = value;
        }
        return this;
    }

    public msScrollLimit(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollLimit = value;
        }
        return this;
    }

    public msScrollLimitXMax(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msScrollLimitXMax = value;
        }
        return this;
    }

    public msScrollLimitXMin(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msScrollLimitXMin = value;
        }
        return this;
    }

    public msScrollLimitYMax(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msScrollLimitYMax = value;
        }
        return this;
    }

    public msScrollLimitYMin(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msScrollLimitYMin = value;
        }
        return this;
    }

    public msScrollRails(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollRails = value;
        }
        return this;
    }

    public msScrollSnapPointsX(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollSnapPointsX = value;
        }
        return this;
    }

    public msScrollSnapPointsY(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollSnapPointsY = value;
        }
        return this;
    }

    public msScrollSnapType(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollSnapType = value;
        }
        return this;
    }

    public msScrollSnapX(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollSnapX = value;
        }
        return this;
    }

    public msScrollSnapY(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollSnapY = value;
        }
        return this;
    }

    public msScrollTranslation(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msScrollTranslation = value;
        }
        return this;
    }

    public msTextCombineHorizontal(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msTextCombineHorizontal = value;
        }
        return this;
    }

    public msTextSizeAdjust(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msTextSizeAdjust = value;
        }
        return this;
    }

    public msTouchAction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msTouchAction = value;
        }
        return this;
    }

    public msTouchSelect(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msTouchSelect = value;
        }
        return this;
    }

    public msUserSelect(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msUserSelect = value;
        }
        return this;
    }

    public msWrapFlow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msWrapFlow = value;
        }
        return this;
    }

    public msWrapMargin(value: any) {
        if (value !== undefined && value !== null) {
            this.style.msWrapMargin = value;
        }
        return this;
    }

    public msWrapThrough(value: string) {
        if (value !== undefined && value !== null) {
            this.style.msWrapThrough = value;
        }
        return this;
    }

    public objectFit(value: ObjectFitType) {
        if (value !== undefined && value !== null) {
            this.style.objectFit = value;
        }
        return this;
    }

    public objectPosition(value: ObjectPositionType) {
        if (value !== undefined && value !== null) {
            this.style.objectPosition = value;
        }
        return this;
    }

    public opacity(value: string) {
        if (value !== undefined && value !== null) {
            this.style.opacity = value;
        }
        return this;
    }

    public order(value: string) {
        if (value !== undefined && value !== null) {
            this.style.order = value;
        }
        return this;
    }

    public orphans(value: string) {
        if (value !== undefined && value !== null) {
            this.style.orphans = value;
        }
        return this;
    }

    public outline(value: string) {
        if (value !== undefined && value !== null) {
            this.style.outline = value;
        }
        return this;
    }

    public outlineColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.outlineColor = value;
        }
        return this;
    }

    public outlineOffset(value: string) {
        if (value !== undefined && value !== null) {
            this.style.outlineOffset = value;
        }
        return this;
    }

    public outlineStyle(value: BorderStyleType) {
        if (value !== undefined && value !== null) {
            this.style.outlineStyle = value;
        }
        return this;
    }

    public outlineWidth(value: CommonWidthType) {
        if (value !== undefined && value !== null) {
            this.style.outlineWidth = value;
        }
        return this;
    }

    public overflow(value: OverFlowType) {
        if (value !== undefined && value !== null) {
            this.style.overflow = value;
        }
        return this;
    }

    public overflowX(value: OverFlowType) {
        if (value !== undefined && value !== null) {
            this.style.overflowX = value;
        }
        return this;
    }

    public overflowY(value: OverFlowType) {
        if (value !== undefined && value !== null) {
            this.style.overflowY = value;
        }
        return this;
    }

    public padding(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.padding = toUnit(value, unit);
        }
        return this;
    }

    public paddingBottom(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingBottom = toUnit(value, unit);
        }
        return this;
    }

    public paddingLeft(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingLeft = toUnit(value, unit);
        }
        return this;
    }

    public paddingRight(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingRight = toUnit(value, unit);
        }
        return this;
    }

    public paddingTop(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingTop = toUnit(value, unit);
        }
        return this;
    }

    public paddingInlineStart(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingInlineStart = toUnit(value, unit);
        }
        return this;
    }

    public paddingInlineEnd(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.paddingInlineEnd = toUnit(value, unit);
        }
        return this;
    }

    public pageBreakAfter(value: PageBreakCommonType) {
        if (value !== undefined && value !== null) {
            this.style.pageBreakAfter = value;
        }
        return this;
    }

    public pageBreakBefore(value: PageBreakCommonType) {
        if (value !== undefined && value !== null) {
            this.style.pageBreakBefore = value;
        }
        return this;
    }

    public pageBreakInside(value: PageBreakInsideType) {
        if (value !== undefined && value !== null) {
            this.style.pageBreakInside = value;
        }
        return this;
    }

    public penAction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.penAction = value;
        }
        return this;
    }

    public perspective(value: string) {
        if (value !== undefined && value !== null) {
            this.style.perspective = value;
        }
        return this;
    }

    public perspectiveOrigin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.perspectiveOrigin = value;
        }
        return this;
    }

    public pointerEvents(value: string) {
        if (value !== undefined && value !== null) {
            this.style.pointerEvents = value;
        }
        return this;
    }

    public position(value: StylePosition) {
        if (value !== undefined && value !== null) {
            this.style.position = value;
        }
        return this;
    }

    public quotes(value: string) {
        if (value !== undefined && value !== null) {
            this.style.quotes = value;
        }
        return this;
    }

    public resize(value: ResizeType) {
        if (value !== undefined && value !== null) {
            this.style.resize = value;
        }
        return this;
    }

    public right(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.right = toUnit(value, unit);
        }
        return this;
    }

    public rotate(value: string) {
        if (value !== undefined && value !== null) {
            this.style.rotate = value;
        }
        return this;
    }

    public rowGap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.rowGap = value;
        }
        return this;
    }

    public rubyAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.rubyAlign = value;
        }
        return this;
    }

    public rubyOverhang(value: string) {
        if (value !== undefined && value !== null) {
            this.style.rubyOverhang = value;
        }
        return this;
    }

    public rubyPosition(value: string) {
        if (value !== undefined && value !== null) {
            this.style.rubyPosition = value;
        }
        return this;
    }

    public scale(value: string) {
        if (value !== undefined && value !== null) {
            this.style.scale = value;
        }
        return this;
    }

    public custom(name: string, value: string) {
        this.style[name] = value;
        return this;
    }

    public scrollBarWidth(value: string): AtomStyleRules;
    public scrollBarWidth(value: number, unit?: Units): AtomStyleRules;
    public scrollBarWidth(value: number | string, unit?: Units) {
        this.style["scrollbar-width"] = toUnit(value, unit);
        this.style.subclasses ??= {};
        const ws = this.style.subclasses["::-webkit-scrollbar"] ??= {};
        ws.width = toUnit(value, unit);
        return this;
    }

    public scrollBarColor(thumb: ColorItem | string, bg: ColorItem | string) {
        this.style["scrollbar-color"] = `${thumb} ${bg}`;
        this.style.subclasses ??= {};
        const ws = this.style.subclasses["::-webkit-scrollbar-thumb"] ??= {};
        ws.backgroundColor = bg;
        ws.borderRadius = "20px";
        ws.border = `3px solid ${thumb}`;
        return this;
    }

    public stopColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.stopColor = value;
        }
        return this;
    }

    public stopOpacity(value: string) {
        if (value !== undefined && value !== null) {
            this.style.stopOpacity = value;
        }
        return this;
    }

    public stroke(value: string) {
        if (value !== undefined && value !== null) {
            this.style.stroke = value;
        }
        return this;
    }

    public strokeDasharray(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeDasharray = value;
        }
        return this;
    }

    public strokeDashoffset(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeDashoffset = value;
        }
        return this;
    }

    public strokeLinecap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeLinecap = value;
        }
        return this;
    }

    public strokeLinejoin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeLinejoin = value;
        }
        return this;
    }

    public strokeMiterlimit(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeMiterlimit = value;
        }
        return this;
    }

    public strokeOpacity(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeOpacity = value;
        }
        return this;
    }

    public strokeWidth(value: string) {
        if (value !== undefined && value !== null) {
            this.style.strokeWidth = value;
        }
        return this;
    }

    public tableLayout(value: TableLayoutType) {
        if (value !== undefined && value !== null) {
            this.style.tableLayout = value;
        }
        return this;
    }

    public textAlign(value: TextAlignType) {
        if (value !== undefined && value !== null) {
            this.style.textAlign = value;
        }
        return this;
    }

    public textAlignLast(value: TextAlignLastType) {
        if (value !== undefined && value !== null) {
            this.style.textAlignLast = value;
        }
        return this;
    }

    public textAnchor(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textAnchor = value;
        }
        return this;
    }

    public textCombineUpright(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textCombineUpright = value;
        }
        return this;
    }

    public textDecoration(value: TextDecorationType) {
        if (value !== undefined && value !== null) {
            this.style.textDecoration = value;
        }
        return this;
    }

    public textIndent(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textIndent = value;
        }
        return this;
    }

    public textJustify(value: JustifyType) {
        if (value !== undefined && value !== null) {
            this.style.textJustify = value;
        }
        return this;
    }

    public textKashida(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textKashida = value;
        }
        return this;
    }

    public textKashidaSpace(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textKashidaSpace = value;
        }
        return this;
    }

    public textOverflow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textOverflow = value;
        }
        return this;
    }

    public textShadow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textShadow = value;
        }
        return this;
    }

    public textTransform(value: TextTransformType) {
        if (value !== undefined && value !== null) {
            this.style.textTransform = value;
        }
        return this;
    }

    public textUnderlinePosition(value: string) {
        if (value !== undefined && value !== null) {
            this.style.textUnderlinePosition = value;
        }
        return this;
    }

    public top(value: number | string, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.top = toUnit(value, unit);
        }
        return this;
    }

    public touchAction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.touchAction = value;
        }
        return this;
    }

    public transform(value: TransformType) {
        if (value !== undefined && value !== null) {
            this.style.transform = value;
        }
        return this;
    }

    public transformOrigin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transformOrigin = value;
        }
        return this;
    }

    public transformStyle(value: TransformStyleType) {
        if (value !== undefined && value !== null) {
            this.style.transformStyle = value;
        }
        return this;
    }

    public transition(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transition = value;
        }
        return this;
    }

    public transitionDelay(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transitionDelay = value;
        }
        return this;
    }

    public transitionDuration(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transitionDuration = value;
        }
        return this;
    }

    public transitionProperty(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transitionProperty = value;
        }
        return this;
    }

    public transitionTimingFunction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.transitionTimingFunction = value;
        }
        return this;
    }

    public translate(value: string) {
        if (value !== undefined && value !== null) {
            this.style.translate = value;
        }
        return this;
    }

    public unicodeBidi(value: string) {
        if (value !== undefined && value !== null) {
            this.style.unicodeBidi = value;
        }
        return this;
    }

    public userSelect(value: string) {
        if (value !== undefined && value !== null) {
            this.style.userSelect = value;
        }
        return this;
    }

    public userDrag(value: string) {
        if (value !== undefined && value !== null) {
            this.style.userDrag = value;
        }
        return this;
    }

    public verticalAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.verticalAlign = value;
        }
        return this;
    }

    public visibility(value: VisibilityType) {
        if (value !== undefined && value !== null) {
            this.style.visibility = value;
        }
        return this;
    }

    public webkitAlignContent(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAlignContent = value;
        }
        return this;
    }

    public webkitAlignItems(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAlignItems = value;
        }
        return this;
    }

    public webkitAlignSelf(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAlignSelf = value;
        }
        return this;
    }

    public webkitAnimation(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimation = value;
        }
        return this;
    }

    public webkitAnimationDelay(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationDelay = value;
        }
        return this;
    }

    public webkitAnimationDirection(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationDirection = value;
        }
        return this;
    }

    public webkitAnimationDuration(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationDuration = value;
        }
        return this;
    }

    public webkitAnimationFillMode(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationFillMode = value;
        }
        return this;
    }

    public webkitAnimationIterationCount(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationIterationCount = value;
        }
        return this;
    }

    public webkitAnimationName(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationName = value;
        }
        return this;
    }

    public webkitAnimationPlayState(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationPlayState = value;
        }
        return this;
    }

    public webkitAnimationTimingFunction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAnimationTimingFunction = value;
        }
        return this;
    }

    public webkitAppearance(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitAppearance = value;
        }
        return this;
    }

    public webkitBackfaceVisibility(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBackfaceVisibility = value;
        }
        return this;
    }

    public webkitBackgroundClip(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBackgroundClip = value;
        }
        return this;
    }

    public webkitBackgroundOrigin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBackgroundOrigin = value;
        }
        return this;
    }

    public webkitBackgroundSize(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBackgroundSize = value;
        }
        return this;
    }

    public webkitBorderBottomLeftRadius(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderBottomLeftRadius = value;
        }
        return this;
    }

    public webkitBorderBottomRightRadius(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderBottomRightRadius = value;
        }
        return this;
    }

    public webkitBorderImage(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderImage = value;
        }
        return this;
    }

    public webkitBorderRadius(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderRadius = value;
        }
        return this;
    }

    public webkitBorderTopLeftRadius(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderTopLeftRadius = value;
        }
        return this;
    }

    public webkitBorderTopRightRadius(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBorderTopRightRadius = value;
        }
        return this;
    }

    public webkitBoxAlign(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxAlign = value;
        }
        return this;
    }

    public webkitBoxDirection(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxDirection = value;
        }
        return this;
    }

    public webkitBoxFlex(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxFlex = value;
        }
        return this;
    }

    public webkitBoxOrdinalGroup(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxOrdinalGroup = value;
        }
        return this;
    }

    public webkitBoxOrient(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxOrient = value;
        }
        return this;
    }

    public webkitBoxPack(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxPack = value;
        }
        return this;
    }

    public webkitBoxSizing(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitBoxSizing = value;
        }
        return this;
    }

    public webkitColumnBreakAfter(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnBreakAfter = value;
        }
        return this;
    }

    public webkitColumnBreakBefore(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnBreakBefore = value;
        }
        return this;
    }

    public webkitColumnBreakInside(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnBreakInside = value;
        }
        return this;
    }

    public webkitColumnCount(value: any) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnCount = value;
        }
        return this;
    }

    public webkitColumnGap(value: any) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnGap = value;
        }
        return this;
    }

    public webkitColumnRule(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnRule = value;
        }
        return this;
    }

    public webkitColumnRuleColor(value: any | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnRuleColor = value;
        }
        return this;
    }

    public webkitColumnRuleStyle(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnRuleStyle = value;
        }
        return this;
    }

    public webkitColumnRuleWidth(value: any) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnRuleWidth = value;
        }
        return this;
    }

    public webkitColumnSpan(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnSpan = value;
        }
        return this;
    }

    public webkitColumnWidth(value: any) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumnWidth = value;
        }
        return this;
    }

    public webkitColumns(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitColumns = value;
        }
        return this;
    }

    public webkitFilter(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFilter = value;
        }
        return this;
    }

    public webkitFlex(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlex = value;
        }
        return this;
    }

    public webkitFlexBasis(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexBasis = value;
        }
        return this;
    }

    public webkitFlexDirection(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexDirection = value;
        }
        return this;
    }

    public webkitFlexFlow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexFlow = value;
        }
        return this;
    }

    public webkitFlexGrow(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexGrow = value;
        }
        return this;
    }

    public webkitFlexShrink(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexShrink = value;
        }
        return this;
    }

    public webkitFlexWrap(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitFlexWrap = value;
        }
        return this;
    }

    public webkitJustifyContent(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitJustifyContent = value;
        }
        return this;
    }

    public webkitOrder(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitOrder = value;
        }
        return this;
    }

    public webkitPerspective(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitPerspective = value;
        }
        return this;
    }

    public webkitPerspectiveOrigin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitPerspectiveOrigin = value;
        }
        return this;
    }

    public webkitTapHighlightColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.webkitTapHighlightColor = value;
        }
        return this;
    }

    public webkitTextFillColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.webkitTextFillColor = value;
        }
        return this;
    }

    public webkitTextSizeAdjust(value: any) {
        if (value !== undefined && value !== null) {
            this.style.webkitTextSizeAdjust = value;
        }
        return this;
    }

    public webkitTextStroke(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTextStroke = value;
        }
        return this;
    }

    public webkitTextStrokeColor(value: string | ColorItem) {
        if (value !== undefined && value !== null) {
            this.style.webkitTextStrokeColor = value;
        }
        return this;
    }

    public webkitTextStrokeWidth(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTextStrokeWidth = value;
        }
        return this;
    }

    public webkitTransform(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransform = value;
        }
        return this;
    }

    public webkitTransformOrigin(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransformOrigin = value;
        }
        return this;
    }

    public webkitTransformStyle(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransformStyle = value;
        }
        return this;
    }

    public webkitTransition(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransition = value;
        }
        return this;
    }

    public webkitTransitionDelay(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransitionDelay = value;
        }
        return this;
    }

    public webkitTransitionDuration(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransitionDuration = value;
        }
        return this;
    }

    public webkitTransitionProperty(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransitionProperty = value;
        }
        return this;
    }

    public webkitTransitionTimingFunction(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitTransitionTimingFunction = value;
        }
        return this;
    }

    public webkitUserModify(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitUserModify = value;
        }
        return this;
    }

    public webkitUserSelect(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitUserSelect = value;
        }
        return this;
    }

    public webkitUserDrag(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitUserDrag = value;
        }
        return this;
    }

    public webkitWritingMode(value: string) {
        if (value !== undefined && value !== null) {
            this.style.webkitWritingMode = value;
        }
        return this;
    }

    public whiteSpace(value: WhiteSpaceType) {
        if (value !== undefined && value !== null) {
            this.style.whiteSpace = value;
        }
        return this;
    }

    public widows(value: string) {
        if (value !== undefined && value !== null) {
            this.style.widows = value;
        }
        return this;
    }

    public width(value: string | number, unit: Units = "px") {
        if (value !== undefined && value !== null) {
            this.style.width = toUnit(value, unit);
        }
        return this;
    }

    public wordBreak(value: WordBreakType) {
        if (value !== undefined && value !== null) {
            this.style.wordBreak = value;
        }
        return this;
    }

    public wordSpacing(value: WordSpacingType) {
        if (value !== undefined && value !== null) {
            this.style.wordSpacing = value;
        }
        return this;
    }

    public wordWrap(value: WordWrapType) {
        if (value !== undefined && value !== null) {
            this.style.wordWrap = value;
        }
        return this;
    }

    public writingMode(value: string) {
        if (value !== undefined && value !== null) {
            this.style.writingMode = value;
        }
        return this;
    }

    public zIndex(value: string | number) {
        if (value !== undefined && value !== null) {
            this.style.zIndex = value as any;
        }
        return this;
    }

    public zoom(value: string) {
        if (value !== undefined && value !== null) {
            this.style.zoom = value;
        }
        return this;
    }

    public displayFlex() {
        this.style.display = "flex";
        return this;
    }

    public flexStretch() {
        return this.flex("1 1 100%");
    }

    public roundBorderFull() {
        this.style.borderRadius = "9999px";
        return this;
    }

    public subclass(name: string, style: IStyleDeclaration | AtomStyleRules) {
        if (style instanceof AtomStyleRules) {
            style = style.style;
        }
        const sc = this.style.subclasses ??= {};
        sc[name] = style;
        return this;
    }

    public childSubclass(name: string, style: IStyleDeclaration | AtomStyleRules) {
        return this.subclass(" > " + name, style);
    }

    public subclasses(... styles: AtomStyleRules[]) {
        const sc = this.style.subclasses ??= {};
        for (const iterator of styles) {
            sc[iterator.name] = iterator.style;
        }
        return this;
    }

    /**
     * Creates rule for immediate child like `this > child`
     * @param styles children
     * @returns this
     */
    public childSubclasses(... styles: AtomStyleRules[]) {
        const sc = this.style.subclasses ??= {};
        for (const iterator of styles) {
            sc[" > " + iterator.name] = iterator.style;
        }
        return this;
    }

    public roundBox(bgColor: string | ColorItem, padding: number = 5, radius: number = 5, unit: Units = "px") {
        this.style.padding = toUnit(padding, unit);
        this.style.borderRadius = toUnit(radius, unit);
        this.style.borderColor = bgColor;
        this.style.backgroundColor = bgColor;
        return this;
    }

    public maximizeAbsolute() {
        this.style.position = "absolute";
        this.style.left = 0;
        this.style.top = 0;
        this.style.bottom = 0;
        this.style.right = 0;
        return this;
    }

    public setRect(
        position: string,
        {
            top,
            left,
            right,
            bottom,
            width,
            height
        }: IRect = {},
        unit: Units = "px") {

        this.style.position = position;
        if (typeof top !== "undefined") {
            this.style.top = toUnit(top, unit);
        }
        if (typeof left !== "undefined") {
            this.style.left = toUnit(left, unit);
        }
        if (typeof width !== "undefined") {
            this.style.width = toUnit(width, unit);
        }
        if (typeof height !== "undefined") {
            this.style.height = toUnit(height, unit);
        }
        if (typeof right !== "undefined") {
            this.style.right = toUnit(right, unit);
        }
        if (typeof bottom !== "undefined") {
            this.style.bottom = toUnit(bottom, unit);
        }
        return this;
    }

    public absolutePosition(
        rect: IRect = {},
        unit: Units = "px") {
        return this.setRect("absolute", rect, unit);
    }

    public relativePosition(
        rect: IRect = {},
        unit: Units = "px") {
        return this.setRect("relative", rect, unit);
    }

    public absoluteDockTop(height: number | string, unit: Units = "px") {
        this.style.position = "absolute";
        this.style.left = 0;
        this.style.top = 0;
        this.style.right = 0;
        this.style.height = toUnit(height, unit);
        return this;
    }

    public absoluteDockBottom(top: number | string, unit: Units = "px") {
        this.style.position = "absolute";
        this.style.left = 0;
        this.style.bottom = 0;
        this.style.right = 0;
        this.style.top = toUnit(top, unit);
        return this;
    }

    public defaultBoxShadow() {
        this.style.boxShadow = "rgba(50, 50, 105, 0.07) 0px 2px 5px 0px, rgba(0, 0, 0, 0.03) 0px 1px 1px 0px;";
        this.style.border = "solid 1px rgba(0, 0, 0, 0.05)";
        return this;
    }

    public textEllipsis() {
        this.style.overflow = "hidden";
        this.style.whiteSpace = "nowrap";
        this.style.textOverflow = "ellipsis";
        return this;
    }

    public hover(style: AtomStyleRules) {
        const sc = this.style.subclasses ??= {};
        sc[":hover"] = { ... sc[":hover"], ... style.style };
        return this;
    }

    public focus(style: AtomStyleRules) {
        const sc = this.style.subclasses ??= {};
        sc[":focus"] = { ... sc[":focus"], ... style.style };
        return this;
    }

    public hoverBackgroundColor(color: ColorItem | string) {
        const sc = this.style.subclasses ??= {};
        const hover = sc[":hover"] ??= {};
        hover.backgroundColor = color;
        return this;
    }

    public hoverColor(color: ColorItem | string) {
        const sc = this.style.subclasses ??= {};
        const hover = sc[":hover"] ??= {};
        hover.color = color;
        return this;
    }

    public and( ... styles: AtomStyleRules[]) {
        const sc = this.style.subclasses ??= {};
        for (const style of styles) {
            sc[style.name] = style.style;
        }
        return this;
    }

    public nested( ... styles: AtomStyleRules[]) {
        const sc = this.style.subclasses ??= {};
        for (const style of styles) {
            sc[" " + style.name] = style.style;
        }
        return this;
    }

    public child( ... styles: AtomStyleRules[]) {
        const sc = this.style.subclasses ??= {};
        for (const style of styles) {
            sc[" > " + style.name] = style.style;
        }
        return this;
    }

    public merge( ... styles: AtomStyleRules[]) {
        for (const { style } of styles) {
            for (const key in style) {
                if (Object.prototype.hasOwnProperty.call(style, key)) {
                    const element = style[key];
                    this.style[key] = element;
                }
            }
        }
        return this;
    }

    public toStyleSheet() {
        const list = createStyleText(this.name, [], this.style);
        return list.join("\n");
    }

    /**
     * @deprecated Please use `displayNone(":not(XX) > A.XX")` format
     * @param showSelector showSelector
     * @param hideSelector hideSelector
     * @returns AtomStyleRule
     */
    public toggle(showSelector: string, hideSelector: string) {
        const sc = this.style.subclasses ??= {};
        const h = sc[hideSelector] ??= {};
        const d = sc[showSelector] ??= {};
        d.display = "inherit";
        h.display = "none";
        return this;
    }

    public displayNone(... selectors: string[]) {
        const sc = this.style.subclasses ??= {};
        for (const iterator of selectors) {
            const d = sc[iterator] ??= {};
            d.display = "none";
        }
        return this;
    }

    /**
     * Creates vertical flex layout with 5px gap
     * @param p defaults { direction: "column", alignItems: "center", justifyContent: "space-around" }
     * @param units px
     */
     public verticalFlexLayout(a: IFlexAttributes = {}, units: Units = "px") {
        a.direction ??= "column";
        return this.flexLayout(a, units);
    }

    /**
     * Creates flex layout with 5px gap
     * @param p defaults { direction: "row", alignItems: "center", justifyContent: "space-around" }
     * @param units px
     */
    public flexLayout(
    {
        direction = "row",
        alignItems = "center",
        justifyContent = "space-around",
        stretch,
        inline,
        gap = 4
    }: IFlexAttributes = {},
    units: Units = "px") {
        if (direction !== void 0) {
            this.style.flexDirection = direction;
        }
        if (alignItems !== void 0) {
            this.style.alignItems = alignItems;
        }
        if (justifyContent !== void 0) {
            this.style.justifyContent = justifyContent;
        }
        if (stretch) {
            this.style.flex = "1 1 100%";
        }
        if (gap) {
            this.style.gap = toUnit(gap, units);
        }
        this.style.display = inline ? "inline-flex" : "flex";
        return this;
    }

    public toString() {
        const list = [];
        if (this.style) {
            for (const key in this.style) {
                if (Object.prototype.hasOwnProperty.call(this.style, key)) {
                    const element = this.style[key];
                    if (key === "subclasses") {
                        throw new Error("Single AtomStyleRule cannot contain subclasses");
                    }
                    if (key === "toString") {
                        continue;
                    }
                    if (!element) {
                        continue;
                    }
                    const name = fromCamelToHyphen(key);
                    if (element.url) {
                        list.push(`${name}: url(${element.url})`);
                        continue;
                    }
                    list.push(`${name}: ${element}`);
                }
            }
        }
        return list.join(";");
    }
}

/**
 * Creates new style rule
 * @param selector [optional] name of child subclass
 * @returns StyleRuleClass
 */
function StyleRule(selector?: string): AtomStyleRules {
    return new AtomStyleRules(selector);
}

export default StyleRule;

const styleId = 1;

function fromCamelToHyphen(input: string): string {
    return input.replace( /([a-z])([A-Z])/g, "$1-$2" ).toLowerCase();
}

function createStyleText(name: string, pairs: string[], styles: IStyleDeclaration): string[] {
    const styleList: any[] = [];
    for (const key in styles) {
        if (styles.hasOwnProperty(key)) {
            if (/^(\_\$\_|className$|toString$)/i.test(key)) {
                continue;
            }
            const element = styles[key];
            if (element === undefined || element === null) {
                continue;
            }
            const keyName = fromCamelToHyphen(key);
            if (key === "subclasses") {
                const n = name;
                for (const subclassKey in element) {
                    if (element.hasOwnProperty(subclassKey)) {
                        const ve = element[subclassKey];
                        pairs = createStyleText(`${n}${subclassKey}`, pairs, ve);
                    }
                }
            } else {
                if (element.url) {
                    styleList.push(`${keyName}: url(${element})`);
                } else {
                    styleList.push(`${keyName}: ${element}`);
                }
            }
        }
    }

    if (!name) {
        return [styleList.join(";")];
    }

    const cname = fromCamelToHyphen(name);

    const styleClassName = `${cname}`;

    if (styleList.length) {
        pairs.push(`.${styleClassName} { ${styleList.join(";\r\n")}; }`);
    }
    return pairs;
}