/*********************/
/* Utilities classes.*/
/*********************/
.border-xs { border: var(--border-xs) solid var(--color-neutral) ; }
.border-sm { border: var(--border-sm) solid var(--color-neutral) ; }

.border-top-radius-none { border-top-right-radius: 0; border-top-left-radius: 0;}
.border-bottom-radius-none { border-bottom-right-radius: 0; border-bottom-left-radius: 0;}

.bg-overlay-5 {background-color: var(--color-beige-100);}

.bg-secondary{background-color: var(--bg-secondary); color: var(--text-color-on-bg-secondary);}

.col-span-full { grid-column: var(--grid-col-span-full);}
.col-span-1 { grid-column: var(--grid-col-span-1);}
.col-span-2 { grid-column: var(--grid-col-span-2);}
.col-span-3 { grid-column: var(--grid-col-span-3);}
.col-span-4 { grid-column: var(--grid-col-span-4);}

.layout-grid { display: grid;}
.layout-flex { display: flex;}

.gap-x-xs { gap: var(--space-inline-xs);}
.gap-x-sm { gap: var(--space-inline-sm);}
.gap-x-md { gap: var(--space-inline-md);}
.gap-x-lg { gap: var(--space-inline-lg);}
.gap-x-xl { gap: var(--space-inline-xl);}
.gap-x-2xl { gap: var(--space-inline-xxl);}

.gap-y-xs { gap: var(--space-stack-xs);}
.gap-y-sm { gap: var(--space-stack-sm);}
.gap-y-md { gap: var(--space-stack-md);}
.gap-y-lg { gap: var(--space-stack-lg);}
.gap-y-xl { gap: var(--space-stack-xl);}
.gap-y-2xl { gap: var(--space-stack-2xl);}

.grid-cols-1 { grid-template-columns: var(--grid-template-cols-1);}
.grid-cols-2 { grid-template-columns: var(--grid-template-cols-2); gap: var(--grid-gap-lg);}
.grid-cols-3 { grid-template-columns: var(--grid-template-cols-3); gap: var(--grid-gap-lg);}
.grid-cols-4 { grid-template-columns: var(--grid-template-cols-4); gap: var(--grid-gap-lg);}
.grid-cols-5 { grid-template-columns: var(--grid-template-cols-5); gap: var(--grid-gap-lg);}
.grid-cols-6 { grid-template-columns: var(--grid-template-cols-6); gap: var(--grid-gap-lg);}

.grid-gap-xs { gap: var(--grid-gap-xs);}
.grid-gap-sm { gap: var(--grid-gap-sm);}
.grid-gap-md { gap: var(--grid-gap-md);}
.grid-gap-lg { gap: var(--grid-gap-lg);}
.grid-gap-xl { gap: var(--grid-gap-xl);}
.grid-gap-xxl { gap: var(--grid-gap-xxl);}

.min-w-10 {  min-width: 10%;}
.min-w-20 {  min-width: 20%;}
.min-w-25 {  min-width: 25%;}
.min-w-50 {  min-width: 50%;}

.mx-auto { margin: auto; }

.padding-sm {padding: var(--space-surface-sm);}
.padding-md {padding: var(--space-surface-md);}
.padding-lg {padding: var(--space-surface-lg);}

.p-inherit {
    padding: inherit !important;
}

.radius-bottom-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0;}

.rotate-90{ transform: rotate(90deg);}

.row-span-full { grid-row: 1 / -1;}
.row-span-1 { grid-row: span 1;}
.row-span-2 { grid-row: span 2;}
.row-span-3 { grid-row: span 3;}
.row-span-4 { grid-row: span 4;}
.row-span-5 { grid-row: span 5;}
.row-span-6 { grid-row: span 6;}

.shadow-xs {box-shadow: var(--shadow-xs);} 
.shadow-xs-inner {box-shadow: var(--shadow-xs-inner);} 
.shadow-md {box-shadow: var(--shadow-md);}


.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.text-emphasis {
    font-weight: var(--text-font-bold);
}
.text-detail {
    font-size: var(--text-sm);
    color: var(--text-color-default-muted);
}

.text-metadata {
    font-size: var(--text-sm);
    font-weight: var(--text-font-semi-bold);
    color: var(--text-color-default-muted);
    font-family: var(--bs-font-monospace);
}

.text-lower {text-transform: lowercase;}
.text-upper {text-transform: uppercase;}

.text-xs { font-size: var(--text-xs);}
.text-sm { font-size: var(--text-sm);}
.text-md { font-size: var(--text-md);}
.text-lg { font-size: var(--text-lg);}
.text-xl { font-size: var(--text-xl);}
.text-2xl { font-size: var(--text-2xl);}
.text-4xl { font-size: var(--text-4xl);}
.text-6xl { font-size: var(--text-6xl);}

.w-fit { width: fit-content; }
.w-50 {  width: 50%;}
.w-60 {  width: 60%;}
.h-fit { height: fit-content;}
.h-full { height: 100%;}