lowcss/utilities.css

A low-level functional CSS toolkit

/* @description Utilities to animate your elements using predefined CSS animations. */
/* @category animation */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/animation */
@utility animation {
    animate-* {
        animation: value(--animate-*);
    }
}

/* @description Utilities to set the background-clip property of the element. It defines the area within which the background is painted. */
/* @category background */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip */
@utility background-clip {
    bg-border {
        background-clip: border-box;
    }
    bg-padding {
        background-clip: padding-box;
    }
    bg-content {
        background-clip: content-box;
    }
    bg-text {
        background-clip: text;
    }
}

/* @description Utilities to set the background-color property of the element, which defines the background color of an element. */
/* @category background */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/background-color */
@utility background-color {
    @variant default,hover,focus,focus-within,odd,even,group-hover {
        bg-transparent {
            background-color: transparent;
        }
        bg-current {
            background-color: currentColor;
        }
        bg-* {
            background-color: value(--color-*);
        }
    }
}

/* @description Utilities to set the background-repeat property of the element, which defines how background images are repeated. */
/* @category background */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat */
@utility background-repeat {
    bg-repeat {
        background-repeat: repeat;
    }
    bg-no-repeat {
        background-repeat: no-repeat;
    }
}

/* @description Utilities to set the background-size property of the element. */
/* @category background */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/background-size */
@utility background-size {
    bg-auto {
        background-size: auto;
    }
    bg-cover {
        background-size: cover;
    }
    bg-contain {
        background-size: contain;
    }
}

/* @description Utilities to set the border-radius property of the element. */
/* @category border */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
@utility border-radius {
    rounded-* {
        border-radius: value(--radius-*)
    }
    rounded-tl-* {
        border-top-left-radius: value(--radius-*);
    }
    rounded-tr-* {
        border-top-right-radius: value(--radius-*);
    }
    rounded-bl-* {
        border-bottom-left-radius: value(--radius-*);
    }
    rounded-br-* {
        border-bottom-right-radius: value(--radius-*);
    }
}

/* @description Utilities to set the border-color property of the element. */
/* @category border */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/border-color */
@utility border-color {
    @variant default,hover,focus,focus-within {
        border-transparent {
            border-color: transparent;
        }
        border-current {
            border-color: currentColor;
        }
        border-* {
            border-color: value(--color-*);
        }
    }
}

/* @category border */
/* @description Utilities to set the border-width property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/border-width */
@utility border-width {
    border-* {
        border-width: value(--border-width-*);
    }
    border-t-* {
        border-top-width: value(--border-width-*);
    }
    border-r-* {
        border-right-width: value(--border-width-*);
    }
    border-b-* {
        border-bottom-width: value(--border-width-*);
    }
    border-l-* {
        border-left-width: value(--border-width-*);
    }
}

/* @category border */
/* @description Utilities to set the border-style property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/border-style */
@utility border-style {
    border-solid {
        border-style: solid;
    }
    border-dashed {
        border-style: dashed;
    }
    border-dotted {
        border-style: dotted;
    }
    border-none {
        border-style: none;
    }
}

/* @category border */
/* @description Utilities to set the outline-color property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/outline-color */
@utility outline-color {
    @variant default,hover,focus,focus-within {
        outline-transparent {
            outline-color: transparent;
        }
        outline-current {
            outline-color: currentColor;
        }
        outline-* {
            outline-color: value(--color-*);
        }
    }
}

/* @category border */
/* @description Utilities to set the outline-width property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/outline-width */
@utility outline-width {
    outline-* {
        outline-width: value(--border-width-*);
    }
}

/* @category border */
/* @description Utilities to set the outline-offset property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/outline-offset */
@utility outline-offset {
    outline-offset-* {
        outline-offset: value(--border-width-*);
    }
}

/* @category border */
/* @description Utilities to set the outline-style property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style */
@utility outline-style {
    outline-solid {
        outline-style: solid;
    }
    outline-dashed {
        outline-style: dashed;
    }
    outline-dotted {
        outline-style: dotted;
    }
    outline-none {
        outline-style: none;
    }
}

/* @category effects */
/* @description Utilities to set the box-shadow property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow */
@utility shadow {
    @variant default,hover,focus {
        shadow-* {
            box-shadow: value(--shadow-*);
        }
    }
}

/* @category effects */
/* @description Utilities to set the opacity property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/opacity */
@utility opacity {
    @variant default,responsive,group-hover,group-focus,hover,focus,focus-within {
        opacity-* {
            opacity: value(--opacity-*);
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the align-content property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/align-content */
@utility align-content {
    @variant default,responsive {
        content-start {
            align-content: start;
        }
        content-center {
            align-content: center;
        }
        content-end {
            align-content: end;
        }
        content-stretch {
            align-content: stretch;
        }
        content-between {
            align-content: space-between;
        }
        content-around {
            align-content: space-around;
        }
        content-evenly {
            align-content: space-evenly;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the align-items property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/align-items */
@utility align-items {
    @variant default,responsive {
        items-start {
            align-items: flex-start;
        }
        items-center {
            align-items: center;
        }
        items-end {
            align-items: flex-end;
        }
        items-stretch {
            align-items: stretch;
        }
        items-baseline {
            align-items: baseline;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the align-self property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/align-self */
@utility align-self {
    @variant default,responsive {
        self-auto {
            align-self: auto;
        }
        self-start {
            align-self: flex-start;
        }
        self-end {
            align-self: flex-end;
        }
        self-center {
            align-self: center;
        }
        self-stretch {
            align-self: stretch;
        }
        self-baseline {
            align-self: baseline;
        }
    }
}

/* @description Utilities to set the flex-direction property of the element. */
/* @category flexbox */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction */
@utility flex-direction {
    @variant default,responsive {
        flex-row {
            flex-direction: row;
        }
        flex-col {
            flex-direction: column;
        }
        flex-row-reverse {
            flex-direction: row-reverse;
        }
        flex-col-reverse {
            flex-direction: column-reverse;
        }
    }
}

/* @description Utilities to set the flex-grow property of the element. */
/* @category flexbox */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow */
@utility flex-grow {
    @variant default,responsive {
        grow-0 {
            flex-grow: 0;
        }
        grow-1 {
            flex-grow: 1;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the flex-shrink property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink */
@utility flex-shrink {
    @variant default,responsive {
        shrink-0 {
            flex-shrink: 0;
        }
        shrink-1 {
            flex-shrink: 1;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the flex-wrap property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap */
@utility flex-wrap {
    @variant default,responsive {
        flex-wrap {
            flex-wrap: wrap;
        }
        flex-wrap-reverse {
            flex-wrap: wrap-reverse;
        }
        flex-nowrap {
            flex-wrap: nowrap;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the gap property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/gap */
@utility gap {
    @variant default,responsive {
        gap-* {
            gap: value(--gap-*);
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the grid-template-columns property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */
@utility grid-template-columns {
    @variant default,responsive {
        grid-cols-1 {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        grid-cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        grid-cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        grid-cols-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        grid-cols-5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }
        grid-cols-6 {
            grid-template-columns: repeat(6, minmax(0, 1fr));
        }
        grid-cols-7 {
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }
        grid-cols-8 {
            grid-template-columns: repeat(8, minmax(0, 1fr));
        }
        grid-cols-9 {
            grid-template-columns: repeat(9, minmax(0, 1fr));
        }
        grid-cols-10 {
            grid-template-columns: repeat(10, minmax(0, 1fr));
        }
        grid-cols-11 {
            grid-template-columns: repeat(11, minmax(0, 1fr));
        }
        grid-cols-12 {
            grid-template-columns: repeat(12, minmax(0, 1fr));
        }
        grid-cols-none {
            grid-template-columns: none;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the grid-template-rows property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows */
@utility grid-template-rows {
    @variant default,responsive {
        grid-rows-1 {
            grid-template-rows: repeat(1, minmax(0, 1fr));
        }
        grid-rows-2 {
            grid-template-rows: repeat(2, minmax(0, 1fr));
        }
        grid-rows-3 {
            grid-template-rows: repeat(3, minmax(0, 1fr));
        }
        grid-rows-4 {
            grid-template-rows: repeat(4, minmax(0, 1fr));
        }
        grid-rows-5 {
            grid-template-rows: repeat(5, minmax(0, 1fr));
        }
        grid-rows-6 {
            grid-template-rows: repeat(6, minmax(0, 1fr));
        }
        grid-rows-none {
            grid-template-rows: none;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the size and the position of elements in grid columns. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column */
@utility grid-column {
    @variant default,responsive {
        col-span-1 {
            grid-column: span 1 / span 1;
        }
        col-span-2 {
            grid-column: span 2 / span 2;
        }
        col-span-3 {
            grid-column: span 3 / span 3;
        }
        col-span-4 {
            grid-column: span 4 / span 4;
        }
        col-span-5 {
            grid-column: span 5 / span 5;
        }
        col-span-6 {
            grid-column: span 6 / span 6;
        }
        col-span-7 {
            grid-column: span 7 / span 7;
        }
        col-span-8 {
            grid-column: span 8 / span 8;
        }
        col-span-9 {
            grid-column: span 9 / span 9;
        }
        col-span-10 {
            grid-column: span 10 / span 10;
        }
        col-span-11 {
            grid-column: span 11 / span 11;
        }
        col-span-12 {
            grid-column: span 12 / span 12;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the size and the position of elements in grid rows. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row */
@utility grid-row {
    @variant default,responsive {
        row-span-1 {
            grid-row: span 1 / span 1;
        }
        row-span-2 {
            grid-row: span 2 / span 2;
        }
        row-span-3 {
            grid-row: span 3 / span 3;
        }
        row-span-4 {
            grid-row: span 4 / span 4;
        }
        row-span-5 {
            grid-row: span 5 / span 5;
        }
        row-span-6 {
            grid-row: span 6 / span 6;
        }
        row-span-7 {
            grid-row: span 7 / span 7;
        }
        row-span-8 {
            grid-row: span 8 / span 8;
        }
        row-span-9 {
            grid-row: span 9 / span 9;
        }
        row-span-10 {
            grid-row: span 10 / span 10;
        }
        row-span-11 {
            grid-row: span 11 / span 11;
        }
        row-span-12 {
            grid-row: span 12 / span 12;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the justify-content property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
@utility justify-content {
    @variant default,responsive {
        justify-start {
            justify-content: flex-start;
        }
        justify-end {
            justify-content: flex-end;
        }
        justify-center {
            justify-content: center;
        }
        justify-between {
            justify-content: space-between;
        }
        justify-around {
            justify-content: space-around;
        }
    }
}

/* @category flexbox */
/* @description Utilities to set the order property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/order */
@utility order {
    @variant default,responsive {
        order-none {
            order: 0;
        }
        order-first {
            order: -999;
        }
        order-last {
            order: 999;
        }
        order-* {
            order: value(--order-*);
        }
    }
}

/* @category interactivity */
/* @description Utilities to set the cursor property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
@utility cursor {
    cursor-auto {
        cursor: auto;
    }
    cursor-default {
        cursor: default;
    }
    cursor-hand {
        cursor: pointer;
    }
    cursor-pointer {
        cursor: pointer;
    }
    cursor-move {
        cursor: move;
    }
    cursor-none {
        cursor: none;
    }
    cursor-zoom-in {
        cursor: zoom-in;
    }
    cursor-zoom-out {
        cursor: zoom-out;
    }
    cursor-not-allowed {
        cursor: not-allowed;
    }
    cursor-wait {
        cursor: wait;
    }
    cursor-text {
        cursor: text;
    }
    cursor-help {
        cursor: help;
    }
    cursor-context-menu {
        cursor: context-menu;
    }
    cursor-progress {
        cursor: progress;
    }
    cursor-cell {
        cursor: cell;
    }
    cursor-crosshair {
        cursor: crosshair;
    }
    cursor-vertical-text {
        cursor: vertical-text;
    }
    cursor-alias {
        cursor: alias;
    }
    cursor-copy {
        cursor: copy;
    }
    cursor-no-drop {
        cursor: no-drop;
    }
    cursor-grab {
        cursor: grab;
    }
    cursor-grabbing {
        cursor: grabbing;
    }
    cursor-all-scroll {
        cursor: all-scroll;
    }
    cursor-col-resize {
        cursor: col-resize;
    }
    cursor-row-resize {
        cursor: row-resize;
    }
    cursor-n-resize {
        cursor: n-resize;
    }
    cursor-e-resize {
        cursor: e-resize;
    }
    cursor-s-resize {
        cursor: s-resize;
    }
    cursor-w-resize {
        cursor: w-resize;
    }
    cursor-ne-resize {
        cursor: ne-resize;
    }
    cursor-nw-resize {
        cursor: nw-resize;
    }
    cursor-se-resize {
        cursor: se-resize;
    }
    cursor-sw-resize {
        cursor: sw-resize;
    }
    cursor-ew-resize {
        cursor: ew-resize;
    }
    cursor-ns-resize {
        cursor: ns-resize;
    }
    cursor-nesw-resize {
        cursor: nesw-resize;
    }
}

/* @category interactivity */
/* @description Utilities to set the user-select property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
@utility user-select {
    select-none {
        user-select: none;
    }
    select-none {
        user-select: none;
    }
    select-text {
        user-select: text;
    }
    select-all {
        user-select: all;
    }
    select-auto {
        user-select: auto;
    }
}

/* @category interactivity */
/* @description Utilities to set the pointer-events property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */
@utility pointer-events {
    pointer-events-auto {   
        pointer-events: auto;
    }
    pointer-events-none {
        pointer-events: none;
    }
}

/* @category interactivity */
/* @description Utilities to set the touch-action property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action */
@utility touch-action {
    touch-auto {
        touch-action: auto;
    }
    touch-none {
        touch-action: none;
    }
    touch-pan-x {
        touch-action: pan-x;
    }
    touch-pan-y {
        touch-action: pan-y;
    }
    touch-pan-left {
        touch-action: pan-left;
    }
    touch-pan-right {
        touch-action: pan-right;
    }
    touch-pan-up {
        touch-action: pan-up;
    }
    touch-pan-down {
        touch-action: pan-down;
    }
    touch-pinch-zoom {
        touch-action: pinch-zoom;
    }
    touch-manipulation {
        touch-action: manipulation;
    }
}

/* @description Utilities to set the bottom property of the element. */
/* @category layout */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/bottom */
@utility bottom {
    bottom-0 {
        bottom: 0px;
    }
    bottom-half {
        bottom: 50%;
    }
    bottom-full {
        bottom: 100%;
    }
}

/* @description Utilities to set the left property of the element. */
/* @category layout */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/left */
@utility left {
    left-0 {
        left: 0px;
    }
    left-half {
        left: 50%;
    }
    left-full {
        left: 100%;
    }
}

/* @category layout */
/* @description Utilities to set the right property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/right */
@utility right {
    right-0 {
        right: 0px;
    }
    right-half {
        right: 50%;
    }
    right-full {
        right: 100%;
    }
}

/* @category layout */
/* @description Utilities to set the top property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/top */
@utility top {
    top-0 {
        top: 0px;
    }
    top-half {
        top: 50%;
    }
    top-full {
        top: 100%;
    }
}

/* @category layout */
/* @description Utilities to set the position property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/position */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/position */
@utility position {
    @variant default,responsive {
        relative {
            position: relative;
        }
        absolute {
            position: absolute;
        }
        sticky {
            position: sticky;
        }
        fixed {
            position: fixed;
        }
        initial {
            position: initial;
        }
    }
}

/* @category layout */
/* @description Utilities to set the overflow property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/overflow */
@utility overflow {
    overflow-auto {
        overflow: auto;
    }
    overflow-scroll {
        overflow: scroll;
    }
    overflow-hidden {
        overflow: hidden;
    }
    overflow-visible {
        overflow: visible;
    }
    overflow-x-auto {
        overflow-x: auto;
    }
    overflow-x-scroll {
        overflow-x: scroll;
    }
    overflow-x-hidden {
        overflow-x: hidden;
    }
    overflow-x-visible {
        overflow-x: visible;
    }
    overflow-y-auto {
        overflow-y: auto;
    }
    overflow-y-scroll {
        overflow-y: scroll;
    }
    overflow-y-hidden {
        overflow-y: hidden;
    }
    overflow-y-visible {
        overflow-y: visible;
    }
}

/* @category layout */
/* @description Utilities to set the z-index property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/z-index */
@utility z-index {
    z-auto {
        z-index: auto;
    }
    z-* {
        z-index: value(--z-index-*);
    }
}

/* @category layout */
/* @description Utilities to set the display property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/display */
@utility display {
    @variant default,responsive,print,hover,focus,focus-within,group-hover,group-focus,group-focus-within {
        hidden {
            display: none;
        }
        block {
            display: block;
        }
        inline-block {
            display: inline-block;
        }
        flex {
            display: flex;
        }
        inline-flex {
            display: inline-flex;
        }
        grid {
            display: grid;
        }
        inline-grid {
            display: inline-grid;
        }
        table {
            display: table;
        }
        inline-table {
            display: inline-table;
        }
        table-row {
            display: table-row;
        }
        table-cell {
            display: table-cell;
        }
        table-column {
            display: table-column;
        }
        table-group {
            display: table-group;
        }
        table-header-group {
            display: table-header-group;
        }
        table-footer-group {
            display: table-footer-group;
        }
        table-column-group {
            display: table-column-group;
        }
    }
}

/* @category layout */
/* @description Utilities to set the float property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/float */
@utility float {
    float-left {
        float: left;
    }
    float-right {
        float: right;
    }
    float-start {
        float: inline-start;
    }
    float-end {
        float: inline-end;
    }
    float-none {
        float: none;
    }
}

/* @category sizing */
/* @description Utilities to set the height property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/height */
@utility height {
    @variant default,responsive {
        h-screen {
            height: 100vh;
        }
        h-* {
            height: value(--spacing-*);
        }
    }
}

/* @category sizing */
/* @description Utilities to set the max-height property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/max-height */
@utility max-height {
    @variant default,responsive {
        max-h-screen {
            max-height: 100vh;
        }
        max-h-* {
            max-height: value(--spacing-*);
        }
    }
}

/* @category sizing */
/* @description Utilities to set the min-height property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/min-height */
@utility min-height {
    @variant default,responsive {
        min-h-screen {
            min-height: 100vh;
        }
        min-h-* {
            min-height: value(--spacing-*);
        }
    }
}

/* @category sizing */
/* @description Utilities to set the width property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/width */
@utility width {
    @variant default,responsive {
        w-auto {
            width: auto;
        }
        w-* {
            width: value(--spacing-*);
        }
    }
}

/* @category sizing */
/* @description Utilities to set the max-width property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
@utility max-width {
    @variant default,responsive {
        max-w-* {
            max-width: value(--spacing-*);
        }
        max-w-* {
            max-width: value(--container-*);
        }
    }
}

/* @category sizing */
/* @description Utilities to set the min-width property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/min-width */
@utility min-width {
    @variant default,responsive {
        min-w-* {
            min-width: value(--spacing-*);
        }
    }
}

/* @category spacing */
/* @description Utilities to set the margin property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/margin */
@utility margin {
    @variant default,responsive {
        m-* {
            margin: value(--spacing-*);
        }
        mx-* {
            margin-left: value(--spacing-*);
            margin-right: value(--spacing-*);
        }
        mx-auto {
            margin-left: auto;
            margin-right: auto;
        }
        my-* {
            margin-top: value(--spacing-*);
            margin-bottom: value(--spacing-*);
        }
        ml-* {
            margin-left: value(--spacing-*);
        }
        ml-auto {
            margin-left: auto;
        }
        mr-* {
            margin-right: value(--spacing-*);
        }
        mr-auto {
            margin-right: auto;
        }
    }
    @variant default,responsive,first,last {
        mt-* {
            margin-top: value(--spacing-*);
        }
        mb-* {
            margin-bottom: value(--spacing-*);
        }
    }
}

/* @category spacing */
/* @description Utilities to set the padding property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/padding */
@utility padding {
    @variant default,responsive {
        p-* {
            padding: value(--spacing-*);
        }
        px-* {
            padding-left: value(--spacing-*);
            padding-right: value(--spacing-*);
        }
        py-* {
            padding-top: value(--spacing-*);
            padding-bottom: value(--spacing-*);
        }
        pl-* {
            padding-left: value(--spacing-*);
        }
        pr-* {
            padding-right: value(--spacing-*);
        }
    }
    @variant default,responsive,first,last {
        pt-* {
            padding-top: value(--spacing-*);
        }
        pb-* {
            padding-bottom: value(--spacing-*);
        }
    }
}

/* @category typography */
/* @description Utilities to set the font-family property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/font-family */
@utility font-family {
    font-* {
        font-family: value(--font-family-*);
    }
}

/* @category typography */
/* @description Utilities to set the font-size property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/font-size */
@utility font-size {
    @variant default,responsive {
        text-* {
            font-size: value(--font-size-*);
        }
    }
}

/* @category typography */
/* @description Utilities to set the font-style property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/font-style */
@utility font-style {
    italic {
        font-style: italic;
    }
    not-italic {
        font-style: normal;
    }
}

/* @category typography */
/* @description Utilities to set the font-weight property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight */
@utility font-weight {
    @variant default,hover,group-hover {
        font-* {
            font-weight: value(--font-weight-*);
        }
    }
}

/* @category typography */
/* @description Utilities to set the letter-spacing property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing */
@utility letter-spacing {
    tracking-* {
        letter-spacing: value(--tracking-*);
    }
}

/* @category typography */
/* @description Utilities to set the line-height property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/line-height */
@utility line-height {
    leading-* {
        line-height: value(--leading-*);
    }
}

/* @category typography */
/* @description Utilities to set the list-style-position property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
@utility list-style-position {
    list-inside {
        list-style-position: inside;
    }
    list-outside {
        list-style-position: outside;
    }
}

/* @category typography */
/* @description Utilities to set the list-style-type property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
@utility list-style-type {
    list-none {
        list-style-type: none;
    }
    list-disc {
        list-style-type: disc;
    }
    list-decimal {
        list-style-type: decimal;
    }
}

/* @category typography */
/* @description Utilities to set the text-align property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-align */
@utility text-align {
    text-justify {
        text-align: justify;
    }
    text-left {
        text-align: left;
    }
    text-center {
        text-align: center;
    }
    text-right {
        text-align: right;
    }
}

/* @category typography */
/* @description Utilities to set the text color of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/color */
@utility text-color {
    @variant default,hover,focus,focus-within,group-hover {
        text-transparent {
            color: transparent;
        }
        text-current {
            color: currentColor;
        }
        text-* {
            color: value(--color-*);
        }
    }
}

/* @category typography */
/* @description Utilities to set the text-decoration-line property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line */
@utility text-decoration-line {
    @variant default,hover,group-hover {
        strike {
            text-decoration-line: line-through;
        }
        underline {
            text-decoration-line: underline;
        }
        no-underline {
            text-decoration-line: none;
        }
    }
}

/* @category typography */
/* @description Utilities to set the text-decoration-color property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color */
@utility text-decoration-color {
    @variant default,hover,group-hover {
        decoration-transparent {
            text-decoration-color: transparent;
        }
        decoration-current {
            text-decoration-color: currentColor;
        }
        decoration-* {
            text-decoration-color: value(--color-*);
        }
    }
}

/* @category typography */
/* @description Utilities to set the text-decoration-style property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style */
@utility text-decoration-style {
    @variant default,hover,group-hover {
        decoration-solid {
            text-decoration-style: solid;
        }
        decoration-double {
            text-decoration-style: double;
        }
        decoration-dotted {
            text-decoration-style: dotted;
        }
        decoration-dashed {
            text-decoration-style: dashed;
        }
        decoration-wavy {
            text-decoration-style: wavy;
        }
    }
}

/* @category typography */
/* @description Utilities to set the text-decoration-thickness property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-thickness */
@utility text-decoration-thickness {
    @variant default,hover,group-hover {
        decoration-auto {
            text-decoration-thickness: auto;
        }
        decoration-0 {
            text-decoration-thickness: 0;
        }
        decoration-1 {
            text-decoration-thickness: 1px;
        }
        decoration-2 {
            text-decoration-thickness: 2px;
        }
        decoration-4 {
            text-decoration-thickness: 4px;
        }
        decoration-8 {
            text-decoration-thickness: 8px;
        }
    }
}

/* @category typography */
/* @description Utilities to set the text-underline-offset property of the element. */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset */
@utility text-underline-offset {
    @variant default,hover,group-hover {
        underline-offset-auto {
            text-underline-offset: auto;
        }
        underline-offset-0 {
            text-underline-offset: 0;
        }
        underline-offset-1 {
            text-underline-offset: 1px;
        }
        underline-offset-2 {
            text-underline-offset: 2px;
        }
        underline-offset-4 {
            text-underline-offset: 4px;
        }
        underline-offset-8 {
            text-underline-offset: 8px;
        }
    }
}

/* @description Utilities to set the text-overflow property of the element. */
/* @category typography */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow */
@utility text-overflow {
    text-ellipsis {
        text-overflow: ellipsis;
    }
    text-clip {
        text-overflow: clip;
    }
}

/* @description Utilities to set the text-transform property of the element. */
/* @category typography */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform */
@utility text-transform {
    capitalize {
        text-transform: capitalize;
    }
    uppercase {
        text-transform: uppercase;
    }
    lowercase {
        text-transform: lowercase;
    }
}

/* @description Utilities to set the vertical-align property of the element. */
/* @category typography */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align */
@utility vertical-align {
    align-baseline {
        vertical-align: baseline;
    }
    align-top {
        vertical-align: top;
    }
    align-middle {
        vertical-align: middle;
    }
    align-bottom {
        vertical-align: bottom;
    }
    align-text-top {
        vertical-align: text-top;
    }
    align-text-bottom {
        vertical-align: text-bottom;
    }
}

/* @description utilities to set the filter (blur) property of the element. */
/* @category filters */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/filter */
@utility blur {
    blur-* {
        filter: blur(value(--blur-*));
    }
}

/* @description utilities to set the filter (brightness) property of the element. */
/* @category filters */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/filter */
@utility brightness {
    brightness-* {
        filter: brightness(value(--brightness-*));
    }
}

/* @description utilities to set the filter (contrast) property of the element. */
/* @category filters */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/filter */
@utility contrast {
    contrast-* {
        filter: contrast(value(--contrast-*));
    }
}

/* @description utilities to set the filter (saturation) property of the element. */
/* @category filters */
/* @url https://developer.mozilla.org/en-US/docs/Web/CSS/filter */
@utility saturate {
    saturate-* {
        filter: saturate(value(--saturate-*));
    }
}