// ============================================================================================= //
//                                            MIXINS                                             //
// ============================================================================================= //

@use "./tokens";
@use "./mixins";

///
/// Styles.
///
/// @see {mixin} mixins.createUtility
///
@mixin styles {

    // ------------------------------------------------------------------------- //
    // Layout
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("aspect-ratio", tokens.aspect-ratio-values(), (
        "aspect": "aspect-ratio"
    ));

    @include mixins.createUtility("clear", tokens.clear-values(), (
        "clear": "clear"
    ));

    @include mixins.createUtility("display", tokens.display-values());

    @include mixins.createUtility("float", tokens.float-values(), (
        "float": "float"
    ));

    @include mixins.createUtility("isolation", tokens.isolate-values(), (
        "isolation": "isolation"
    ));

    @include mixins.createUtility("object-fit", tokens.object-fit-values(), (
        "object": "object-fit"
    ));

    @include mixins.createUtility("overflow", tokens.overflow-values(), (
        "overflow": "overflow",
        "overflow-x": (
            "overflow-x"
        ),
        "overflow-y": (
            "overflow-y"
        )
    ));

    @include mixins.createUtility("position", tokens.position-values());

    @include mixins.createUtility("top", tokens.position-top-values(), (
        "top": "top"
    ));

    @include mixins.createUtility("right", tokens.position-top-values(), (
        "right": "right"
    ));

    @include mixins.createUtility("bottom", tokens.position-top-values(), (
        "bottom": "bottom"
    ));

    @include mixins.createUtility("left", tokens.position-top-values(), (
        "left": "left"
    ));

    @include mixins.createUtility("visibility", tokens.visibility-values());

    @include mixins.createUtility("z-index", tokens.z-index-values(), (
        "z": "z-index"
    ));

    // ------------------------------------------------------------------------- //
    // Effects
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("opacity", tokens.opacity-values(), (
        "opacity": "opacity"
    ));

    // ------------------------------------------------------------------------- //
    // Sizing
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("min-width", tokens.min-width-values(), (
        "min-w": "min-width"
    ));

    @include mixins.createUtility("max-width", tokens.max-width-values(), (
        "max-w": "max-width"
    ));

    @include mixins.createUtility("max-width", tokens.max-width-screen-values(), (
        "max-w-screen": "max-width"
    ));

    @include mixins.createUtility("width", tokens.width-values(), (
        "w": "width"
    ));

    @include mixins.createUtility("min-height", tokens.min-height-values(), (
        "min-h": "min-height"
    ));

    @include mixins.createUtility("max-height", tokens.max-height-values(), (
        "max-h": "max-height"
    ));

    @include mixins.createUtility("height", tokens.height-values(), (
        "h": "height"
    ));

    // ------------------------------------------------------------------------- //
    // Typography
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("font-size", tokens.font-size-values(), (
        "text": "font-size"
    ));

    @include mixins.createUtility("font-style", tokens.font-style-values(), (
        "font": "font-style"
    ));

    @include mixins.createUtility("font-weight", tokens.font-weight-values(), (
        "font": "font-weight"
    ));

    @include mixins.createUtility("text-align", tokens.text-align-values(), (
        "text": "text-align"
    ));

    @include mixins.createUtility("text-transform", tokens.text-transform-values(), (
        "text": "text-transform"
    ));

    @include mixins.createUtility("hyphens", tokens.hyphens-values(), (
        "hyphens": "hyphens"
    ));

    @include mixins.createUtility("white-space", tokens.white-space-values(), (
        "white-space": "white-space"
    ));

    @include mixins.createUtility("content", tokens.content-values(), (
        "content": "content"
    ));

    // ------------------------------------------------------------------------- //
    // Backgrounds
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("background-attachment", tokens.background-attachment-values(), (
        "bg-attachment": "background-attachment"
    ));

    @include mixins.createUtility("background-clip", tokens.background-clip-values(), (
        "bg-clip": "background-clip"
    ));

    @include mixins.createUtility("background-color", tokens.background-color-values(), (
        "bg-color": "background-color"
    ));

    @include mixins.createUtility("background-image", tokens.background-image-values(), (
        "bg-image": "background-image"
    ));

    @include mixins.createUtility("background-origin", tokens.background-origin-values(), (
        "bg-origin": "background-origin"
    ));

    @include mixins.createUtility("background-position", tokens.background-position-values(), (
        "bg-position": "background-position"
    ));

    @include mixins.createUtility("background-repeat", tokens.background-repeat-values(), (
        "bg": "background-repeat"
    ));

    @include mixins.createUtility("background-size", tokens.background-size-values(), (
        "bg-size": "background-size"
    ));

    // ------------------------------------------------------------------------- //
    // Filters
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("blur", tokens.filter-blur-values(), (
        "blur": "blur"
    ));

    @include mixins.createUtility("brightness", tokens.filter-brightness-values(), (
        "brightness": "brightness"
    ));

    @include mixins.createUtility("contrast", tokens.filter-contrast-values(), (
        "contrast": "contrast"
    ));

    @include mixins.createUtility("grayscale", tokens.filter-grayscale-values(), (
        "grayscale": "grayscale"
    ));

    // ------------------------------------------------------------------------- //
    // Flexbox & Grid
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("flex", tokens.flex-values(), (
        "flex": "flex"
    ));

    @include mixins.createUtility("flex-direction", tokens.flex-direction-values(), (
        "flex": "flex-direction"
    ));

    @include mixins.createUtility("flex-wrap", tokens.flex-wrap-values(), (
        "flex": "flex-wrap"
    ));

    @include mixins.createUtility("flex-grow", tokens.flex-grow-values(), (
        "flex-grow": "flex-grow"
    ));

    @include mixins.createUtility("flex-shrink", tokens.flex-shrink-values(), (
        "flex-shrink": "flex-shrink"
    ));

    @include mixins.createUtility("flex-basis", tokens.flex-basis-values(), (
        "flex-basis": "flex-basis"
    ));

    @include mixins.createUtility("order", tokens.order-values(), (
        "order": "order"
    ));

    @include mixins.createUtility("grid-template-columns", tokens.grid-template-columns-values(), (
        "grid-cols": "grid-template-columns"
    ));

    @include mixins.createUtility("grid-template-rows", tokens.grid-template-rows-values(), (
        "grid-rows": "grid-template-rows"
    ));

    @include mixins.createUtility("grid-column", tokens.grid-column-values(), (
        "col": "grid-column"
    ));

    @include mixins.createUtility("grid-column-start", tokens.grid-column-start-values(), (
        "col-start": "grid-column-start"
    ));

    @include mixins.createUtility("grid-column-end", tokens.grid-column-end-values(), (
        "col-end": "grid-column-end"
    ));

    @include mixins.createUtility("grid-row", tokens.grid-row-values(), (
        "row": "grid-row"
    ));

    @include mixins.createUtility("grid-row-start", tokens.grid-row-start-values(), (
        "row-start": "grid-row-start"
    ));

    @include mixins.createUtility("grid-row-end", tokens.grid-row-end-values(), (
        "row-end": "grid-row-end"
    ));

    @include mixins.createUtility("gap", tokens.gap-values(), (
        "gap": "gap",
        "gap-x": (
            "column-gap"
        ),
        "gap-y": (
            "row-gap"
        )
    ));

    @include mixins.createUtility("align-content", tokens.align-content-values(), (
        "align-content": "align-content"
    ));

    @include mixins.createUtility("align-items", tokens.align-items-values(), (
        "align-items": "align-items"
    ));

    @include mixins.createUtility("align-self", tokens.align-self-values(), (
        "align-self": "align-self"
    ));

    @include mixins.createUtility("justify-content", tokens.justify-content-values(), (
        "justify-content": "justify-content"
    ));

    @include mixins.createUtility("justify-items", tokens.justify-items-values(), (
        "justify-items": "justify-items"
    ));

    @include mixins.createUtility("justify-self", tokens.justify-self-values(), (
        "justify-self": "justify-self"
    ));

    @include mixins.createUtility("place-content", tokens.place-content-values(), (
        "place-content": "place-content"
    ));

    @include mixins.createUtility("place-items", tokens.place-items-values(), (
        "place-items": "place-items"
    ));

    @include mixins.createUtility("place-self", tokens.place-self-values(), (
        "place-self": "place-self"
    ));

    // ------------------------------------------------------------------------- //
    // Spacing
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("margin", tokens.margin-values(), (
        "m": "margin",
        "mx": (
            "margin-left",
            "margin-right"
        ),
        "my": (
            "margin-top",
            "margin-bottom"
        ),
        "mt": (
            "margin-top"
        ),
        "mr": (
            "margin-right"
        ),
        "mb": (
            "margin-bottom"
        ),
        "ml": (
            "margin-left"
        )
    ));

    @include mixins.createUtility("padding", tokens.padding-values(), (
        "p": "padding",
        "px": (
            "padding-left",
            "padding-right"
        ),
        "py": (
            "padding-top",
            "padding-bottom"
        ),
        "pt": (
            "padding-top"
        ),
        "pr": (
            "padding-right"
        ),
        "pb": (
            "padding-bottom"
        ),
        "pl": (
            "padding-left"
        )
    ));

    // ------------------------------------------------------------------------- //
    // Others
    // ------------------------------------------------------------------------- //

    @include mixins.createUtility("appearance", tokens.appearance-values(), (
        "appearance": "appearance"
    ));

    @include mixins.createUtility("pointer-events", tokens.pointer-events-values(), (
        "pointer-events": "pointer-events"
    ));

    @include mixins.createUtility("fill", tokens.fill-values(), (
        "fill": "fill"
    ));
}