webapps/packages/layers/ux/app/assets/css/ux.css

@import "tailwindcss"; /* TODO scan current layer */
@import "@nuxt/ui";

@source "../..";

@theme {
    --spacing: 0.25rem; /* this is used by all utility classes like px-4  */
}

/*@source inline("@lg:flex-row");*/

:root {
    /*--content-padding: calc(var(--spacing) * 2); !* left and right *!*/

    --min-content-width-rem: 16; /* best to mirror tablet breakpoint */
    --min-content-width: calc(var(--min-content-width-rem) * 1rem);

    --max-content-width-rem: 80; /* best to mirror desktop breakpoint */
    --max-content-width: calc(var(--max-content-width-rem) * 1rem);

    --min-content-spacing-rem: 0.5;
    --min-content-spacing: calc(var(--min-content-spacing-rem) * 1rem);

    --max-content-spacing-rem: 1;
    --max-content-spacing: calc(var(--max-content-spacing-rem) * 1rem);

    --content-width: clamp(var(--min-content-width), 100vw, var(--max-content-width));
    --spacing-slope: calc((var(--max-content-spacing-rem) - var(--min-content-spacing-rem)) / (var(--max-content-width-rem) - var(--min-content-width-rem)));
    --spacing-intercept: calc(var(--min-content-spacing) - var(--spacing-slope) * var(--min-content-width));
    --spacing-responsive: clamp(var(--min-content-spacing), calc(var(--spacing-slope) * var(--content-width) + var(--spacing-intercept)), var(--max-content-spacing));

    scroll-behavior: smooth;
}

@utility rp-* {
    padding: calc(var(--spacing-responsive) * --value(number));
}

@utility rpx-* {
    padding-inline: calc(var(--spacing-responsive) * --value(number));
}

@utility rpy-* {
    padding-block: calc(var(--spacing-responsive) * --value(number));
}

@utility rpt-* {
    padding-top: calc(var(--spacing-responsive) * --value(number));
}

@utility rpb-* {
    padding-bottom: calc(var(--spacing-responsive) * --value(number));
}

@utility rpl-* {
    padding-left: calc(var(--spacing-responsive) * --value(number));
}

@utility rpr-* {
    padding-right: calc(var(--spacing-responsive) * --value(number));
}

@utility rm-* {
    margin: calc(var(--spacing-responsive) * --value(number));
}

@utility rmx-* {
    margin-inline: calc(var(--spacing-responsive) * --value(number));
}

@utility rmy-* {
    margin-block: calc(var(--spacing-responsive) * --value(number));
}

@utility rmt-* {
    margin-top: calc(var(--spacing-responsive) * --value(number));
}

@utility rmb-* {
    margin-bottom: calc(var(--spacing-responsive) * --value(number));
}

@utility rml-* {
    margin-left: calc(var(--spacing-responsive) * --value(number));
}

@utility rmr-* {
    margin-right: calc(var(--spacing-responsive) * --value(number));
}

@utility rgap-* {
    gap: calc(var(--spacing-responsive) * --value(number));
}

@utility rgap-x-* {
    column-gap: calc(var(--spacing-responsive) * --value(number));
}

@utility rgap-y-* {
    row-gap: calc(var(--spacing-responsive) * --value(number));
}





@utility fp-* {
    padding: calc(var(--min-content-spacing) * --value(number));
}

@utility fpx-* {
    padding-inline: calc(var(--min-content-spacing) * --value(number));
}

@utility fpy-* {
    padding-block: calc(var(--min-content-spacing) * --value(number));
}

@utility fpt-* {
    padding-top: calc(var(--min-content-spacing) * --value(number));
}

@utility fpb-* {
    padding-bottom: calc(var(--min-content-spacing) * --value(number));
}

@utility fpl-* {
    padding-left: calc(var(--min-content-spacing) * --value(number));
}

@utility fpr-* {
    padding-right: calc(var(--min-content-spacing) * --value(number));
}

@utility fm-* {
    margin: calc(var(--min-content-spacing) * --value(number));
}

@utility fmx-* {
    margin-inline: calc(var(--min-content-spacing) * --value(number));
}

@utility fmy-* {
    margin-block: calc(var(--min-content-spacing) * --value(number));
}

@utility fmt-* {
    margin-top: calc(var(--min-content-spacing) * --value(number));
}

@utility fmb-* {
    margin-bottom: calc(var(--min-content-spacing) * --value(number));
}

@utility fml-* {
    margin-left: calc(var(--min-content-spacing) * --value(number));
}

@utility fmr-* {
    margin-right: calc(var(--min-content-spacing) * --value(number));
}

@utility fgap-* {
    gap: calc(var(--min-content-spacing) * --value(number));
}

@utility fgap-x-* {
    column-gap: calc(var(--min-content-spacing) * --value(number));
}

@utility fgap-y-* {
    row-gap: calc(var(--min-content-spacing) * --value(number));
}



.red {
    border: 1px solid red;
}

.green {
    border: 1px solid green;
}

.blue {
    border: 1px solid blue;
}

.yellow {
    border: 1px solid yellow;
}

html, body, #__nuxt {
    width: 100%;
}

body {
    overflow-x: hidden;
}

/*Hack because noBodyStyles on UDrawer doesnt work*/
body[style*="pointer-events: none"] {
    pointer-events: auto !important;
}