/**
 * Utility Classes
 *
 * Helper classes for common patterns.
 *
 * @package Advanced_Customer_Account
 */

/* ==========================================================================
   Visibility
   ========================================================================== */

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

.aca-invisible {
    visibility: hidden !important;
}

@media (max-width: 768px) {
    .aca-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .aca-hide-desktop {
        display: none !important;
    }
}

/* ==========================================================================
   Spacing
   ========================================================================== */

.aca-mt-0 { margin-top: var(--aca-spacing-0) !important; }
.aca-mt-2 { margin-top: var(--aca-spacing-2) !important; }
.aca-mt-4 { margin-top: var(--aca-spacing-4) !important; }
.aca-mt-6 { margin-top: var(--aca-spacing-6) !important; }
.aca-mt-8 { margin-top: var(--aca-spacing-8) !important; }

.aca-mb-0 { margin-bottom: var(--aca-spacing-0) !important; }
.aca-mb-2 { margin-bottom: var(--aca-spacing-2) !important; }
.aca-mb-4 { margin-bottom: var(--aca-spacing-4) !important; }
.aca-mb-6 { margin-bottom: var(--aca-spacing-6) !important; }
.aca-mb-8 { margin-bottom: var(--aca-spacing-8) !important; }

.aca-ml-auto { margin-left: auto !important; }
.aca-mr-auto { margin-right: auto !important; }

.aca-p-0 { padding: var(--aca-spacing-0) !important; }
.aca-p-4 { padding: var(--aca-spacing-4) !important; }
.aca-p-6 { padding: var(--aca-spacing-6) !important; }

/* ==========================================================================
   Text
   ========================================================================== */

.aca-text-center { text-align: center !important; }
.aca-text-left { text-align: left !important; }
.aca-text-right { text-align: right !important; }

.aca-text-sm { font-size: var(--aca-font-size-sm) !important; }
.aca-text-base { font-size: var(--aca-font-size-base) !important; }
.aca-text-lg { font-size: var(--aca-font-size-lg) !important; }

.aca-font-normal { font-weight: var(--aca-font-weight-normal) !important; }
.aca-font-medium { font-weight: var(--aca-font-weight-medium) !important; }
.aca-font-semibold { font-weight: var(--aca-font-weight-semibold) !important; }
.aca-font-bold { font-weight: var(--aca-font-weight-bold) !important; }

.aca-text-gray-500 { color: var(--aca-color-gray-500) !important; }
.aca-text-gray-700 { color: var(--aca-color-gray-700) !important; }
.aca-text-gray-900 { color: var(--aca-color-gray-900) !important; }
.aca-text-primary { color: var(--aca-color-primary) !important; }
.aca-text-success { color: var(--aca-color-success) !important; }
.aca-text-error { color: var(--aca-color-error) !important; }

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

/* ==========================================================================
   Flexbox
   ========================================================================== */

.aca-flex { display: flex !important; }
.aca-inline-flex { display: inline-flex !important; }
.aca-flex-col { flex-direction: column !important; }
.aca-flex-wrap { flex-wrap: wrap !important; }

.aca-items-start { align-items: flex-start !important; }
.aca-items-center { align-items: center !important; }
.aca-items-end { align-items: flex-end !important; }

.aca-justify-start { justify-content: flex-start !important; }
.aca-justify-center { justify-content: center !important; }
.aca-justify-end { justify-content: flex-end !important; }
.aca-justify-between { justify-content: space-between !important; }

.aca-gap-2 { gap: var(--aca-spacing-2) !important; }
.aca-gap-4 { gap: var(--aca-spacing-4) !important; }
.aca-gap-6 { gap: var(--aca-spacing-6) !important; }

.aca-flex-1 { flex: 1 !important; }
.aca-flex-shrink-0 { flex-shrink: 0 !important; }

/* ==========================================================================
   Width
   ========================================================================== */

.aca-w-full { width: 100% !important; }
.aca-w-auto { width: auto !important; }
.aca-max-w-full { max-width: 100% !important; }

/* ==========================================================================
   Borders
   ========================================================================== */

.aca-border { border: 1px solid var(--aca-color-gray-200) !important; }
.aca-border-t { border-top: 1px solid var(--aca-color-gray-200) !important; }
.aca-border-b { border-bottom: 1px solid var(--aca-color-gray-200) !important; }
.aca-border-none { border: none !important; }

.aca-rounded { border-radius: var(--aca-radius-md) !important; }
.aca-rounded-lg { border-radius: var(--aca-radius-lg) !important; }
.aca-rounded-full { border-radius: var(--aca-radius-full) !important; }

/* ==========================================================================
   Shadows
   ========================================================================== */

.aca-shadow-sm { box-shadow: var(--aca-shadow-sm) !important; }
.aca-shadow-md { box-shadow: var(--aca-shadow-md) !important; }
.aca-shadow-lg { box-shadow: var(--aca-shadow-lg) !important; }
.aca-shadow-none { box-shadow: none !important; }

/* ==========================================================================
   Cursor
   ========================================================================== */

.aca-cursor-pointer { cursor: pointer !important; }
.aca-cursor-not-allowed { cursor: not-allowed !important; }

/* ==========================================================================
   Opacity
   ========================================================================== */

.aca-opacity-50 { opacity: 0.5 !important; }
.aca-opacity-75 { opacity: 0.75 !important; }
.aca-opacity-100 { opacity: 1 !important; }

/* ==========================================================================
   Transitions
   ========================================================================== */

.aca-transition {
    transition: all var(--aca-transition-normal) !important;
}

.aca-transition-fast {
    transition: all var(--aca-transition-fast) !important;
}

/* ==========================================================================
   Overflow
   ========================================================================== */

.aca-overflow-hidden { overflow: hidden !important; }
.aca-overflow-auto { overflow: auto !important; }
.aca-overflow-x-auto { overflow-x: auto !important; }
.aca-overflow-y-auto { overflow-y: auto !important; }

/* ==========================================================================
   Position
   ========================================================================== */

.aca-relative { position: relative !important; }
.aca-absolute { position: absolute !important; }
.aca-fixed { position: fixed !important; }
.aca-sticky { position: sticky !important; }