@use "sass-utilizer/_utilizer.scss" as *;

/* Sass-Utilizer */
$utilities: (
    // Flex - Place Content
    place-content-center: (
        styles: (
            place-content: center
        )
    ),

    place-content-start: (
        styles: (
            place-content: start
        )
    ),

    place-content-end: (
        styles: (
            place-content: end
        )
    ),

    place-content-between: (
        styles: (
            place-content: space-between
        )
    ),

    place-content-around: (
        styles: (
            place-content: space-around
        )
    ),

    place-content-evenly: (
        styles: (
            place-content: space-evenly
        )
    ),

    place-content-stretch: (
        styles: (
            place-content: stretch
        )
    ),
    
    // Flex - Place items
    place-items-auto: (
        styles: (
            place-items: auto
        )
    ),

    place-items-start: (
        styles: (
            place-items: start
        )
    ),

    place-items-end: (
        styles: (
            place-items: end
        )
    ),

    place-items-center: (
        styles: (
            place-items: center
        )
    ),

    place-items-stretch: (
        styles: (
            place-items: stretch
        )
    ),
    
    // Flex - Place Self
    place-self-auto: (
        styles: (
            place-self: auto
        )
    ),

    place-self-start: (
        styles: (
            place-self: start
        )
    ),

    place-self-end: (
        styles: (
            place-self: end
        )
    ),

    place-self-center: (
        styles: (
            place-self: center
        )
    ),

    place-self-stretch: (
        styles: (
            place-self: stretch
        )
    ),
    
    // Display & Alignment - Misc
    flow-root: (
        styles: (
            display: flow-root
        )
    ),
    
    contents: (
        styles: (
            display: contents
        )
    ),

    float-right: (
        styles: (
            float: right
        )
    ),
    
    float-left: (
        styles: (
            float: left
        )
    ),
    
    float-none: (
        styles: (
            float: none
        )
    ),

    clear-left: (
        styles: (
            clear: left
        )
    ),
    
    clear-right: (
        styles: (
            clear: right
        )
    ),
    
    clear-both: (
        styles: (
            clear: both
        )
    ),
    
    clear-none: (
        styles: (
            clear: none
        )
    ),

    /* BOX MODEL */
    object-contain: (
        styles: (
            object-fit: contain
        )
    ),
    
    object-cover: (
        styles: (
            object-fit: cover
        )
    ),
    
    object-fill: (
        styles: (
            object-fit: fill
        )
    ),
    
    object-none: (
        styles: (
            object-fit: none
        )
    ),
    
    object-scale-down: (
        styles: (
            object-fit: scale-down
        )
    ),
    
    object-bottom: (
        styles: (
            object-position: bottom
        )
    ),

    object-center: (
        styles: (
            object-position: center
        )
    ),

    object-left: (
        styles: (
            object-position: left
        )
    ),

    object-left-bottom: (
        styles: (
            object-position: left bottom
        )
    ),

    object-left-top: (
        styles: (
            object-position: left top
        )
    ),

    object-right: (
        styles: (
            object-position: right
        )
    ),

    object-right-bottom: (
        styles: (
            object-position: right bottom
        )
    ),

    object-right-top: (
        styles: (
            object-position: right top
        )
    ),

    object-top: (
        styles: (
            object-position: top
        )
    ),

    /* BACKGROUNDS & COLORS */
    bg-fixed: (
        styles: (
            background-attachment: fixed
        )
    ),
    
    bg-local: (
        styles: (
            background-attachment: local
        )
    ),
    
    bg-scroll: (
        styles: (
            background-attachment: scroll
        )
    ),

    bg-transparent: (
        styles: (
            background: transparent
        )
    ),

    bg-top: (
        styles: (
            background-position: top
        )
    ),

    bg-bottom: (
        styles: (
            background-position: bottom
        )
    ),

    bg-left: (
        styles: (
            background-position: left
        )
    ),

    bg-left-top: (
        styles: (
            background-position: left top
        )
    ),

    bg-left-bottom: (
        styles: (
            background-position: left bottom
        )
    ),

    bg-right: (
        styles: (
            background-position: right
        )
    ),

    bg-right-top: (
        styles: (
            background-position: right top
        )
    ),

    bg-right-bottom: (
        styles: (
            background-position: right bottom
        )
    ),

    bg-center: (
        styles: (
            background-position: center
        )
    ),

    bg-repeat: (
        styles: (
            background-repeat: repeat
        )
    ),

    bg-no-repeat: (
        styles: (
            background-repeat: no-repeat
        )
    ),

    bg-repeat-x: (
        styles: (
            background-repeat: repeat-x
        )
    ),

    bg-repeat-y: (
        styles: (
            background-repeat: repeat-y
        )
    ),

    bg-repeat-round: (
        styles: (
            background-repeat: round
        )
    ),

    bg-repeat-space: (
        styles: (
            background-repeat: space
        )
    ),

    bg-auto: (
        styles: (
            background-size: auto
        )
    ),

    bg-cover: (
        styles: (
            background-size: cover
        )
    ),

    bg-contain: (
        styles: (
            background-size: contain
        )
    ),

    bg-none: (
        styles: (
            background-image: none
        )
    ),

    /* TEXT */
    overscroll-auto: (
        styles: (
            overscroll-behavior: auto
        )
    ),

    overscroll-contain: (
        styles: (
            overscroll-behavior: contain
        )
    ),

    overscroll-none: (
        styles: (
            overscroll-behavior: none
        )
    ),

    overscroll-y-auto: (
        styles: (
            overscroll-behavior-y: auto
        )
    ),

    overscroll-y-contain: (
        styles: (
            overscroll-behavior-y: contain
        )
    ),

    overscroll-y-none: (
        styles: (
            overscroll-behavior-y: none
        )
    ),

    overscroll-x-auto: (
        styles: (
            overscroll-behavior-x: auto
        )
    ),

    overscroll-x-contain: (
        styles: (
            overscroll-behavior-x: contain
        )
    ),

    overscroll-x-none: (
        styles: (
            overscroll-behavior-x: none
        )
    ),

    text-opacity: (
        styles: (
            --text-opacity: 1
        )
    ),

    normal-nums: (
        styles: (
            font-variant-numeric: normal
        )
    ),

    ordinal: (
        styles: (
            font-variant-numeric: ordinal
        )
    ),

    slashed-zero: (
        styles: (
            font-variant-numeric: slashed-zero
        )
    ),

    lining-nums: (
        styles: (
            font-variant-numeric: lining-nums
        )
    ),

    oldstyle-nums: (
        styles: (
            font-variant-numeric: oldstyle-nums
        )
    ),

    proportional-nums: (
        styles: (
            font-variant-numeric: proportional-nums
        )
    ),

    tabular-nums: (
        styles: (
            font-variant-numeric: tabular-nums
        )
    ),

    diagonal-fractions: (
        styles: (
            font-variant-numeric: diagonal-fractions
        )
    ),

    stacked-fractions: (
        styles: (
            font-variant-numeric: stacked-fractions
        )
    ),

    antialiased: (
        styles: (
            -webkit-font-smoothing: antialiased,
            -moz-osx-font-smoothing: grayscale
        )
    ),

    subpixel-antialiased: (
        styles: (
            -webkit-font-smoothing: auto,
            -moz-osx-font-smoothing: auto
        )
    ),

    /* MISC */
    transition: (
        styles: (
            transition-property: (background-color, background-image, border-color, color, fill, stroke, opacity, box-shadow, transform)
        )
    ),

    transition-none: (
        styles: (
            transition-property: none
        )
    ),

    transition-all: (
        styles: (
            transition-property: all
        )
    ),

    transition-colors: (
        styles: (
            transition-property: (background-color, background-image, border-color, color, fill, stroke)
        )
    ),

    transition-opacity: (
        styles: (
            transition-property: opacity
        )
    ),

    transition-box-shadow: (
        styles: (
            transition-property: box-shadow
        )
    ),

    transition-transform: (
        styles: (
            transition-property: transform
        )
    ),

    duration: (
        styles: (
            transition-duration: 1s
        ),
        increments: (
            min: 0,
            max: 5,
            factor: 0.25
        )
    ),

    ease-linear: (
        styles: (
            transition-timing-function: linear
        )
    ),

    ease-in: (
        styles: (
            transition-timing-function: cubic-bezier(0.4, 0, 1, 1)
        )
    ),

    ease-out: (
        styles: (
            transition-timing-function: cubic-bezier(0, 0, 0.2, 1)
        )
    ),

    ease-in-out: (
        styles: (
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
        )
    ),

    delay: (
        styles: (
            transition-delay: 1s
        ),
        increments: (
            min: 0,
            max: 5,
            factor: 0.25
        )
    ),

    resize: (
        styles: (
            resize: both
        )
    ),

    resize-y: (
        styles: (
            resize: vertical
        )
    ),

    resize-x: (
        styles: (
            resize: horizontal
        )
    ),

    resize-none: (
        styles: (
            resize: none
        )
    ),

    select-none: (
        styles: (
            user-select: none
        )
    ),

    select-text: (
        styles: (
            user-select: text
        )
    ),

    select-all: (
        styles: (
            user-select: all
        )
    ),

    select-auto: (
        styles: (
            user-select: auto
        )
    ),

    // Screen readers
    sr-only: (
        styles: (
            position: absolute,
            width: 1px,
            height: 1px,
            padding: 0,
            margin: -1px,
            overflow: hidden,
            clip: rect(0, 0, 0, 0),
            white-space: nowrap,
            border-width: 0
        )
    ),
    
    not-sr-only: (
        styles: (
            position: static,
            width: auto,
            height: auto,
            padding: 0,
            margin: 0,
            overflow: visible,
            clip: auto,
            white-space: normal,
        )
    ),
);

$bpConfig: (
    breakpoints: (
        desktop: $desktopMax,
        tablet: $tabletMax,
        mobile: $mobileMax,
        base: $baseMax
    ),
    paradigm: max-width
);

@include render($utilities, $bpConfig);