# Bootstrap base container class, including getters and setters for most important bootstrap options
# (of course you could generate the properties genericly on the fly, but this way should work
# with all autocompletion engines (also it is somehow autogenerated, thx to github copilot :) ))

from typing import Union
from enum import Enum
from . import HTML

# Base Container Class: -------------------------------------------------------


class BackgroundColor(str, Enum):
    PRIMARY = "primary"
    SECONDARY = "secondary"
    SUCCESS = "success"
    DANGER = "danger"
    WARNING = "warning"
    INFO = "info"
    LIGHT = "light"
    DARK = "dark"
    WHITE = "white"
    BODY = "body"
    TRANSPARENT = "transparent"


_BACKGROUND_COLORS = [color.value for color in BackgroundColor]


class BorderColor(str, Enum):
    PRIMARY = "primary"
    SECONDARY = "secondary"
    SUCCESS = "success"
    DANGER = "danger"
    WARNING = "warning"
    INFO = "info"
    LIGHT = "light"
    DARK = "dark"
    WHITE = "white"
    BODY = "body"
    TRANSPARENT = "transparent"


_BORDER_COLORS = [color.value for color in BorderColor]


class TextColor(str, Enum):
    PRIMARY = "primary"
    SECONDARY = "secondary"
    SUCCESS = "success"
    DANGER = "danger"
    WARNING = "warning"
    INFO = "info"
    LIGHT = "light"
    DARK = "dark"
    WHITE = "white"
    BODY = "body"
    MUTED = "muted"
    BLACK50 = "black-50"
    WHITE50 = "white-50"


_TEXT_COLORS = [color.value for color in TextColor]


class TextAlign(str, Enum):
    CENTER = "center"
    JUSTIFY = "justify"
    START = "start"
    END = "end"


_TEXT_ALIGNS = [align.value for align in TextAlign]


class JustifyContent(str, Enum):
    START = "start"
    END = "end"
    CENTER = "center"


_JUSTIFY_CONTENTS = [align.value for align in JustifyContent]


class VerticalAlign(str, Enum):
    TOP = "top"
    MIDDLE = "middle"
    BOTTOM = "bottom"
    BASELINE = "baseline"
    TEXT_TOP = "text-top"
    TEXT_BOTTOM = "text-bottom"


_VERTICAL_ALIGNS = [align.value for align in VerticalAlign]


class DisplayProperty(str, Enum):

    NONE = "none"
    INLINE = "inline"
    INLINE_BLOCK = "inline-block"
    BLOCK = "block"
    GRID = "grid"
    TABLE = "table"
    TABLE_CELL = "table-cell"
    TABLE_ROW = "table-row"
    FLEX = "flex"
    INLINE_FLEX = "inline-flex"


_DISPLAY_PROPERTIES = [display.value for display in DisplayProperty]


class Float(str, Enum):
    NONE = "none"
    START = "start"
    END = "end"


_FLOATS = [float.value for float in Float]


class Shadow(str, Enum):
    NONE = "shadow-none"
    SMALL = "shadow-sm"
    MEDIUM = "shadow"
    LARGE = "shadow-lg"


_SHADOWS = [shadow.value for shadow in Shadow]


class TextDecoration(str, Enum):
    NONE = "none"
    UNDERLINE = "underline"
    LINE_THROUGH = "line-through"
    OVERLINE = "overline"


_TEXT_DECORATIONS = [decoration.value for decoration in TextDecoration]


class UserSelect(str, Enum):
    NONE = "none"
    AUTO = "auto"
    ALL = "all"


_USER_SELECTS = [user_select.value for user_select in UserSelect]


class PointerEvent(str, Enum):
    NONE = "none"
    AUTO = "auto"


_POINTER_EVENTS = [pointer_events.value for pointer_events in PointerEvent]


class Overflow(str, Enum):
    HIDDEN = "hidden"
    VISIBLE = "visible"
    SCROLL = "scroll"
    AUTO = "auto"


_OVERFLOWS = [overflow.value for overflow in Overflow]


class Position(str, Enum):
    RELATIVE = "position-relative"
    ABSOLUTE = "position-absolute"
    FIXED = "position-fixed"
    STICKY = "position-sticky"
    STATIC = "position-static"
    FIXED_TOP = "fixed-top"
    FIXED_BOTTOM = "fixed-bottom"
    STICKY_TOP = "sticky-top"


_POSITIONS = [position.value for position in Position]


class BootstrapContainer(HTML.Div):
    _default_class_name = "container"

    def _set_css_param_number(self, prefix, value: Union[int, str, None], breakpoint: str = None) -> None:
        if breakpoint is not None:
            prefix += f"{breakpoint}-"

        # remove all existing classes set for this breakpoint
        self._remove_classes_by_search_term(search_term=prefix + "{:d}")
        self._remove_classes_by_search_term(search_term=prefix + "auto")
        if value is not None:
            self.add_class(prefix + str(value))

    def _get_css_param_number(self, prefix, breakpoint: str = None) -> Union[int, str, None]:
        search_term = prefix
        if breakpoint is not None:
            search_term += f"{breakpoint}-"
        search_term += "{:d}"
        col_classes = list(self._search_class_list(search_term=search_term))
        col_classes += list(self._search_class_list(search_term=prefix + "auto"))
        if len(col_classes) == 0:
            return None

        col_class = col_classes[0]   # ignore other orders than the first one

        if col_class.endswith("auto"):
            return "auto"
        return int(col_class.split("-")[-1])

    def _get_enum_property(self, prefix: str, enum_class, enum_values, breakpoint: str = None) -> Union[Enum, None]:
        if breakpoint is not None:
            prefix += f"{breakpoint}-"

        for css_class in self.class_list:
            if css_class.startswith(prefix):
                candidate = css_class[len(prefix):]
                if candidate in enum_values:
                    return enum_class(candidate)
        return None

    def _set_enum_property(self, value: Union[Enum, None], prefix: str, enum_class, enum_values, breakpoint: str = None):
        if breakpoint is not None:
            prefix += f"{breakpoint}-"

        current_property = self._get_enum_property(prefix=prefix,
                                                   enum_class=enum_class,
                                                   enum_values=enum_values,
                                                   breakpoint=breakpoint)
        if current_property is not None:
            self.remove_class(current_property.value)
        if value is not None:
            self.add_class(prefix + value.value)

    def _make_fluid(self):
        self.remove_class("container")
        self.add_class("container-fluid")

    def _make_full_width(self):
        self.remove_class("container")
        self.add_class("container-full")

    @property
    def fluid(self) -> bool:
        return self.has_class("container-fluid")

    @fluid.setter
    def fluid(self, value: bool):
        if value:
            self._make_fluid()
        else:
            self.remove_class("container-fluid")

    @property
    def full_width(self) -> bool:
        return self.has_class("container-full")

    @full_width.setter
    def full_width(self, value: bool):
        if value:
            self._make_full_width()
        else:
            self.remove_class("container-full")

    # background color: -------------------------------------------------------

    @property
    def background_color(self) -> Union[BackgroundColor, None]:
        """
        element's background color. Has to be a memeber of the BackgroundColor enum
        """
        self._get_enum_property(
            prefix="bg-", enum_class=BackgroundColor, enum_values=_BACKGROUND_COLORS)

    @background_color.setter
    def background_color(self, value: Union[BackgroundColor, None]):
        self._set_enum_property(
            value=value, prefix="bg-", enum_class=BackgroundColor, enum_values=_BACKGROUND_COLORS)

    @property
    def background_gradient(self) -> bool:
        """
        if true, the default bootstrap gradient is applied (in addition to the set bg color)
        """
        return self.has_class("bg-gradient")

    @background_gradient.setter
    def background_gradient(self, value: bool):
        self.set_class("bg-gradient", value)

    # text color: -------------------------------------------------------------

    @property
    def text_color(self) -> Union[TextColor, None]:
        """
        element's text color. Has to be a memeber of the TextColors enum
        """
        self._get_enum_property(
            prefix="text-", enum_class=TextColor, enum_values=_TEXT_COLORS)

    @text_color.setter
    def text_color(self, value: Union[TextColor, None]):
        self._set_enum_property(
            value=value, prefix="text-", enum_class=TextColor, enum_values=_TEXT_COLORS)

    # text properties: --------------------------------------------------------

    @property
    def text_align(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS)

    @text_align.setter
    def text_align(self, value: Union[TextAlign, None]):
        self._set_enum_property(
            value=value, prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS)

    @property
    def text_align_sm(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="sm")

    @text_align_sm.setter
    def text_align_sm(self, value: Union[TextAlign, None]):
        self._set_enum_property(value=value, prefix="text-",
                                enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="sm")

    @property
    def text_align_md(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="md")

    @text_align_md.setter
    def text_align_md(self, value: Union[TextAlign, None]):
        self._set_enum_property(value=value, prefix="text-",
                                enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="md")

    @property
    def text_align_lg(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="lg")

    @text_align_lg.setter
    def text_align_lg(self, value: Union[TextAlign, None]):
        self._set_enum_property(value=value, prefix="text-",
                                enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="lg")

    @property
    def text_align_xl(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="xl")

    @text_align_xl.setter
    def text_align_xl(self, value: Union[TextAlign, None]):
        self._set_enum_property(value=value, prefix="text-",
                                enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="xl")

    @property
    def text_align_xxl(self) -> Union[TextAlign, None]:
        return self._get_enum_property(prefix="text-", enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="xxl")

    @text_align_xxl.setter
    def text_align_xxl(self, value: Union[TextAlign, None]):
        self._set_enum_property(value=value, prefix="text-",
                                enum_class=TextAlign, enum_values=_TEXT_ALIGNS, breakpoint="xxl")

    @property
    def text_nowrap(self) -> bool:
        return self.has_class("text-nowrap")

    @text_nowrap.setter
    def text_nowrap(self, value: bool):
        self.set_class("text-nowrap", value)

    @property
    def text_wrap(self) -> bool:
        return self.has_class("text-wrap")

    @text_wrap.setter
    def text_wrap(self, value: bool):
        self.set_class("text-wrap", value)

    @property
    def text_break(self) -> bool:
        return self.has_class("text-break")

    @text_break.setter
    def text_break(self, value: bool):
        self.set_class("text-break", value)

    @property
    def text_lowercase(self) -> bool:
        return self.has_class("text-lowercase")

    @text_lowercase.setter
    def text_lowercase(self, value: bool):
        self.set_class("text-lowercase", value)

    @property
    def text_uppercase(self) -> bool:
        return self.has_class("text-uppercase")

    @text_uppercase.setter
    def text_uppercase(self, value: bool):
        self.set_class("text-uppercase", value)

    @property
    def text_capitalize(self) -> bool:
        return self.has_class("text-capitalize")

    @text_capitalize.setter
    def text_capitalize(self, value: bool):
        self.set_class("text-capitalize", value)

    # content justification: -------------------------------------------------

    @property
    def justify_content(self) -> Union[JustifyContent, None]:
        return self._get_enum_property(prefix="justify-content-", enum_class=JustifyContent, enum_values=_JUSTIFY_CONTENTS)

    @justify_content.setter
    def justify_content(self, value: Union[JustifyContent, None]):
        self._set_enum_property(value=value, prefix="justify-content-",
                                enum_class=JustifyContent, enum_values=_JUSTIFY_CONTENTS)

    # font parameters: --------------------------------------------------------

    @property
    def font_size(self) -> Union[int, None]:
        """
        element's font size. By default, bootstrap defines values from 1-6
        """
        return self._get_css_param_number("fs-")

    @font_size.setter
    def font_size(self, value: Union[int, None]):
        self._set_css_param_number("fs-", value)

    @property
    def font_weight_bold(self) -> bool:
        return self.has_class("fw-bold")

    @font_weight_bold.setter
    def font_weight_bold(self, value: bool):
        self.set_class("fw-bold", value)

    @property
    def font_weight_bolder(self) -> bool:
        return self.has_class("fw-bolder")

    @font_weight_bolder.setter
    def font_weight_bolder(self, value: bool):
        self.set_class("fw-bolder", value)

    @property
    def font_weight_light(self) -> bool:
        return self.has_class("fw-light")

    @font_weight_light.setter
    def font_weight_light(self, value: bool):
        self.set_class("fw-light", value)

    @property
    def font_weight_lighter(self) -> bool:
        return self.has_class("fw-lighter")

    @font_weight_lighter.setter
    def font_weight_lighter(self, value: bool):
        self.set_class("fw-lighter", value)

    @property
    def font_style_italic(self) -> bool:
        return self.has_class("fs-italic")

    @font_style_italic.setter
    def font_style_italic(self, value: bool):
        self.set_class("fs-italic", value)

    @property
    def font_style_normal(self) -> bool:
        return self.has_class("fs-normal")

    @font_style_normal.setter
    def font_style_normal(self, value: bool):
        self.set_class("fs-normal", value)

    @property
    def lh(self):
        """
        line height. bootstrap defines values like "1", "sm", "base", "lg"
        """
        return self._get_css_param_number("lh-")

    @lh.setter
    def lh(self, value):
        self._set_css_param_number("lh-", value)

    @property
    def font_monospace(self) -> bool:
        return self.has_class("font-monospace")

    @font_monospace.setter
    def font_monospace(self, value: bool):
        self.set_class("font-monospace", value)

    @property
    def text_decoration(self) -> Union[TextDecoration, None]:
        return self._get_enum_property(prefix="text-decoration", enum_class=TextDecoration, enum_values=_TEXT_DECORATIONS)

    @text_decoration.setter
    def text_decoration(self, value: Union[TextDecoration, None]):
        self._set_enum_property(value=value, prefix="text-decoration",
                                enum_class=TextDecoration, enum_values=_TEXT_DECORATIONS)

    # vertical align: ---------------------------------------------------------

    @property
    def vertical_align(self) -> Union[VerticalAlign, None]:
        """
        vertical alignment. Has to be a member of the VerticalAlign Enum
        """
        return self._get_enum_property(prefix="align-", enum_class=VerticalAlign, enum_values=_VERTICAL_ALIGNS)

    @vertical_align.setter
    def vertical_align(self, value: Union[VerticalAlign, None]):
        self._set_enum_property(value=value, prefix="align-",
                                enum_class=VerticalAlign, enum_values=_VERTICAL_ALIGNS)

    # visibility: ------------------------------------------------------------

    @property
    def visible(self) -> Union[bool, None]:
        """
        set bootstrap visibility class. If True, the element is set to visible. If False, the element is set to invisible. If None, the visibility class is removed
        """
        if self.has_class("visible"):
            return True
        if self.has_class("invisible"):
            return False
        return None

    @visible.setter
    def visible(self, value: Union[bool, None]):
        if value is None:
            self.remove_class("visible")
            self.remove_class("invisible")
            return
        if value:
            self.remove_class("invisible")
            self.add_class("visible")
        else:
            self.remove_class("visible")
            self.add_class("invisible")

    # display properties: -----------------------------------------------------

    @property
    def display_property(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES)

    @display_property.setter
    def display_property(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(
            value=value, prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES)

    @property
    def display_property_sm(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES, breakpoint="sm")

    @display_property_sm.setter
    def display_property_sm(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(value=value, prefix="d-", enum_class=DisplayProperty,
                                enum_values=_DISPLAY_PROPERTIES, breakpoint="sm")

    @property
    def display_property_md(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES, breakpoint="md")

    @display_property_md.setter
    def display_property_md(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(value=value, prefix="d-", enum_class=DisplayProperty,
                                enum_values=_DISPLAY_PROPERTIES, breakpoint="md")

    @property
    def display_property_lg(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES, breakpoint="lg")

    @display_property_lg.setter
    def display_property_lg(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(value=value, prefix="d-", enum_class=DisplayProperty,
                                enum_values=_DISPLAY_PROPERTIES, breakpoint="lg")

    @property
    def display_property_xl(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES, breakpoint="xl")

    @display_property_xl.setter
    def display_property_xl(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(value=value, prefix="d-", enum_class=DisplayProperty,
                                enum_values=_DISPLAY_PROPERTIES, breakpoint="xl")

    @property
    def display_property_xxl(self) -> Union[DisplayProperty, None]:
        return self._get_enum_property(prefix="d-", enum_class=DisplayProperty, enum_values=_DISPLAY_PROPERTIES, breakpoint="xxl")

    @display_property_xxl.setter
    def display_property_xxl(self, value: Union[DisplayProperty, None]):
        self._set_enum_property(value=value, prefix="d-", enum_class=DisplayProperty,
                                enum_values=_DISPLAY_PROPERTIES, breakpoint="xxl")

    # borders: ----------------------------------------------------------------

    @property
    def border(self) -> bool:
        """
        boolean value, indicating whether the element's border is active
        """
        return self.has_class("border")

    @border.setter
    def border(self, value: bool):
        self.set_class("border", value)

    @property
    def border_top(self) -> bool:
        """
        boolean value, indicating whether the element's top border is active
        """
        return self.has_class("border-top")

    @border_top.setter
    def border_top(self, value: bool):
        self.set_class("border-top", value)

    @property
    def border_bottom(self) -> bool:
        """
        boolean value, indicating whether the element's bottom border is active
        """
        return self.has_class("border-bottom")

    @border_bottom.setter
    def border_bottom(self, value: bool):
        self.set_class("border-bottom", value)

    @property
    def border_start(self) -> bool:
        """
        boolean value, indicating whether the element's left border is active
        """
        return self.has_class("border-start")

    @border_start.setter
    def border_start(self, value: bool):
        self.set_class("border-start", value)

    @property
    def border_end(self) -> bool:
        """
        boolean value, indicating whether the element's right border is active
        """
        return self.has_class("border-end")

    @border_end.setter
    def border_end(self, value: bool):
        self.set_class("border-end", value)

    # TODO: maybe add subtractive borders?

    @property
    def border_color(self) -> Union[BorderColor, None]:
        """
        element's border color. Has to be a memeber of the BorderColor enum
        """
        self._get_enum_property(
            prefix="border-", enum_class=BorderColor, enum_values=_BORDER_COLORS)

    @border_color.setter
    def border_color(self, value: Union[BorderColor, None]):
        self._set_enum_property(value=value, prefix="border-",
                                enum_class=BorderColor, enum_values=_BORDER_COLORS)

    @property
    def border_width(self) -> Union[int, None]:
        """
        element's border width. Has to be a number
        """
        return self._get_css_param_number("border-", breakpoint=None)

    @border_width.setter
    def border_width(self, value: Union[int, None]):
        self._set_css_param_number("border-", value, breakpoint=None)

    # float properties: -------------------------------------------------------

    @property
    def float(self) -> Union[Float, None]:
        """
        element's float property. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS)

    @float.setter
    def float(self, value: Union[Float, None]):
        self._set_enum_property(
            value=value, prefix="float-", enum_class=Float, enum_values=_FLOATS)

    @property
    def float_sm(self) -> Union[Float, None]:
        """
        element's float property for small screens. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS, breakpoint="sm")

    @float_sm.setter
    def float_sm(self, value: Union[Float, None]):
        self._set_enum_property(value=value, prefix="float-",
                                enum_class=Float, enum_values=_FLOATS, breakpoint="sm")

    @property
    def float_md(self) -> Union[Float, None]:
        """
        element's float property for medium screens. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS, breakpoint="md")

    @float_md.setter
    def float_md(self, value: Union[Float, None]):
        self._set_enum_property(value=value, prefix="float-",
                                enum_class=Float, enum_values=_FLOATS, breakpoint="md")

    @property
    def float_lg(self) -> Union[Float, None]:
        """
        element's float property for large screens. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS, breakpoint="lg")

    @float_lg.setter
    def float_lg(self, value: Union[Float, None]):
        self._set_enum_property(value=value, prefix="float-",
                                enum_class=Float, enum_values=_FLOATS, breakpoint="lg")

    @property
    def float_xl(self) -> Union[Float, None]:
        """
        element's float property for extra large screens. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS, breakpoint="xl")

    @float_xl.setter
    def float_xl(self, value: Union[Float, None]):
        self._set_enum_property(value=value, prefix="float-",
                                enum_class=Float, enum_values=_FLOATS, breakpoint="xl")

    @property
    def float_xxl(self) -> Union[Float, None]:
        """
        element's float property for extra extra large screens. Has to be a member of the Float enum
        """
        return self._get_enum_property(prefix="float-", enum_class=Float, enum_values=_FLOATS, breakpoint="xxl")

    @float_xxl.setter
    def float_xxl(self, value: Union[Float, None]):
        self._set_enum_property(value=value, prefix="float-",
                                enum_class=Float, enum_values=_FLOATS, breakpoint="xxl")

    # user select properties: -------------------------------------------------

    @property
    def user_select(self) -> Union[UserSelect, None]:
        """
        element's user select property. Has to be a member of the UserSelect enum
        """
        return self._get_enum_property(prefix="user-select-", enum_class=UserSelect, enum_values=_USER_SELECTS)

    @user_select.setter
    def user_select(self, value: Union[UserSelect, None]):
        self._set_enum_property(value=value, prefix="user-select-",
                                enum_class=UserSelect, enum_values=_USER_SELECTS)

    # pointer events: ---------------------------------------------------------

    @property
    def pointer_event(self) -> Union[PointerEvent, None]:
        """
        element's pointer event property. Has to be a member of the PointerEvent enum
        """
        return self._get_enum_property(prefix="pe-", enum_class=PointerEvent, enum_values=_POINTER_EVENTS)

    @pointer_event.setter
    def pointer_event(self, value: Union[PointerEvent, None]):
        self._set_enum_property(
            value=value, prefix="pe-", enum_class=PointerEvent, enum_values=_POINTER_EVENTS)

    # max width: --------------------------------------------------------------

    @property
    def mw(self) -> Union[int, None]:
        """
        element's max width. Has to be a number
        """
        return self._get_css_param_number("mw-", breakpoint=None)

    @mw.setter
    def mw(self, value: Union[int, None]):
        self._set_css_param_number("mw-", value, breakpoint=None)

    @property
    def mh(self) -> Union[int, None]:
        """
        element's max height. Has to be a number
        """
        return self._get_css_param_number("mh-", breakpoint=None)

    @mh.setter
    def mh(self, value: Union[int, None]):
        self._set_css_param_number("mh-", value, breakpoint=None)

    # overflows: --------------------------------------------------------------

    @property
    def overflow(self) -> Union[Overflow, None]:
        """
        element's overflow property. Has to be a member of the Overflow enum
        """
        return self._get_enum_property(prefix="overflow-", enum_class=Overflow, enum_values=_OVERFLOWS)

    @overflow.setter
    def overflow(self, value: Union[Overflow, None]):
        self._set_enum_property(
            value=value, prefix="overflow-", enum_class=Overflow, enum_values=_OVERFLOWS)

    # position modifiers:------------------------------------------------------

    @property
    def position(self) -> Union[Position, None]:
        """
        element's position property. Has to be a member of the Position enum
        """
        return self._get_enum_property(prefix="", enum_class=Position, enum_values=_POSITIONS)

    @position.setter
    def position(self, value: Union[Position, None]):
        self._set_enum_property(value=value, prefix="",
                                enum_class=Position, enum_values=_POSITIONS)

    @property
    def position_top(self) -> Union[int, None]:
        """
        element's top position. By default, bootstrap defines the values 0, 50, 100
        """
        return self._get_css_param_number("top-", breakpoint=None)

    @position_top.setter
    def position_top(self, value: Union[int, None]):
        self._set_css_param_number("top-", value, breakpoint=None)

    @property
    def position_bottom(self) -> Union[int, None]:
        """
        element's bottom position. By default, bootstrap defines the values 0, 50, 100
        """
        return self._get_css_param_number("bottom-", breakpoint=None)

    @position_bottom.setter
    def position_bottom(self, value: Union[int, None]):
        self._set_css_param_number("bottom-", value, breakpoint=None)

    @property
    def position_start(self) -> Union[int, None]:
        """
        element's start position. By default, bootstrap defines the values 0, 50, 100
        """
        return self._get_css_param_number("start-", breakpoint=None)

    @position_start.setter
    def position_start(self, value: Union[int, None]):
        self._set_css_param_number("start-", value, breakpoint=None)

    @property
    def position_end(self) -> Union[int, None]:
        """
        element's end position. By default, bootstrap defines the values 0, 50, 100
        """
        return self._get_css_param_number("end-", breakpoint=None)

    @position_end.setter
    def position_end(self, value: Union[int, None]):
        self._set_css_param_number("end-", value, breakpoint=None)

    @property
    def translate_middle(self) -> bool:
        """
        if true, the element's center will be used as reference point for position modifiers
        """
        return self.has_class("translate-middle")

    @translate_middle.setter
    def translate_middle(self, value: bool):
        self.set_class("translate-middle", value)

    # rounded corners: --------------------------------------------------------

    @property
    def rounded(self) -> bool:
        """
        boolean value, indicating whether the element's rounded corners are active
        """
        return self.has_class("rounded")

    @rounded.setter
    def rounded(self, value: bool):
        self.set_class("rounded", value)

    @property
    def rounded_top(self) -> bool:
        """
        boolean value, indicating whether the element's top rounded corners are active
        """
        return self.has_class("rounded-top")

    @rounded_top.setter
    def rounded_top(self, value: bool):
        self.set_class("rounded-top", value)

    @property
    def rounded_bottom(self) -> bool:
        """
        boolean value, indicating whether the element's bottom rounded corners are active
        """
        return self.has_class("rounded-bottom")

    @rounded_bottom.setter
    def rounded_bottom(self, value: bool):
        self.set_class("rounded-bottom", value)

    @property
    def rounded_start(self) -> bool:
        """
        boolean value, indicating whether the element's left rounded corners are active
        """
        return self.has_class("rounded-start")

    @rounded_start.setter
    def rounded_start(self, value: bool):
        self.set_class("rounded-start", value)

    @property
    def rounded_end(self) -> bool:
        """
        boolean value, indicating whether the element's right rounded corners are active
        """
        return self.has_class("rounded-end")

    @rounded_end.setter
    def rounded_end(self, value: bool):
        self.set_class("rounded-end", value)

    @property
    def rounded_circle(self) -> bool:
        """
        boolean value, indicating whether the element has circular rounded corners
        """
        return self.has_class("rounded-circle")

    @rounded_circle.setter
    def rounded_circle(self, value: bool):
        self.set_class("rounded-circle", value)

    @property
    def rounded_pill(self) -> bool:
        """
        boolean value, indicating whether the element is pill shaped
        """
        return self.has_class("rounded-pill")

    @rounded_pill.setter
    def rounded_pill(self, value: bool):
        self.set_class("rounded-pill", value)

    @property
    def rounded_size(self) -> Union[int, None]:
        """
        element's rounded corner size. Has to be a number
        """
        return self._get_css_param_number("rounded-", breakpoint=None)

    @rounded_size.setter
    def rounded_size(self, value: Union[int, None]):
        self._set_css_param_number("rounded-", value, breakpoint=None)

    # width and height classes: -----------------------------------------------

    @property
    def w(self) -> Union[int, str, None]:
        """
        element's width. By default, bootstrap defines the values 25, 50, 75, 100 and 'auto'
        """
        return self._get_css_param_number("w-", breakpoint=None)

    @w.setter
    def w(self, value: Union[int, str, None]):
        self._set_css_param_number("w-", value, breakpoint=None)

    @property
    def h(self) -> Union[int, str, None]:
        """
        element's height. By default, bootstrap defines the values 25, 50, 75, 100 and 'auto'
        """
        return self._get_css_param_number("h-", breakpoint=None)

    @h.setter
    def h(self, value: Union[int, str, None]):
        self._set_css_param_number("h-", value, breakpoint=None)

    @property
    def vw_100(self) -> bool:
        """
        boolean value, indicating whether the element's width is 100% of the viewport width
        """
        return self.has_class("vw-100")

    @vw_100.setter
    def vw_100(self, value: bool):
        self.set_class("vw-100", value)

    @property
    def vh_100(self) -> bool:
        """
        boolean value, indicating whether the element's height is 100% of the viewport height
        """
        return self.has_class("vh-100")

    @vh_100.setter
    def vh_100(self, value: bool):
        self.set_class("vh-100", value)

    @property
    def min_vw_100(self) -> bool:
        """
        boolean value, indicating whether the element's width is at least 100% of the viewport width
        """
        return self.has_class("min-vw-100")

    @min_vw_100.setter
    def min_vw_100(self, value: bool):
        self.set_class("min-vw-100", value)

    @property
    def min_vh_100(self) -> bool:
        """
        boolean value, indicating whether the element's height is at least 100% of the viewport height
        """
        return self.has_class("min-vh-100")

    @min_vh_100.setter
    def min_vh_100(self, value: bool):
        self.set_class("min-vh-100", value)

    # show and hide classes: --------------------------------------------------

    @property
    def collapsable(self) -> bool:
        """
        boolean value, indicating whether the element is collapsable
        """
        return self.has_class("collapse")

    @collapsable.setter
    def collapsable(self, value: bool):
        self.set_class("collapse", value)
        self.set_class("show", value)

    @property
    def collapsed(self) -> bool:
        """
        boolean value, indicating whether the element is collapsed
        """
        return self.has_class("show")

    @collapsed.setter
    def collapsed(self, value: bool):
        self.set_class("show", value)

    def toggle_collapsed(self):
        """
        toggles the collapsed state of the element
        """
        self.element.classList.toggle("show")

    # shadow classes: ---------------------------------------------------------

    @property
    def shadow(self) -> Union[Shadow, None]:
        """
        element's shadow. Has to be a element of Shadow Enum
        """
        self._get_enum_property(
            prefix="", enum_class=Shadow, enum_values=_SHADOWS)

    @shadow.setter
    def shadow(self, value: Union[Shadow, None]):
        self._set_enum_property(value=value, prefix="",
                                enum_class=Shadow, enum_values=_SHADOWS)

    # p properties:------------------------------------------------------------

    @property
    def p(self) -> Union[int, str, None]:
        """
        element's padding. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-")

    @p.setter
    def p(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value)

    @property
    def p_sm(self) -> Union[int, str, None]:
        """
        element's padding for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-", "sm")

    @p_sm.setter
    def p_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value, "sm")

    @property
    def p_md(self) -> Union[int, str, None]:
        """
        element's padding for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-", "md")

    @p_md.setter
    def p_md(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value, "md")

    @property
    def p_lg(self) -> Union[int, str, None]:
        """
        element's padding for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-", "lg")

    @p_lg.setter
    def p_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value, "lg")

    @property
    def p_xl(self) -> Union[int, str, None]:
        """
        element's padding for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-", "xl")

    @p_xl.setter
    def p_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value, "xl")

    @property
    def p_xxl(self) -> Union[int, str, None]:
        """
        element's padding for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("p-", "xxl")

    @p_xxl.setter
    def p_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("p-", value, "xxl")

    @property
    def px(self) -> Union[int, str, None]:
        """
        element's horizontal padding. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-")

    @px.setter
    def px(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value)

    @property
    def px_sm(self) -> Union[int, str, None]:
        """
        element's horizontal padding for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-", "sm")

    @px_sm.setter
    def px_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value, "sm")

    @property
    def px_md(self) -> Union[int, str, None]:
        """
        element's horizontal padding for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-", "md")

    @px_md.setter
    def px_md(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value, "md")

    @property
    def px_lg(self) -> Union[int, str, None]:
        """
        element's horizontal padding for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-", "lg")

    @px_lg.setter
    def px_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value, "lg")

    @property
    def px_xl(self) -> Union[int, str, None]:
        """
        element's horizontal padding for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-", "xl")

    @px_xl.setter
    def px_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value, "xl")

    @property
    def px_xxl(self) -> Union[int, str, None]:
        """
        element's horizontal padding for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("px-", "xxl")

    @px_xxl.setter
    def px_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("px-", value, "xxl")

    @property
    def py(self) -> Union[int, str, None]:
        """
        element's vertical padding. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-")

    @py.setter
    def py(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value)

    @property
    def py_sm(self) -> Union[int, str, None]:
        """
        element's vertical padding for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-", "sm")

    @py_sm.setter
    def py_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value, "sm")

    @property
    def py_md(self) -> Union[int, str, None]:
        """
        element's vertical padding for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-", "md")

    @py_md.setter
    def py_md(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value, "md")

    @property
    def py_lg(self) -> Union[int, str, None]:
        """
        element's vertical padding for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-", "lg")

    @py_lg.setter
    def py_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value, "lg")

    @property
    def py_xl(self) -> Union[int, str, None]:
        """
        element's vertical padding for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-", "xl")

    @py_xl.setter
    def py_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value, "xl")

    @property
    def py_xxl(self) -> Union[int, str, None]:
        """
        element's vertical padding for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("py-", "xxl")

    @py_xxl.setter
    def py_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("py-", value, "xxl")

    @property
    def pt(self) -> Union[int, str, None]:
        """
        element's top padding. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-")

    @pt.setter
    def pt(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value)

    @property
    def pt_sm(self) -> Union[int, str, None]:
        """
        element's top padding for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-", "sm")

    @pt_sm.setter
    def pt_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value, "sm")

    @property
    def pt_md(self) -> Union[int, str, None]:
        """
        element's top padding for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-", "md")

    @pt_md.setter
    def pt_md(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value, "md")

    @property
    def pt_lg(self) -> Union[int, str, None]:
        """
        element's top padding for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-", "lg")

    @pt_lg.setter
    def pt_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value, "lg")

    @property
    def pt_xl(self) -> Union[int, str, None]:
        """
        element's top padding for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-", "xl")

    @pt_xl.setter
    def pt_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value, "xl")

    @property
    def pt_xxl(self) -> Union[int, str, None]:
        """
        element's top padding for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pt-", "xxl")

    @pt_xxl.setter
    def pt_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("pt-", value, "xxl")

    @property
    def pb(self) -> Union[int, str, None]:
        """
        element's bottom padding. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-")

    @pb.setter
    def pb(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value)

    @property
    def pb_sm(self) -> Union[int, str, None]:
        """
        element's bottom padding for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-", "sm")

    @pb_sm.setter
    def pb_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value, "sm")

    @property
    def pb_md(self) -> Union[int, str, None]:
        """
        element's bottom padding for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-", "md")

    @pb_md.setter
    def pb_md(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value, "md")

    @property
    def pb_lg(self) -> Union[int, str, None]:
        """
        element's bottom padding for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-", "lg")

    @pb_lg.setter
    def pb_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value, "lg")

    @property
    def pb_xl(self) -> Union[int, str, None]:
        """
        element's bottom padding for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-", "xl")

    @pb_xl.setter
    def pb_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value, "xl")

    @property
    def pb_xxl(self) -> Union[int, str, None]:
        """
        element's bottom padding for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pb-", "xxl")

    @pb_xxl.setter
    def pb_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("pb-", value, "xxl")

    @property
    def ps(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages). By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-")

    @ps.setter
    def ps(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value)

    @property
    def ps_sm(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-", "sm")

    @ps_sm.setter
    def ps_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value, "sm")

    @property
    def ps_md(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-", "md")

    @ps_md.setter
    def ps_md(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value, "md")

    @property
    def ps_lg(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-", "lg")

    @ps_lg.setter
    def ps_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value, "lg")

    @property
    def ps_xl(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-", "xl")

    @ps_xl.setter
    def ps_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value, "xl")

    @property
    def ps_xxl(self) -> Union[int, str, None]:
        """
        element's start padding (left for LTR languages) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ps-", "xxl")

    @ps_xxl.setter
    def ps_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("ps-", value, "xxl")

    @property
    def pe(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages). By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-")

    @pe.setter
    def pe(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value)

    @property
    def pe_sm(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-", "sm")

    @pe_sm.setter
    def pe_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value, "sm")

    @property
    def pe_md(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-", "md")

    @pe_md.setter
    def pe_md(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value, "md")

    @property
    def pe_lg(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-", "lg")

    @pe_lg.setter
    def pe_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value, "lg")

    @property
    def pe_xl(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-", "xl")

    @pe_xl.setter
    def pe_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value, "xl")

    @property
    def pe_xxl(self) -> Union[int, str, None]:
        """
        element's end padding (right for LTR languages) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("pe-", "xxl")

    @pe_xxl.setter
    def pe_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("pe-", value, "xxl")

    # m properties: -----------------------------------------------------------

    @property
    def m(self) -> Union[int, str, None]:
        """
        element's margin. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-")

    @m.setter
    def m(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value)

    @property
    def m_sm(self) -> Union[int, str, None]:
        """
        element's margin for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-", "sm")

    @m_sm.setter
    def m_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value, "sm")

    @property
    def m_md(self) -> Union[int, str, None]:
        """
        element's margin for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-", "md")

    @m_md.setter
    def m_md(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value, "md")

    @property
    def m_lg(self) -> Union[int, str, None]:
        """
        element's margin for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-", "lg")

    @m_lg.setter
    def m_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value, "lg")

    @property
    def m_xl(self) -> Union[int, str, None]:
        """
        element's margin for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-", "xl")

    @m_xl.setter
    def m_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value, "xl")

    @property
    def m_xxl(self) -> Union[int, str, None]:
        """
        element's margin for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("m-", "xxl")

    @m_xxl.setter
    def m_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("m-", value, "xxl")

    @property
    def mx(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-")

    @mx.setter
    def mx(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value)

    @property
    def mx_sm(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-", "sm")

    @mx_sm.setter
    def mx_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value, "sm")

    @property
    def mx_md(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-", "md")

    @mx_md.setter
    def mx_md(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value, "md")

    @property
    def mx_lg(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-", "lg")

    @mx_lg.setter
    def mx_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value, "lg")

    @property
    def mx_xl(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-", "xl")

    @mx_xl.setter
    def mx_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value, "xl")

    @property
    def mx_xxl(self) -> Union[int, str, None]:
        """
        element's margin-left and margin-right for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mx-", "xxl")

    @mx_xxl.setter
    def mx_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("mx-", value, "xxl")

    @property
    def my(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-")

    @my.setter
    def my(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value)

    @property
    def my_sm(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-", "sm")

    @my_sm.setter
    def my_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value, "sm")

    @property
    def my_md(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-", "md")

    @my_md.setter
    def my_md(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value, "md")

    @property
    def my_lg(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-", "lg")

    @my_lg.setter
    def my_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value, "lg")

    @property
    def my_xl(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-", "xl")

    @my_xl.setter
    def my_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value, "xl")

    @property
    def my_xxl(self) -> Union[int, str, None]:
        """
        element's margin-top and margin-bottom for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("my-", "xxl")

    @my_xxl.setter
    def my_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("my-", value, "xxl")

    @property
    def mt(self) -> Union[int, str, None]:
        """
        element's margin-top. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-")

    @mt.setter
    def mt(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value)

    @property
    def mt_sm(self) -> Union[int, str, None]:
        """
        element's margin-top for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-", "sm")

    @mt_sm.setter
    def mt_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value, "sm")

    @property
    def mt_md(self) -> Union[int, str, None]:
        """
        element's margin-top for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-", "md")

    @mt_md.setter
    def mt_md(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value, "md")

    @property
    def mt_lg(self) -> Union[int, str, None]:
        """
        element's margin-top for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-", "lg")

    @mt_lg.setter
    def mt_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value, "lg")

    @property
    def mt_xl(self) -> Union[int, str, None]:
        """
        element's margin-top for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-", "xl")

    @mt_xl.setter
    def mt_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value, "xl")

    @property
    def mt_xxl(self) -> Union[int, str, None]:
        """
        element's margin-top for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mt-", "xxl")

    @mt_xxl.setter
    def mt_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("mt-", value, "xxl")

    @property
    def mb(self) -> Union[int, str, None]:
        """
        element's margin-bottom. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-")

    @mb.setter
    def mb(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value)

    @property
    def mb_sm(self) -> Union[int, str, None]:
        """
        element's margin-bottom for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-", "sm")

    @mb_sm.setter
    def mb_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value, "sm")

    @property
    def mb_md(self) -> Union[int, str, None]:
        """
        element's margin-bottom for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-", "md")

    @mb_md.setter
    def mb_md(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value, "md")

    @property
    def mb_lg(self) -> Union[int, str, None]:
        """
        element's margin-bottom for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-", "lg")

    @mb_lg.setter
    def mb_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value, "lg")

    @property
    def mb_xl(self) -> Union[int, str, None]:
        """
        element's margin-bottom for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-", "xl")

    @mb_xl.setter
    def mb_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value, "xl")

    @property
    def mb_xxl(self) -> Union[int, str, None]:
        """
        element's margin-bottom for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("mb-", "xxl")

    @mb_xxl.setter
    def mb_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("mb-", value, "xxl")

    @property
    def ms(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages). By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-")

    @ms.setter
    def ms(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value)

    @property
    def ms_sm(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-", "sm")

    @ms_sm.setter
    def ms_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value, "sm")

    @property
    def ms_md(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-", "md")

    @ms_md.setter
    def ms_md(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value, "md")

    @property
    def ms_lg(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-", "lg")

    @ms_lg.setter
    def ms_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value, "lg")

    @property
    def ms_xl(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-", "xl")

    @ms_xl.setter
    def ms_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value, "xl")

    @property
    def ms_xxl(self) -> Union[int, str, None]:
        """
        element's start margin (left for LTR languages) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("ms-", "xxl")

    @ms_xxl.setter
    def ms_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("ms-", value, "xxl")

    @property
    def me(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages). By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-")

    @me.setter
    def me(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value)

    @property
    def me_sm(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-", "sm")

    @me_sm.setter
    def me_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value, "sm")

    @property
    def me_md(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-", "md")

    @me_md.setter
    def me_md(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value, "md")

    @property
    def me_lg(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-", "lg")

    @me_lg.setter
    def me_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value, "lg")

    @property
    def me_xl(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-", "xl")

    @me_xl.setter
    def me_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value, "xl")

    @property
    def me_xxl(self) -> Union[int, str, None]:
        """
        element's end margin (right for LTR languages) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5,auto
        """
        return self._get_css_param_number("me-", "xxl")

    @me_xxl.setter
    def me_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("me-", value, "xxl")

    # g properties: -----------------------------------------------------------

    @property
    def g(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content). By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-")

    @g.setter
    def g(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value)

    @property
    def g_sm(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-", "sm")

    @g_sm.setter
    def g_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value, "sm")

    @property
    def g_md(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-", "md")

    @g_md.setter
    def g_md(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value, "md")

    @property
    def g_lg(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-", "lg")

    @g_lg.setter
    def g_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value, "lg")

    @property
    def g_xl(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-", "xl")

    @g_xl.setter
    def g_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value, "xl")

    @property
    def g_xxl(self) -> Union[int, str, None]:
        """
        gutter (gutters are the space between the element and its content) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("g-", "xxl")

    @g_xxl.setter
    def g_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("g-", value, "xxl")

    @property
    def gx(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content). By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-")

    @gx.setter
    def gx(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value)

    @property
    def gx_sm(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-", "sm")

    @gx_sm.setter
    def gx_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value, "sm")

    @property
    def gx_md(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-", "gd")

    @gx_md.setter
    def gx_md(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value, "gd")

    @property
    def gx_lg(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-", "lg")

    @gx_lg.setter
    def gx_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value, "lg")

    @property
    def gx_xl(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-", "xl")

    @gx_xl.setter
    def gx_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value, "xl")

    @property
    def gx_xxl(self) -> Union[int, str, None]:
        """
        horizontal gutter (gutters are the space between the element and its content) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gx-", "xxl")

    @gx_xxl.setter
    def gx_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("gx-", value, "xxl")

    @property
    def gy(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content). By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-")

    @gy.setter
    def gy(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value)

    @property
    def gy_sm(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content) for small screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-", "sm")

    @gy_sm.setter
    def gy_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value, "sm")

    @property
    def gy_md(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content) for medium screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-", "gd")

    @gy_md.setter
    def gy_md(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value, "gd")

    @property
    def gy_lg(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content) for large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-", "lg")

    @gy_lg.setter
    def gy_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value, "lg")

    @property
    def gy_xl(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content) for extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-", "xl")

    @gy_xl.setter
    def gy_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value, "xl")

    @property
    def gy_xxl(self) -> Union[int, str, None]:
        """
        vertical gutter (gutters are the space between the element and its content) for extra extra large screens. By default, bootstrap defines the values 0,1,2,3,4,5
        """
        return self._get_css_param_number("gy-", "xxl")

    @gy_xxl.setter
    def gy_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("gy-", value, "xxl")

    # column classes: ---------------------------------------------------------

    @property
    def col(self) -> Union[int, str, None]:
        """
        column class for all screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-")
    
    @col.setter
    def col(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value)
    
    @property
    def col_sm(self) -> Union[int, str, None]:
        """
        column class for small screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-", "sm")
    
    @col_sm.setter
    def col_sm(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value, "sm")
    
    @property
    def col_md(self) -> Union[int, str, None]:
        """
        column class for medium screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-", "md")
    
    @col_md.setter
    def col_md(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value, "md")
    
    @property
    def col_lg(self) -> Union[int, str, None]:
        """
        column class for large screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-", "lg")
    
    @col_lg.setter
    def col_lg(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value, "lg")
    
    @property
    def col_xl(self) -> Union[int, str, None]:
        """
        column class for extra large screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-", "xl")
    
    @col_xl.setter
    def col_xl(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value, "xl")
    
    @property
    def col_xxl(self) -> Union[int, str, None]:
        """
        column class for extra extra large screens. By default, bootstrap defines the values 1,2,3,4,5,6,7,8,9,10,11,12
        """
        return self._get_css_param_number("col-", "xxl")
    
    @col_xxl.setter
    def col_xxl(self, value: Union[int, str, None]):
        self._set_css_param_number("col-", value, "xxl")
        


