/* =========================================================
   VENDBAR UTILITIES CSS
   assets/css/04-utilities.css
   ---------------------------------------------------------
   Kleine, wiederverwendbare Helper.
   Keine Komponenten. Keine Seitenlogik.
   ========================================================= */


/* =========================================================
   DISPLAY / VISIBILITY
   ========================================================= */

.vb-hidden {
	display: none !important;
}

.vb-block {
	display: block !important;
}

.vb-inline-block {
	display: inline-block !important;
}

.vb-flex {
	display: flex !important;
}

.vb-inline-flex {
	display: inline-flex !important;
}

.vb-grid-util {
	display: grid !important;
}

.vb-visible-mobile {
	display: none !important;
}

@media (max-width: 768px) {

	.vb-hidden-mobile {
		display: none !important;
	}

	.vb-visible-mobile {
		display: block !important;
	}
}

@media (min-width: 769px) {

	.vb-hidden-desktop {
		display: none !important;
	}
}


/* =========================================================
   TEXT
   ========================================================= */

.vb-text-left {
	text-align: left !important;
}

.vb-text-center {
	text-align: center !important;
}

.vb-text-right {
	text-align: right !important;
}

.vb-text-soft {
	color: var(--vb-text-soft) !important;
}

.vb-text-muted {
	color: var(--vb-text-muted) !important;
}

.vb-text-action {
	color: var(--vb-action) !important;
}

.vb-text-success {
	color: var(--vb-success) !important;
}

.vb-text-warning {
	color: var(--vb-warning) !important;
}

.vb-text-inverse {
	color: var(--vb-text-inverse) !important;
}

.vb-font-bold {
	font-weight: var(--vb-weight-bold) !important;
}

.vb-font-semibold {
	font-weight: var(--vb-weight-semibold) !important;
}

.vb-font-medium {
	font-weight: var(--vb-weight-medium) !important;
}

.vb-text-xs {
	font-size: var(--vb-text-xs) !important;
}

.vb-text-sm {
	font-size: var(--vb-text-sm) !important;
}

.vb-text-base {
	font-size: var(--vb-text-base) !important;
}

.vb-text-md {
	font-size: var(--vb-text-md) !important;
}

.vb-text-lg {
	font-size: var(--vb-text-lg) !important;
}

.vb-text-xl {
	font-size: var(--vb-text-xl) !important;
}

.vb-text-nowrap {
	white-space: nowrap !important;
}

.vb-text-balance {
	text-wrap: balance;
}


/* =========================================================
   WIDTH / HEIGHT
   ========================================================= */

.vb-w-full {
	width: 100% !important;
}

.vb-w-fit {
	width: fit-content !important;
}

.vb-max-text {
	max-width: var(--vb-text-width) !important;
}

.vb-max-sm {
	max-width: 640px !important;
}

.vb-max-md {
	max-width: 860px !important;
}

.vb-max-lg {
	max-width: 1080px !important;
}

.vb-h-full {
	height: 100% !important;
}


/* =========================================================
   FLEX HELPERS
   ========================================================= */

.vb-items-start {
	align-items: flex-start !important;
}

.vb-items-center {
	align-items: center !important;
}

.vb-items-end {
	align-items: flex-end !important;
}

.vb-justify-start {
	justify-content: flex-start !important;
}

.vb-justify-center {
	justify-content: center !important;
}

.vb-justify-between {
	justify-content: space-between !important;
}

.vb-justify-end {
	justify-content: flex-end !important;
}

.vb-flex-wrap {
	flex-wrap: wrap !important;
}

.vb-flex-col {
	flex-direction: column !important;
}

.vb-flex-row {
	flex-direction: row !important;
}

.vb-shrink-0 {
	flex-shrink: 0 !important;
}

.vb-grow {
	flex-grow: 1 !important;
}


/* =========================================================
   GAP
   ========================================================= */

.vb-gap-xs {
	gap: var(--vb-space-xs) !important;
}

.vb-gap-sm {
	gap: var(--vb-space-sm) !important;
}

.vb-gap-md {
	gap: var(--vb-space-md) !important;
}

.vb-gap-lg {
	gap: var(--vb-space-lg) !important;
}

.vb-gap-xl {
	gap: var(--vb-space-xl) !important;
}

.vb-gap-2xl {
	gap: var(--vb-space-2xl) !important;
}

.vb-gap-3xl {
	gap: var(--vb-space-3xl) !important;
}


/* =========================================================
   MARGIN
   ========================================================= */

.vb-m-0 {
	margin: 0 !important;
}

.vb-mt-0 {
	margin-top: 0 !important;
}

.vb-mb-0 {
	margin-bottom: 0 !important;
}

.vb-mt-xs {
	margin-top: var(--vb-space-xs) !important;
}

.vb-mt-sm {
	margin-top: var(--vb-space-sm) !important;
}

.vb-mt-md {
	margin-top: var(--vb-space-md) !important;
}

.vb-mt-lg {
	margin-top: var(--vb-space-lg) !important;
}

.vb-mt-xl {
	margin-top: var(--vb-space-xl) !important;
}

.vb-mt-2xl {
	margin-top: var(--vb-space-2xl) !important;
}

.vb-mt-3xl {
	margin-top: var(--vb-space-3xl) !important;
}

.vb-mb-xs {
	margin-bottom: var(--vb-space-xs) !important;
}

.vb-mb-sm {
	margin-bottom: var(--vb-space-sm) !important;
}

.vb-mb-md {
	margin-bottom: var(--vb-space-md) !important;
}

.vb-mb-lg {
	margin-bottom: var(--vb-space-lg) !important;
}

.vb-mb-xl {
	margin-bottom: var(--vb-space-xl) !important;
}

.vb-mb-2xl {
	margin-bottom: var(--vb-space-2xl) !important;
}

.vb-mb-3xl {
	margin-bottom: var(--vb-space-3xl) !important;
}

.vb-mx-auto {
	margin-inline: auto !important;
}


/* =========================================================
   PADDING
   ========================================================= */

.vb-p-0 {
	padding: 0 !important;
}

.vb-p-xs {
	padding: var(--vb-space-xs) !important;
}

.vb-p-sm {
	padding: var(--vb-space-sm) !important;
}

.vb-p-md {
	padding: var(--vb-space-md) !important;
}

.vb-p-lg {
	padding: var(--vb-space-lg) !important;
}

.vb-p-xl {
	padding: var(--vb-space-xl) !important;
}

.vb-p-2xl {
	padding: var(--vb-space-2xl) !important;
}

.vb-p-3xl {
	padding: var(--vb-space-3xl) !important;
}

.vb-px-sm {
	padding-inline: var(--vb-space-sm) !important;
}

.vb-px-md {
	padding-inline: var(--vb-space-md) !important;
}

.vb-px-lg {
	padding-inline: var(--vb-space-lg) !important;
}

.vb-px-xl {
	padding-inline: var(--vb-space-xl) !important;
}

.vb-py-sm {
	padding-block: var(--vb-space-sm) !important;
}

.vb-py-md {
	padding-block: var(--vb-space-md) !important;
}

.vb-py-lg {
	padding-block: var(--vb-space-lg) !important;
}

.vb-py-xl {
	padding-block: var(--vb-space-xl) !important;
}


/* =========================================================
   BACKGROUNDS
   ========================================================= */

.vb-bg-page {
	background: var(--vb-bg) !important;
}

.vb-bg-surface {
	background: var(--vb-surface) !important;
}

.vb-bg-soft {
	background: var(--vb-surface-soft) !important;
}

.vb-bg-muted {
	background: var(--vb-surface-muted) !important;
}

.vb-bg-action-soft {
	background: var(--vb-action-soft) !important;
}

.vb-bg-info-soft {
	background: var(--vb-info-soft) !important;
}

.vb-bg-success-soft {
	background: var(--vb-success-soft) !important;
}

.vb-bg-warning-soft {
	background: var(--vb-warning-soft) !important;
}


/* =========================================================
   BORDER / RADIUS / SHADOW
   ========================================================= */

.vb-border {
	border: 1px solid var(--vb-border) !important;
}

.vb-border-soft {
	border: 1px solid var(--vb-border-soft) !important;
}

.vb-border-strong {
	border: 1px solid var(--vb-border-strong) !important;
}

.vb-border-0 {
	border: 0 !important;
}

.vb-radius-sm {
	border-radius: var(--vb-radius-sm) !important;
}

.vb-radius-md {
	border-radius: var(--vb-radius-md) !important;
}

.vb-radius-lg {
	border-radius: var(--vb-radius-lg) !important;
}

.vb-radius-xl {
	border-radius: var(--vb-radius-xl) !important;
}

.vb-radius-pill {
	border-radius: var(--vb-radius-pill) !important;
}

.vb-shadow-none {
	box-shadow: none !important;
}

.vb-shadow-soft {
	box-shadow: var(--vb-shadow-soft) !important;
}

.vb-shadow-card {
	box-shadow: var(--vb-shadow-card) !important;
}

.vb-shadow-panel {
	box-shadow: var(--vb-shadow-panel) !important;
}


/* =========================================================
   OVERFLOW / POSITION
   ========================================================= */

.vb-overflow-hidden {
	overflow: hidden !important;
}

.vb-overflow-auto {
	overflow: auto !important;
}

.vb-relative {
	position: relative !important;
}

.vb-absolute {
	position: absolute !important;
}

.vb-sticky {
	position: sticky !important;
}

.vb-z-1 {
	z-index: 1 !important;
}

.vb-z-10 {
	z-index: 10 !important;
}

.vb-z-100 {
	z-index: 100 !important;
}


/* =========================================================
   RESPONSIVE UTILITIES
   ========================================================= */

@media (max-width: 640px) {

	.vb-mobile-text-left {
		text-align: left !important;
	}

	.vb-mobile-text-center {
		text-align: center !important;
	}

	.vb-mobile-w-full {
		width: 100% !important;
	}

	.vb-mobile-flex-col {
		flex-direction: column !important;
	}

	.vb-mobile-hidden {
		display: none !important;
	}
}