/*! * Bugasura Component Library v2.0.0 * A comprehensive design system component library with CSS Cascade Layers * Copyright 2025 Bugasura * Licensed under MIT * * Dependencies: * - variables.css (Design tokens) * - Material Symbols Rounded (Icon font) * * - base: HTML element defaults * - theme: Design tokens and variables * - components: Component-specific styles * - utilities: Helper classes (highest priority) */ /* ================================================================== LAYER 2: BASE HTML element defaults ================================================================== */ /** * Base component container * Applied to all Bugasura components for consistent behavior */ .ba-component { box-sizing: border-box; font-family: var(--ap-font-roboto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .ba-component *, .ba-component *::before, .ba-component *::after { box-sizing: inherit; } /* ================================================================== LAYER 3: THEME Design tokens and CSS variables ================================================================== */ /** * Theme Variables - Light Mode (Default) * These variables automatically switch based on data-theme attribute */ :root, [data-theme="light"] { /* Surface colors */ --ba-surface-primary: var(--Base-Colors-Base-White); --ba-surface-secondary: var(--Neutral-Colors-Main-Neutrals-50); --ba-surface-tertiary: var(--Neutral-Colors-Main-Neutrals-100); --ba-surface-elevated: var(--Base-Colors-Base-White); --ba-surface-overlay: var(--Neutral-Colors-Alpha-Neutrals-100); /* Text colors */ --ba-text-primary: var(--Text-High); --ba-text-secondary: var(--Text-Medium); --ba-text-tertiary: var(--Text-Low); --ba-text-disabled: var(--Text-Disabled); --ba-text-inverse: var(--Base-Colors-Base-White); /* Border colors */ --ba-border-primary: var(--Outline-Medium); --ba-border-secondary: var(--Outline-Low); --ba-border-focus: var(--Primary-Primary); /* Interactive colors */ --ba-interactive-primary: var(--Primary-Primary); --ba-interactive-primary-hover: var(--Primary-Hover); --ba-interactive-secondary: var(--Secondary-Secondary); --ba-interactive-secondary-hover: var(--Secondary-Hover); /* Shadow tokens */ --ba-shadow-sm: 0 0.089rem 0.179rem rgba(0, 20, 36, 0.04); --ba-shadow-md: 0 0.179rem 0.357rem rgba(0, 20, 36, 0.08); --ba-shadow-lg: 0 0.357rem 0.714rem rgba(0, 20, 36, 0.12); --ba-shadow-xl: 0 0.714rem 1.429rem rgba(0, 20, 36, 0.16); } /** * Dark Theme Configuration * Usage: Add data-theme="dark" to or */ [data-theme="dark"] { /* Surface colors - inverted hierarchy */ --ba-surface-primary: var(--Neutral-Colors-Main-Neutrals-900); --ba-surface-secondary: var(--Neutral-Colors-Main-Neutrals-800); --ba-surface-tertiary: var(--Neutral-Colors-Main-Neutrals-700); --ba-surface-elevated: var(--Neutral-Colors-Main-Neutrals-800); --ba-surface-overlay: var(--Neutral-Colors-Alpha-Neutrals-800); /* Text colors - adjusted for dark backgrounds */ --ba-text-primary: var(--Neutral-Colors-Main-Neutrals-50); --ba-text-secondary: var(--Neutral-Colors-Main-Neutrals-200); --ba-text-tertiary: var(--Neutral-Colors-Main-Neutrals-400); --ba-text-disabled: var(--Neutral-Colors-Main-Neutrals-600); --ba-text-inverse: var(--Neutral-Colors-Main-Neutrals-900); /* Border colors */ --ba-border-primary: var(--Neutral-Colors-Alpha-Neutrals-600); --ba-border-secondary: var(--Neutral-Colors-Alpha-Neutrals-400); --ba-border-focus: var(--Brand-Colors-Primary-500); /* Interactive colors - slightly lighter for better visibility */ --ba-interactive-primary: var(--Brand-Colors-Primary-500); --ba-interactive-primary-hover: var(--Brand-Colors-Primary-400); --ba-interactive-secondary: var(--Brand-Colors-Secondary-500); --ba-interactive-secondary-hover: var(--Brand-Colors-Secondary-400); /* Shadow tokens - more prominent in dark mode */ --ba-shadow-sm: 0 0.089rem 0.179rem rgba(0, 0, 0, 0.2); --ba-shadow-md: 0 0.179rem 0.357rem rgba(0, 0, 0, 0.3); --ba-shadow-lg: 0 0.357rem 0.714rem rgba(0, 0, 0, 0.4); --ba-shadow-xl: 0 0.714rem 1.429rem rgba(0, 0, 0, 0.5); } /* ================================================================== LAYER 4: COMPONENTS Component-specific styles ================================================================== */ /* ============================================================ AVATAR COMPONENTS ============================================================ */ /** * Avatar base styles * Circular profile pictures with multiple size variants */ .ba-avatar { display: inline-grid; place-items: center; border-radius: var(--Radius-Null); object-fit: cover; background: var(--ba-surface-tertiary); color: var(--ba-text-secondary); font-weight: var(--Weight-Medium); flex-shrink: 0; position: relative; overflow: hidden; transition: transform 0.2s ease; } /* Avatar size variants */ .ba-avatar--xl { width: 6.4rem; height: 6.4rem; font-size: var(--Body-B2-Medium-Size); } .ba-avatar--lg { width: 4.8rem; height: 4.8rem; font-size: var(--Body-B3-Medium-Size); } .ba-avatar--md { width: 3.2rem; height: 3.2rem; font-size: var(--Body-B4-Medium-Size); } .ba-avatar--sm { width: 2.4rem; height: 2.4rem; font-size: var(--Body-B5-Medium-Size); } .ba-avatar--xs { width: 1.6rem; height: 1.6rem; font-size: var(--Body-B6-Medium-Size); } /** * Avatar group container * Stacks avatars with overlap effect */ .ba-avatar-group { display: inline-flex; align-items: center; padding-left: var(--Spacing-L); } .ba-avatar-group .ba-avatar { margin-left: calc(var(--Spacing-L) * -1); border: 0.179rem solid var(--ba-surface-primary); box-shadow: var(--ba-shadow-sm); transition: transform 0.2s ease, z-index 0.2s ease; position: relative; } .ba-avatar-group .ba-avatar:hover { transform: translateY(-0.357rem); z-index: 10; } .ba-avatar-group .ba-avatar:first-child { margin-left: 0; } /** * Avatar +N indicator * Shows additional count when there are more avatars */ .ba-avatar--more { background: var(--ba-surface-tertiary); color: var(--ba-text-primary); border: 0.179rem solid var(--ba-surface-primary); font-weight: var(--Weight-SemiBold); cursor: pointer; } .ba-avatar--more:hover { background: var(--ba-interactive-primary); color: var(--ba-text-inverse); } /** * Avatar status indicator * Shows online/offline/busy status */ .ba-avatar--status::after { content: ''; position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; border-radius: var(--Radius-Null); border: 0.134rem solid var(--ba-surface-primary); } .ba-avatar--status.ba-avatar--online::after { background: var(--Status-Colors-Success-700); } .ba-avatar--status.ba-avatar--offline::after { background: var(--Neutral-Colors-Main-Neutrals-400); } .ba-avatar--status.ba-avatar--busy::after { background: var(--Status-Colors-Error-700); } .ba-avatar--status.ba-avatar--away::after { background: var(--Status-Colors-Warning-700); } /* ============================================================ BADGE COMPONENTS ============================================================ */ /** * Badge base styles * Small status indicators and labels */ .ba-badge { display: inline-flex; align-items: center; justify-content: center; padding: var(--Spacing-XS) var(--Spacing-L); border-radius: var(--Radius-2XL); font-size: var(--Body-B3-Medium-Size); font-weight: var(--Weight-Medium); line-height: 140%; white-space: nowrap; transition: all 0.2s ease; } /* Badge color variants */ .ba-badge--neutral { color: var(--Text-Medium); background: var(--Surface-Surface); } .ba-badge--primary { background: var(--Primary-Primary); color: var(--Primary-Primary-Contrast); } .ba-badge--secondary { background: var(--Brand-Colors-Secondary-100); color: var(--Brand-Colors-Secondary-900); } .ba-badge--error, .ba-badge--danger { color: var(--Status-Colors-Error-700); background: var(--Surface-Error); } .ba-badge--accent { background: var(--Brand-Colors-Accent-100); color: var(--Brand-Colors-Accent-900); } .ba-badge--light { background: var(--Surface-Surface-background); color: var(--Text-Low); } .ba-badge--ghost { background: transparent; color: var(--Text-Low); } /* Badge size variants */ .ba-badge--lg { padding: var(--Spacing-M) var(--Spacing-XL); font-size: var(--Body-B4-Medium-Size); } .ba-badge--sm { padding: var(--Spacing-XS) var(--Spacing-M); font-size: var(--Body-B6-Medium-Size); } /* Badge with dot indicator */ .ba-badge--dot { padding-left: var(--Spacing-XL); position: relative; } .ba-badge--dot::before { content: ''; position: absolute; left: var(--Spacing-M); width: 0.536rem; height: 0.536rem; border-radius: var(--Radius-Null); background: currentColor; } /* Badge pill style */ .ba-badge--pill { border-radius: var(--Radius-Null); } /* Badge outlined style */ .ba-badge--outlined { background: transparent; border: var(--Stroke-M) solid currentColor; } /* ============================================================ BUTTON COMPONENTS ============================================================ */ /** * Button base styles * Primary interactive elements with multiple variants */ .ba-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--Spacing-L); padding: var(--Radius-M) var(--Radius-XL); border: var(--Stroke-M) solid transparent; border-radius: var(--Radius-S); font-family: var(--ap-font-roboto); font-size: var(--Body-B3-Medium-Size); font-weight: var(--Weight-Medium); line-height: 140%; text-decoration: none; white-space: nowrap; user-select: none; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .ba-btn:focus { outline: none; } .ba-btn .material-symbols-rounded { font-size: 2rem; transition: transform 0.2s ease; } /* Button size variants */ .ba-btn--xl { padding: var(--Spacing-L) var(--Spacing-XL); font-size: var(--Body-B2-Medium-Size); line-height: 140%; gap: var(--Spacing-XL); } .ba-btn--lg { padding: var(--Radius-L) var(--Radius-XL); font-size: var(--Body-B2-Medium-Size); line-height: 140%; gap: var(--Spacing-XL); } .ba-btn--lg .material-symbols-rounded { font-size: 2.4rem; } .ba-btn--sm { padding: var(--Radius-M) var(--Radius-L); font-size: var(--Body-B4-Medium-Size); line-height: 140%; gap: var(--Spacing-M); } .ba-btn--sm .material-symbols-rounded { font-size: 1.6rem; } .ba-btn--xs { padding: var(--Radius-M) var(--Radius-XL); font-size: var(--Body-B5-Medium-Size); line-height: var(--Body-B5-Medium-Line-Height); gap: var(--Spacing-S); } .ba-btn--xs .material-symbols-rounded { font-size: 1.4rem; } /* Icon-only button variants */ .ba-btn--icon { padding: var(--Spacing-L); aspect-ratio: 1; gap: 0; } .ba-btn--icon span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ba-btn--icon.ba-btn--xl { padding: var(--Spacing-XL); } .ba-btn--icon.ba-btn--lg { padding: var(--Spacing-L); } .ba-btn--icon.ba-btn--sm { padding: var(--Spacing-M); } .ba-btn--icon.ba-btn--xs { padding: var(--Spacing-S); } /* Primary buttons (Filled) */ .ba-btn--primary { background: var(--ba-interactive-primary); color: var(--ba-text-inverse); border-color: var(--ba-interactive-primary); } .ba-btn--primary:hover, .ba-btn--primary.ba-btn--hover { background: var(--ba-interactive-primary-hover); border-color: var(--ba-interactive-primary-hover); box-shadow: var(--ba-shadow-md); color: white; } .ba-btn--primary:focus, .ba-btn--primary.ba-btn--focus { background: var(--ba-interactive-primary); border-color: var(--ba-interactive-primary); box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-btn--primary:active { background: var(--Brand-Colors-Primary-800); border-color: var(--Brand-Colors-Primary-800); box-shadow: none; } .ba-btn--primary:disabled, .ba-btn--primary.disabled, .ba-btn--primary[disabled] { border-color: var(--Brand-Colors-Primary-200); cursor: not-allowed; box-shadow: none; background: var(--Brand-Colors-Primary-200); opacity: 1; } /* Secondary buttons (Outlined) */ .ba-btn--secondary { background: transparent; color: var(--ba-interactive-primary) !important; border-color: var(--ba-interactive-primary) !important; } .ba-btn--secondary:hover, .ba-btn--secondary.ba-btn--hover { background: var(--Surface-Primary); border-color: var(--ba-interactive-primary-hover); box-shadow: var(--ba-shadow-sm); } .ba-btn--secondary:focus, .ba-btn--secondary.ba-btn--focus { background: transparent; color: var(--ba-interactive-primary); border-color: var(--ba-interactive-primary); box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-btn--secondary:active { background: var(--Surface-Primary); color: var(--Brand-Colors-Primary-800); border-color: var(--Brand-Colors-Primary-800); box-shadow: none; } .ba-btn--secondary:disabled, .ba-btn--secondary[disabled] { background: transparent; color: var(--ba-interactive-primary); border-color: var(--ba-interactive-primary); opacity: 0.4; cursor: not-allowed; box-shadow: none; } /* Tertiary buttons (Ghost/Text) */ .ba-btn--tertiary { background: transparent; color: var(--ba-interactive-primary); border-color: transparent; } .ba-btn--tertiary:hover, .ba-btn--tertiary.ba-btn--hover { color: var(--ba-interactive-primary-hover); border-color: transparent; } .ba-btn--tertiary:focus, .ba-btn--tertiary.ba-btn--focus { background: transparent; color: var(--ba-interactive-primary); border-color: transparent; box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-btn--tertiary:active { background: var(--ba-surface-tertiary); color: var(--Brand-Colors-Primary-800); border-color: transparent; } .ba-btn--tertiary:disabled, .ba-btn--tertiary[disabled] { background: transparent; color: var(--ba-interactive-primary); border-color: transparent; opacity: 0.4; cursor: not-allowed; } /* Button loading state */ .ba-btn--loading { position: relative; color: transparent; pointer-events: none; } .ba-btn--loading::after { content: ''; position: absolute; width: 1.429rem; height: 1.429rem; border: 0.179rem solid currentColor; border-radius: var(--Radius-Null); border-top-color: transparent; animation: ba-spin 0.6s linear infinite; color: inherit; } .ba-btn--primary.ba-btn--loading::after { color: var(--ba-text-inverse); } .ba-btn--secondary.ba-btn--loading::after, .ba-btn--tertiary.ba-btn--loading::after { color: var(--ba-interactive-primary); } @keyframes ba-spin { to { transform: rotate(360deg); } } /* ============================================================ PROGRESS COMPONENTS ============================================================ */ /** * Linear progress bar * Shows task completion percentage */ .ba-progress { width: 100%; height: 0.714rem; background: var(--Brand-Colors-Primary-100); border-radius: var(--Radius-M); overflow: hidden; position: relative; } .ba-progress__bar { height: 100%; background: var(--ba-interactive-primary); border-radius: var(--Radius-M); transition: width 0.3s ease; position: relative; overflow: hidden; display: block; } /* Progress bar variants */ .ba-progress--success .ba-progress__bar { background: var(--Status-Colors-Success-700); } .ba-progress--warning .ba-progress__bar { background: var(--Status-Colors-Warning-700); } .ba-progress--error .ba-progress__bar { background: var(--Status-Colors-Error-700); } /* Progress bar sizes */ .ba-progress--sm { height: 0.357rem; } .ba-progress--lg { height: 1.071rem; } /* Indeterminate progress (loading) */ .ba-progress--indeterminate .ba-progress__bar { animation: ba-progress-indeterminate 1.5s ease-in-out infinite; } @keyframes ba-progress-indeterminate { 0% { transform: translateX(-100%); } 50% { transform: translateX(350%); } 100% { transform: translateX(-100%); } } /* Striped animated progress */ .ba-progress--striped .ba-progress__bar { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent ); background-size: 2.857rem 2.857rem; } .ba-progress--striped.ba-progress--animated .ba-progress__bar { animation: ba-progress-stripes 1s linear infinite; } @keyframes ba-progress-stripes { 0% { background-position: 2.857rem 0; } 100% { background-position: 0 0; } } /* Pulsing progress bar */ .ba-progress--pulse .ba-progress__bar { animation: ba-progress-pulse 1.5s ease-in-out infinite; } @keyframes ba-progress-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Gradient animated progress */ .ba-progress--gradient .ba-progress__bar { background: linear-gradient( 90deg, var(--ba-interactive-primary), var(--Primary-Hover-Contrast), var(--ba-interactive-primary) ); background-size: 200% 100%; animation: ba-progress-gradient 2s ease infinite; } @keyframes ba-progress-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Smooth animated progress (for JavaScript controlled animations) */ .ba-progress--smooth .ba-progress__bar { transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Color-changing progress based on percentage */ .ba-progress--dynamic .ba-progress__bar[data-progress] { transition: background-color 0.3s ease, width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Glow effect animation */ .ba-progress--glow .ba-progress__bar { box-shadow: 0 0 0.714rem rgba(99, 102, 241, 0.4); animation: ba-progress-glow 2s ease-in-out infinite; } @keyframes ba-progress-glow { 0%, 100% { box-shadow: 0 0 0.714rem rgba(99, 102, 241, 0.4); } 50% { box-shadow: 0 0 1.429rem rgba(99, 102, 241, 0.8); } } /** * Circular progress indicator * Shows completion in a circular format */ .ba-circular-progress { --progress: 0; --size: 8rem; --stroke-width: 0.714rem; width: var(--size); height: var(--size); border-radius: var(--Radius-Null); display: inline-grid; place-items: center; position: relative; font-size: var(--Body-B3-Medium-Size); font-weight: var(--Weight-SemiBold); color: var(--ba-text-primary); } /* Circular progress size variants */ .ba-circular--xl, .ba-circular-progress--xl { --size: 12rem; --stroke-width: 1.071rem; font-size: var(--Body-B2-Medium-Size); } .ba-circular--lg, .ba-circular-progress--lg { --size: 9.6rem; --stroke-width: 0.893rem; font-size: var(--Body-B2-Medium-Size); } .ba-circular--md { --size: 8rem; --stroke-width: 0.714rem; font-size: var(--Body-B3-Medium-Size); } .ba-circular--sm, .ba-circular-progress--sm { --size: 6.4rem; --stroke-width: 0.536rem; font-size: var(--Body-B4-Medium-Size); } .ba-circular--xs { --size: 4.8rem; --stroke-width: 0.357rem; font-size: var(--Body-B5-Medium-Size); } .ba-circular-progress::before { content: ''; position: absolute; inset: 0; border-radius: var(--Radius-Null); background: conic-gradient( var(--ba-interactive-primary) calc(var(--progress) * 1%), var(--ba-surface-tertiary) 0 ); mask: radial-gradient( circle, transparent calc(var(--size) / 2 - var(--stroke-width)), black calc(var(--size) / 2 - var(--stroke-width) + 0.089rem) ); -webkit-mask: radial-gradient( circle, transparent calc(var(--size) / 2 - var(--stroke-width)), black calc(var(--size) / 2 - var(--stroke-width) + 0.089rem) ); transition: all 0.3s ease; } /* Circular progress variants */ .ba-circular-progress--success::before { background: conic-gradient( var(--Status-Colors-Success-700) calc(var(--progress) * 1%), var(--ba-surface-tertiary) 0 ); } .ba-circular-progress--warning::before { background: conic-gradient( var(--Status-Colors-Warning-700) calc(var(--progress) * 1%), var(--ba-surface-tertiary) 0 ); } .ba-circular-progress--error::before { background: conic-gradient( var(--Status-Colors-Error-700) calc(var(--progress) * 1%), var(--ba-surface-tertiary) 0 ); } /** * SVG-based Circular Progress * Alternative implementation using SVG circles */ .ba-circular { --size: 8rem; --stroke-width: 0.714rem; width: var(--size); height: var(--size); display: inline-grid; place-items: center; position: relative; font-size: var(--Body-B3-Medium-Size); font-weight: var(--Weight-SemiBold); color: var(--ba-text-primary); } .ba-circular__svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ba-circular__track { fill: none; stroke: var(--ba-surface-tertiary); stroke-width: var(--stroke-width); } .ba-circular__bar { fill: none; stroke: var(--ba-interactive-primary); stroke-width: var(--stroke-width); stroke-linecap: round; transition: stroke-dashoffset 0.3s ease-in-out; } .ba-circular__label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: inherit; font-weight: inherit; color: inherit; line-height: 1; } /* Circular SVG variants */ .ba-circular--success .ba-circular__bar { stroke: var(--Status-Colors-Success-700); } .ba-circular--warning .ba-circular__bar { stroke: var(--Status-Colors-Warning-700); } .ba-circular--error .ba-circular__bar { stroke: var(--Status-Colors-Error-700); } /** * Spinner / Animated loader * Indeterminate loading indicator */ .ba-spinner { --size: 3.2rem; --stroke-width: 0.357rem; display: inline-block; width: var(--size); height: var(--size); border: var(--stroke-width) solid var(--ba-surface-tertiary); border-top-color: var(--ba-interactive-primary); border-radius: var(--Radius-Null); animation: ba-spin 0.8s linear infinite; } .ba-spinner--xl { --size: 6.4rem; --stroke-width: 0.536rem; } .ba-spinner--lg { --size: 4.8rem; --stroke-width: 0.357rem; } .ba-spinner--md { --size: 3.2rem; --stroke-width: 0.357rem; } .ba-spinner--sm { --size: 2.4rem; --stroke-width: 0.179rem; } .ba-spinner--success { border-top-color: var(--Status-Colors-Success-700); } .ba-spinner--warning { border-top-color: var(--Status-Colors-Warning-700); } .ba-spinner--error { border-top-color: var(--Status-Colors-Error-700); } /** * Bugasura Loader Wrapper * Container for MDL spinner with Bugasura styling * Usage:

*/ .ba-loader { display: inline-block; } .ba-loader .mdl-spinner { width: 3.2rem; height: 3.2rem; } /* Single color variant - uses Bugasura primary color */ .ba-loader--primary .mdl-spinner__layer-1, .ba-loader--primary .mdl-spinner__layer-2, .ba-loader--primary .mdl-spinner__layer-3, .ba-loader--primary .mdl-spinner__layer-4 { border-color: var(--ba-interactive-primary); } /* Loader sizes */ .ba-loader--xl .mdl-spinner { width: 6.4rem; height: 6.4rem; } .ba-loader--lg .mdl-spinner { width: 4.8rem; height: 4.8rem; } .ba-loader--md .mdl-spinner { width: 3.2rem; height: 3.2rem; } .ba-loader--sm .mdl-spinner { width: 2.4rem; height: 2.4rem; } .ba-loader--xs .mdl-spinner { width: 1.6rem; height: 1.6rem; } /* Loader color variants */ .ba-loader--success .mdl-spinner__layer-1, .ba-loader--success .mdl-spinner__layer-2, .ba-loader--success .mdl-spinner__layer-3, .ba-loader--success .mdl-spinner__layer-4 { border-color: var(--Status-Colors-Success-700); } .ba-loader--warning .mdl-spinner__layer-1, .ba-loader--warning .mdl-spinner__layer-2, .ba-loader--warning .mdl-spinner__layer-3, .ba-loader--warning .mdl-spinner__layer-4 { border-color: var(--Status-Colors-Warning-700); } .ba-loader--error .mdl-spinner__layer-1, .ba-loader--error .mdl-spinner__layer-2, .ba-loader--error .mdl-spinner__layer-3, .ba-loader--error .mdl-spinner__layer-4 { border-color: var(--Status-Colors-Error-700); } /** * Progress Label * Text label inside progress bar */ .ba-progress__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: var(--Body-B5-Medium-Size); font-weight: var(--Weight-Medium); color: var(--ba-text-primary); white-space: nowrap; z-index: 1; } /* ============================================================ TAG COMPONENTS ============================================================ */ /** * Tag component (Removable tags) * Used for categorization, metadata, and removable selections */ .ba-tag { display: inline-flex; align-items: center; gap: var(--Spacing-S); padding: var(--Spacing-XS) var(--Spacing-M); /* 4px 10px */ background: var(--Surface-Surface-background); color: var(--Text-Medium); border-radius: var(--Radius-S); font-size: var(--Font-Size-3); font-weight: var(--Weight-Medium); line-height: 1.5; transition: all 0.2s ease; white-space: nowrap; cursor: default; user-select: none; border: 1px solid var(--Surface-Surface-low); } /* Icon sizing within chips */ .ba-tag .icon { font-size: var(--Font-Size-4); line-height: 1; } /* Chip color variants */ .ba-tag--neutral { background: var(--Neutral-Colors-Main-Neutrals-100); color: var(--Neutral-Colors-Main-Neutrals-700); } .ba-tag--primary { background: var(--Primary-Primary-Contrast); color: var(--Text-Primary); border-color: var(--Primary-Hover-Contrast); } .ba-tag--success { border-color: var(--Success-Hover-Contrast); background: var(--Success-Success-Contrast); color: var(--Text-Success); } .ba-tag--warning { background: var(--Warning-Warning-Contrast); color: var(--Text-Warning); border-color: var(--Warning-Hover-Contrast); } .ba-tag--danger, .ba-tag--error { background: var(--Error-Error-Contrast); color: var(--Text-Error); border-color: var(--Error-Hover-Contrast); } .ba-tag--info { background: var(--Base-Colors-Base-White); border-color: #EAECF0; } .ba-tag--accent { background: var(--Accent-Accent-Contrast); color: var(--Text-Accent); border-color: var(--Accent-Hover-Contrast); } .ba-tag--secondary { background: var(--Secondary-Secondary-Contrast); color: var(--Text-Secondary); border-color: var(--Secondary-Hover-Contrast); } /* Chip sizes */ .ba-tag--sm { padding: 2px var(--Spacing-S); font-size: var(--Font-Size-3); gap: var(--Spacing-S); } .ba-tag--lg { padding: var(--Spacing-S) var(--Spacing-L); /* 6px 12px */ font-size: var(--Font-Size-3); gap: var(--Spacing-S); } /* Clickable chips */ .ba-tag--clickable { cursor: pointer; border: 1px solid transparent; } .ba-tag--clickable:hover { background: var(--Neutral-Colors-Main-Neutrals-200); border-color: var(--Neutral-Colors-Main-Neutrals-300); } .ba-tag--clickable:active { transform: scale(0.98); } .ba-tag--clickable:focus { outline: 2px solid var(--ba-interactive-primary); outline-offset: 2px; } /* Clickable chip variants hover states */ .ba-tag--clickable.ba-tag--primary:hover { background: var(--Brand-Colors-Primary-200); border-color: var(--Brand-Colors-Primary-300); } .ba-tag--clickable.ba-tag--secondary:hover { background: var(--Brand-Colors-Secondary-200); border-color: var(--Brand-Colors-Secondary-300); } .ba-tag--clickable.ba-tag--success:hover { background: var(--Status-Colors-Success-200); border-color: var(--Status-Colors-Success-300); } .ba-tag--clickable.ba-tag--warning:hover { background: var(--Status-Colors-Warning-200); border-color: var(--Status-Colors-Warning-300); } .ba-tag--clickable.ba-tag--danger:hover, .ba-tag--clickable.ba-tag--error:hover { background: var(--Status-Colors-Error-200); border-color: var(--Status-Colors-Error-300); } .ba-tag--clickable.ba-tag--accent:hover { background: var(--Brand-Colors-Accent-200); border-color: var(--Brand-Colors-Accent-300); } /* Selected state */ .ba-tag--clickable.active { background: var(--Primary-Colors-Primary-700); color: var(--Neutral-Colors-Main-Neutrals-0); border-color: var(--Primary-Colors-Primary-700); } .ba-tag--clickable.active:hover { background: var(--Primary-Colors-Primary-800); border-color: var(--Primary-Colors-Primary-800); } /* Dismissible chips */ .ba-tag--dismissible { padding-right: var(--Spacing-S); } .ba-tag__close { display: inline-flex; align-items: center; justify-content: center; width: var(--Spacing-2XL); height: var(--Spacing-2XL); padding: 0; margin: 0; border: none; background: transparent; color: currentColor; border-radius: var(--Radius-S); cursor: pointer; transition: all 0.2s ease; opacity: 0.6; flex-shrink: 0; } .ba-tag__close:hover { opacity: 1; background: var(--Neutral-Colors-Main-Neutrals-200); } .ba-tag--primary .ba-tag__close:hover { background: var(--Brand-Colors-Primary-200); } .ba-tag--secondary .ba-tag__close:hover { background: var(--Brand-Colors-Secondary-200); } .ba-tag--success .ba-tag__close:hover { background: var(--Status-Colors-Success-200); } .ba-tag--warning .ba-tag__close:hover { background: var(--Status-Colors-Warning-200); } .ba-tag--danger .ba-tag__close:hover, .ba-tag--error .ba-tag__close:hover { background: var(--Status-Colors-Error-200); } .ba-tag--accent .ba-tag__close:hover { background: var(--Brand-Colors-Accent-200); } .ba-tag__close:active { transform: scale(0.9); } .ba-tag__close .material-symbols-rounded { font-size: 1rem; /* 14px */ } /* Outlined variant */ .ba-tag--outlined { background: transparent; border: 1px solid currentColor; } .ba-tag--outlined.ba-tag--neutral { border-color: var(--Surface-Surface-low); color: var(--Text-Medium); } .ba-tag--outlined.ba-tag--primary { border-color: var(--Primary-Hover-Contrast); color: var(--Text-Primary); } .ba-tag--outlined.ba-tag--secondary { border-color: var(--Secondary-Hover-Contrast); color: var(--Text-Secondary); } .ba-tag--outlined.ba-tag--success { border-color: var(--Success-Hover-Contrast); color: var(--Text-Success); } .ba-tag--outlined.ba-tag--warning { border-color: var(--Warning-Hover-Contrast); color: var(--Text-Warning); } .ba-tag--outlined.ba-tag--danger { border-color: var(--Error-Hover-Contrast); color: var(--Text-Error); } .ba-tag--outlined.ba-tag--accent { border-color: var(--Accent-Hover-Contrast); color: var(--Text-Accent); } /* Plain variant */ .ba-tag--plain { background: transparent; border: none; padding: 0 var(--Spacing-S); text-transform: uppercase; } /* Disabled state */ .ba-tag--disabled, .ba-tag:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Tag group container */ .ba-tag-group { display: flex; flex-wrap: wrap; gap: var(--Spacing-L); align-items: center; } .ba-tag-group--tight { gap: var(--Spacing-M); } .ba-tag-group--spacious { gap: var(--Spacing-XL); } .ba-tag-group--vertical { flex-direction: column; align-items: flex-start; } /* ============================================================ TOOLTIP COMPONENTS ============================================================ */ /** * Tooltip component * Contextual information on hover * Compatible with Bootstrap 3.4 tooltip structure */ .tooltip.in { opacity: 1; } .tooltip-inner { padding: var(--Spacing-M) var(--Spacing-L); color: var(--Text-White); font-size: var(--Font-Size-3); background-color: var(--Neutral-Colors-Main-Neutrals-900); border-radius: var(--Radius-M); } .tooltip-inner strong { font-weight: var(--Weight-SemiBold); } .tooltip.top .tooltip-arrow { border-top-color: var(--Neutral-Colors-Main-Neutrals-900); } .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--Neutral-Colors-Main-Neutrals-900); } .tooltip.left .tooltip-arrow { border-left-color: var(--Neutral-Colors-Main-Neutrals-900); } .tooltip.right .tooltip-arrow { border-right-color: var(--Neutral-Colors-Main-Neutrals-900); } .ba-tooltip--white .tooltip-inner { background: var(--Text-White) ; color: var(--Text-Medium); border: 1px solid var(--Text-White); box-shadow: 2px 3px 16px 0px #1018281f, 0px 3px 20px 2px #10182814; } .ba-tooltip--white.top .tooltip-arrow { border-top-color: var(--Text-White); } .ba-tooltip--white.right .tooltip-arrow { border-right-color: var(--Text-White); } .ba-tooltip--white.bottom .tooltip-arrow { border-bottom-color: var(--Text-White); } .ba-tooltip--white.left .tooltip-arrow { border-left-color: var(--Text-White); } .ba-tooltip--richtext .tooltip-inner { text-align: left; } .ba-tooltip--richtext .tooltip-inner strong { display: inline-block; font-size: var(--Font-Size-4); margin-bottom: var(--Spacing-M); } /* ============================================================ DROPDOWN COMPONENTS ============================================================ */ /** * Dropdown component * Contextual menus and selectable lists */ .ba-dropdown { position: relative; display: inline-block; } .dropdown-menu.ba-dropdown__menu { position: absolute; z-index: 1000; width: clamp( 16rem ,var(--dropdown-width, 20rem) , var(--dropdown-max-width, 30rem)); margin-top: var(--Spacing-S); padding: var(--Spacing-S) 0; background: var(--ba-surface-elevated); border: var(--Stroke-M) solid var(--ba-border-secondary); border-radius: var(--Radius-M); box-shadow: var(--ba-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-0.714rem); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; box-shadow: 0px 4px 20px 0px #0000001A; } .ba-dropdown__body-items { display: flex; flex-direction: column; gap: var(--Spacing-M); padding: var(--Spacing-2XL); } .ba-dropdown__body-items.scroll-thin { padding: var(--Spacing-2XL); overflow-y: auto; max-height: var(--dropdown-max-height, 28.571rem); } .ba-dropdown__body-items+.ba-dropdown__body-items { padding-top: 0; } .ba-dropdown__body-items:has(+.ba-dropdown__body-items) { padding-bottom: 0; } .ba-dropdown__body-wrapper { display: flex; flex-direction: column; gap: var(--Spacing-XL); } .ba-dropdown.open .ba-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); } li>a.ba-dropdown__item, .ba-dropdown__item, li>a.ba-dropdown__footer-item, .ba-dropdown__footer-item { display: flex; align-items: center; gap: var(--Spacing-L); padding: var(--Spacing-L) var(--Spacing-XL); color: var(--ba-text-primary); text-decoration: none; font-size: var(--Font-Size-4); line-height: 1.4; cursor: pointer; transition: background 0.15s ease; border: none; background: transparent; width: 100%; text-align: left; font-weight: var(--Weight-Regular); border-radius: var(--Radius-M); } .ba-dropdown__item>.ba-badge { margin-left: auto; } .ba-dropdown__item>.ba-badge+.icon-arrow { margin-left: 0; } .no-results>.ba-dropdown__item { color: var(--Neutral-Colors-Tonal-Neutrals-400); } li>a.ba-dropdown__item:hover, .ba-dropdown__item:hover { background-color: var(--Surface-Surface-background); } .ba-dropdown__item:active { background: var(--ba-surface-secondary); } .ba-dropdown__item>.icon { font-size: var(--Font-Size-3); opacity: 1; margin-right: 0; font-size: var(--Font-Size-4); opacity: 0; } li>a.ba-dropdown__item.dropdown-select, .ba-dropdown__item.dropdown-select, li.active>a.ba-dropdown__item, .active>a.ba-dropdown__item { color: var(--Text-Primary); background-color: var(--Surface-Primary); >.icon { opacity: 1; } } li.active>a.ba-dropdown__item .ba-badge, li>a.ba-dropdown__item.dropdown-select .ba-badge, .ba-dropdown__item.dropdown-select .ba-badge, .active>a.ba-dropdown__item .ba-badge { background: var(--Primary-Hover-Contrast); color: var(--Icons-Primary); } .ba-dropdown__item>.icon-arrow { margin-right: 0; font-size: var(--Icons-Medium); } .ba-dropdown__item--active { background: var(--Surface-Primary); color: var(--Text-Primary); font-weight: var(--Weight-Medium); } .ba-dropdown__item--disabled { color: var(--ba-text-disabled); cursor: not-allowed; pointer-events: none; } .ba-dropdown__divider { height: var(--Stroke-M); margin: var(--Spacing-S) 0; background: var(--ba-border-secondary); } .ba-dropdown__header { padding: var(--Spacing-2XL); font-size: var(--Font-Size-5); font-weight: var(--Weight-SemiBold); color: var(--Text-High); border-bottom: 1px solid var(--Outline-Low); display: flex; align-items: center; gap: var(--Spacing-L); padding: var(--Spacing-2XL) var(--Spacing-XL); line-height: 1.5; } .ba-dropdown__footer-items { display: flex; border-top: 1px solid var(--Outline-Low); padding: var(--Spacing-L); } .ba-dropdown__footer-items .ba-btn { padding: var(--Spacing-M) var(--Spacing-5XL); } .ba-dropdown__footer-items:has(>.ba-btn ) { justify-content: end; } li>a.ba-dropdown__footer-item, .ba-dropdown__footer-item { justify-content: center; font-size: var(--Font-Size-4); color: var(--Primary-Primary); padding: var(--Spacing-L); } li>a.ba-dropdown__footer-item:hover, .ba-dropdown__footer-item:hover { background-color: var(--Surface-Surface-background); } .ba-dropdown--multi-dropdown .ba-dropdown__menu { /* width: auto; */ /* max-width: max-content; */ } .ba-dropdown--multi-dropdown .ba-dropdown__body-items+.ba-dropdown__body-items { padding-top: var(--Spacing-2XL); } .ba-dropdown--multi-dropdown .ba-dropdown__body-wrapper { flex-direction: row; gap: 0; } .ba-dropdown__sidebar { border-right: 1px solid #e9ecef; overflow-y: auto; flex: 50%; } .ba-dropdown__content { flex: 50%; display: none; flex-direction: column; } .ba-dropdown-input:checked+.ba-dropdown__content { display: flex; } /* ============================================================ INPUT COMPONENTS ============================================================ */ /** * Input field base styles * Text inputs, textareas, and related form controls */ .ba-input { width: 100%; padding: var(--Spacing-L) var(--Spacing-XL); background: var(--Base-Colors-Base-White); border: var(--Stroke-M) solid var(--Outline-Low); border-radius: var(--Radius-S); color: var(--Text-High); font-family: var(--ap-font-roboto); font-size: var(--Body-B3-Medium-Size); line-height: 1.5; transition: all 0.2s ease; } .ba-input-bg--gray { background: var(--Surface-Surface-background); } .ba-input::placeholder { color: var(--Text-Disabled); opacity: 1; } .ba-input:hover { border-color: var(--Primary-Primary); } .ba-input:focus { outline: none; border-color: var(--Primary-Primary); box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-input:disabled { background: var(--Surface-Surface-disabled); color: var(--Text-Disabled); cursor: not-allowed; border-color: var(--Outline-Disabled); opacity: 0.6; } .ba-input--error { border-color: var(--Status-Colors-Error-700); } .ba-input--error:focus { box-shadow: 0 0 0 0.3rem var(--Outline-Error); border-color: var(--Status-Colors-Error-700); } .ba-input--success { border-color: var(--Status-Colors-Success-700); } .ba-input--success:focus { box-shadow: 0 0 0 0.3rem var(--Outline-Success); border-color: var(--Status-Colors-Success-700); } /* Input sizes */ .ba-input--lg { padding: var(--Spacing-XL) var(--Spacing-2XL); font-size: var(--Body-B2-Medium-Size); line-height: 1.2; } .ba-input--sm { padding: var(--Spacing-M) var(--Spacing-L); font-size: var(--Body-B4-Medium-Size); } /* Input with icon */ .ba-input-group { position: relative; width: 100%; } .ba-input-group__icon { position: absolute; left: var(--Spacing-L); top: 50%; transform: translateY(-45%); color: var(--Text-High); pointer-events: none; display: flex; align-items: center; font-size: var(--Body-B1-Regular-Size); } .ba-input--close { position: absolute; left: var(--Spacing-L); top: 50%; transform: translateY(-45%); color: var(--Text-Low); display: flex; align-items: center; font-size: var(--Body-B1-Regular-Size); cursor: pointer; } .ba-input.ba-input--rounded { border-radius: var(--Radius-3XL); } .ba-input-group__icon--right { left: auto; right: var(--Spacing-XL); } .ba-input-group-icon--left .ba-input { padding-left: var(--Spacing-5XL); } .ba-input-group-icon--right .ba-input { padding-right: var(--Spacing-5XL); } /* Textarea */ .ba-textarea { min-height: 8.571rem; resize: vertical; } .ba-input-group__label { font-size: var(--Body-B3-Regular-Size); color: var(--Text-Medium); margin-bottom: var(--Spacing-M); } .ba-input-group__message { color: var(--Text-Low); font-size: var(--Body-B3-Regular-Size); display: inline-block; margin-top: var(--Spacing-M); } .ba-input-btn-icon { background-color: transparent; border: none; } .ba-input-btn-icon--right { position: absolute; right: var(--Spacing-L); top: 50%; transform: translateY(-45%); color: var(--Icons-High); display: flex; align-items: center; i { font-size: var(--Body-B1-Regular-Size); } } .ba-input-group__message--error { color: var(--Text-Error); } /* ============================================================ SELECTION COMPONENTS (Checkbox, Radio, Switch) ============================================================ */ /** * Checkbox component * Custom styled checkbox with animations */ .ba-checkbox { display: inline-flex; align-items: center; gap: var(--Spacing-L); cursor: pointer; user-select: none; position: relative; } .ba-checkbox__input { position: absolute; opacity: 0; width: 0; height: 0; } .ba-checkbox__box { display: inline-flex; align-items: center; justify-content: center; width: 1.786rem; height: 1.786rem; border: var(--Stroke-M) solid var(--Outline-Medium); border-radius: var(--Radius-S); background: var(--Base-Colors-Base-White); transition: all 0.2s ease; flex-shrink: 0; position: relative; } .ba-checkbox__box::after { content: 'check'; font-family: 'Material Symbols Rounded'; font-size: 1.429rem; color: var(--ba-text-inverse); opacity: 0; transform: scale(0.5); transition: all 0.2s ease; font-weight: 400; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } .ba-checkbox__box .material-symbols-rounded { font-size: 1.429rem; color: var(--ba-text-inverse); opacity: 0; transform: scale(0.5); transition: all 0.2s ease; } .ba-checkbox:hover .ba-checkbox__box { border-color: var(--Primary-Primary); } .ba-checkbox__input:checked + .ba-checkbox__box { background: var(--Primary-Primary); border-color: var(--Primary-Primary); } .ba-checkbox__input:checked + .ba-checkbox__box::after { opacity: 1; transform: scale(1); } .ba-checkbox__input:checked + .ba-checkbox__box .material-symbols-rounded { opacity: 1; transform: scale(1); } .ba-checkbox__input:focus + .ba-checkbox__box { box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-checkbox__input:disabled + .ba-checkbox__box { background: var(--Icons-Disabled); border-color: var(--ba-border-secondary); cursor: not-allowed; opacity: 0.6; } .ba-checkbox__label { font-size: var(--Body-B3-Medium-Size); color: var(--Text-High); line-height: 1.5; } /* Checkbox indeterminate state */ /* .ba-checkbox__input:indeterminate + .ba-checkbox__box { background: var(--Primary-Primary); border-color: var(--Primary-Primary); } */ .ba-checkbox__input:indeterminate + .ba-checkbox__box .material-symbols-rounded { opacity: 1; transform: scale(1); } /** * Radio button component * Custom styled radio with animations */ .ba-radio { display: inline-flex; align-items: center; gap: var(--Spacing-M); cursor: pointer; user-select: none; position: relative; } .ba-radio__input { position: absolute; opacity: 0; width: 0; height: 0; } .ba-radio__circle { display: inline-flex; align-items: center; justify-content: center; width: 2.14rem; height: 2.14rem; border: var(--Stroke-M) solid var(--Outline-Medium); border-radius: var(--Radius-Null); background: var(--Base-Colors-Base-White); transition: all 0.2s ease; flex-shrink: 0; position: relative; } .ba-radio__circle::after { content: ''; width: 50%; aspect-ratio: 1; border-radius: var(--Radius-Null); background: var(--ba-text-inverse); opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: all 0.2s ease; } .ba-radio:hover .ba-radio__circle { border-color: var(--Primary-Primary); } .ba-radio__input:checked + .ba-radio__circle { background: var(--Primary-Primary); border-color: var(--Outline-Low); } .ba-radio__input:checked + .ba-radio__circle::after { opacity: 1; transform: translate(-50%, -50%) scale(1); } .ba-radio__input:focus + .ba-radio__circle { box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-radio__input:disabled + .ba-radio__circle { background: var(--Icons-Disabled); border-color: var(--ba-border-secondary); cursor: not-allowed; opacity: 0.6; } .ba-radio__label { font-size: var(--Body-B3-Medium-Size); color: var(--Text-High); line-height: 1.5; } /** * Switch/Toggle component * On/off toggle switch */ .ba-switch, .ba-toggle { display: inline-flex; align-items: center; gap: var(--Spacing-M); cursor: pointer; user-select: none; position: relative; } .ba-switch__input, .ba-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; } .ba-switch__track, .ba-toggle__track { display: inline-block; width: 3.571rem; height: 2rem; background: var(--Neutral-Colors-Main-Neutrals-100); border: var(--Stroke-M) solid var(--Outline-Medium); border-radius: var(--Radius-Null); position: relative; transition: all 0.2s ease; flex-shrink: 0; } .ba-switch__thumb, .ba-toggle__thumb { position: absolute; top: 0.179rem; left: 0.179rem; width: 1.429rem; height: 1.429rem; background: var(--ba-text-inverse); border-radius: var(--Radius-Null); transition: all 0.2s ease; box-shadow: var(--ba-shadow-sm); } .ba-switch:hover .ba-switch__track, .ba-toggle:hover .ba-toggle__track { border-color: var(--Primary-Primary); } .ba-switch__input:checked + .ba-switch__track, .ba-toggle__input:checked + .ba-toggle__track { background: var(--Primary-Primary); border-color: var(--Primary-Primary); } .ba-switch__input:checked + .ba-switch__track .ba-switch__thumb, .ba-toggle__input:checked + .ba-toggle__track .ba-toggle__thumb { left: calc(100% - 1.607rem); } .ba-switch__input:focus + .ba-switch__track, .ba-toggle__input:focus + .ba-toggle__track { box-shadow: 0 0 0 0.3rem var(--Outline-Primary); } .ba-switch__input:disabled + .ba-switch__track, .ba-toggle__input:disabled + .ba-toggle__track { background: var(--Icons-Disabled); border-color: var(--ba-border-secondary); cursor: not-allowed; opacity: 0.6; } .ba-switch__label, .ba-toggle__label { font-size: var(--Body-B3-Medium-Size); color: var(--Text-High); line-height: 1.5; } .ba-checkbox-group__label { font-size: var(--Body-B3-Regular-Size); color: var(--Text-Medium); margin-bottom: var(--Spacing-2XL); } /* ============================================================ NAVIGATION COMPONENTS ============================================================ */ /** * Tab navigation * Horizontal tab navigation for content sections */ .ba-tabs { display: flex; gap: var(--Spacing-3XL); border-bottom: 1px solid var(--Outline-Low); } .ba-tabs::-webkit-scrollbar { display: none; } .ba-tabs__tab { display: inline-flex; align-items: center; gap: var(--Spacing-L); padding: var(--Spacing-L) var(--Spacing-M); background: transparent; border: none; border-bottom: 0.179rem solid transparent; color: var(--Text-Disabled); font-size: var(--Font-Size-5); font-weight: var(--Weight-Medium); line-height: 1.5; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; position: relative; margin-bottom: calc(var(--Stroke-M) * -1); } .ba-tabs__tab:hover { color: var(--Text-Medium); } .ba-tabs .ba-tabs__tab { transition: border-bottom 0.2s ease; border-bottom: 2px solid transparent; display: flex; } .ba-tabs .active .ba-tabs__tab { color: var(--ba-interactive-primary); border-color: transparent; border-bottom: 2px solid var(--Primary-Primary); transition: border-bottom 0.2s ease; } .ba-tabs .active .ba-tabs__tab:hover, .ba-tabs .active .ba-tabs__tab:focus { color: var(--ba-interactive-primary); border-color: transparent; border-bottom: 2px solid var(--Primary-Primary); } .ba-tabs__tab--disabled { color: var(--ba-text-disabled); cursor: not-allowed; pointer-events: none; } .ba-tabs__tab .material-symbols-rounded { font-size: 1.786rem; } /* Legacy support for .ba-tab class */ .ba-tab { display: inline-flex; align-items: center; gap: var(--Spacing-M); padding: var(--Spacing-L) var(--Spacing-XL); background: transparent; border: none; border-bottom: 0.179rem solid transparent; color: var(--ba-text-secondary); font-size: var(--Body-B3-Medium-Size); font-weight: var(--Weight-Medium); line-height: 1.5; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; position: relative; margin-bottom: calc(var(--Stroke-M) * -1); } .ba-tab:hover { color: var(--ba-text-primary); background: var(--ba-surface-tertiary); } .ba-tab--active, .ba-tab.is-active { color: var(--ba-interactive-primary); border-bottom-color: var(--ba-interactive-primary); } .ba-tab--disabled { color: var(--ba-text-disabled); cursor: not-allowed; pointer-events: none; } .ba-tab .material-symbols-rounded { font-size: 1.786rem; } /* Tab badge */ .ba-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.786rem; height: 1.786rem; padding: 0 var(--Spacing-S); background: var(--ba-surface-tertiary); color: var(--ba-text-secondary); border-radius: var(--Radius-Null); font-size: var(--Body-B6-Medium-Size); font-weight: var(--Weight-SemiBold); line-height: 1; } .ba-tab--active .ba-tab__badge { background: var(--Surface-Primary); color: var(--Text-Primary); } /** * Breadcrumb navigation * Hierarchical navigation trail */ .ba-breadcrumb { display: flex; align-items: center; gap: var(--Spacing-M); flex-wrap: wrap; } .ba-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--Spacing-M); color: var(--ba-text-secondary); font-size: var(--Body-B3-Medium-Size); text-decoration: none; transition: color 0.2s ease; } .ba-breadcrumb__item:hover { color: var(--ba-interactive-primary); } .ba-breadcrumb__item--active { color: var(--ba-text-primary); font-weight: var(--Weight-Medium); pointer-events: none; } .ba-breadcrumb__separator { color: var(--ba-text-tertiary); font-size: var(--Body-B4-Medium-Size); user-select: none; } .ba-breadcrumb__separator .material-symbols-rounded { font-size: 1.429rem; } /** * Toolbar component * Action bar with multiple buttons */ .ba-toolbar { display: flex; align-items: center; gap: var(--Spacing-L); padding: var(--Spacing-L); background: var(--ba-surface-secondary); border-radius: var(--Radius-M); } /* ================================================================== LAYER 5: UTILITIES Helper classes - Highest priority (no !important needed!) ================================================================== */ /** * Layout utilities */ .ba-flex { display: flex; } .ba-flex--center { align-items: center; justify-content: center; } .ba-flex--between { align-items: center; justify-content: space-between; } .ba-flex--column { flex-direction: column; } .ba-grid { display: grid; } /** * Spacing utilities */ .ba-gap-xs { gap: var(--Spacing-XS); } .ba-gap-s { gap: var(--Spacing-S); } .ba-gap-m { gap: var(--Spacing-M); } .ba-gap-l { gap: var(--Spacing-L); } .ba-gap-xl { gap: var(--Spacing-XL); } .ba-gap-2xl { gap: var(--Spacing-2XL); } .ba-gap-3xl { gap: var(--Spacing-3XL); } .ba-p-xs { padding: var(--Spacing-XS); } .ba-p-s { padding: var(--Spacing-S); } .ba-p-m { padding: var(--Spacing-M); } .ba-p-l { padding: var(--Spacing-L); } .ba-p-xl { padding: var(--Spacing-XL); } .ba-p-2xl { padding: var(--Spacing-2XL); } .ba-p-3xl { padding: var(--Spacing-3XL); } .ba-m-xs { margin: var(--Spacing-XS); } .ba-m-s { margin: var(--Spacing-S); } .ba-m-m { margin: var(--Spacing-M); } .ba-m-l { margin: var(--Spacing-L); } .ba-m-xl { margin: var(--Spacing-XL); } .ba-m-2xl { margin: var(--Spacing-2XL); } .ba-m-3xl { margin: var(--Spacing-3XL); } /** * Typography utilities */ .ba-text-xs { font-size: var(--Body-B6-Medium-Size); } .ba-text-sm { font-size: var(--Body-B5-Medium-Size); } .ba-text-base { font-size: var(--Body-B3-Medium-Size); } .ba-text-lg { font-size: var(--Body-B2-Medium-Size); } .ba-text-xl { font-size: var(--Body-B1-Medium-Size); } .ba-font-regular { font-weight: var(--Weight-Regular); } .ba-font-medium { font-weight: var(--Weight-Medium); } .ba-font-semibold { font-weight: var(--Weight-SemiBold); } .ba-text-primary { color: var(--ba-text-primary); } .ba-text-secondary { color: var(--ba-text-secondary); } .ba-text-tertiary { color: var(--ba-text-tertiary); } .ba-text-disabled { color: var(--ba-text-disabled); } /** * Border utilities */ .ba-rounded-s { border-radius: var(--Radius-S); } .ba-rounded-m { border-radius: var(--Radius-M); } .ba-rounded-l { border-radius: var(--Radius-L); } .ba-rounded-xl { border-radius: var(--Radius-XL); } .ba-rounded-full { border-radius: var(--Radius-Null); } /** * Shadow utilities */ .ba-shadow-sm { box-shadow: var(--ba-shadow-sm); } .ba-shadow-md { box-shadow: var(--ba-shadow-md); } .ba-shadow-lg { box-shadow: var(--ba-shadow-lg); } .ba-shadow-xl { box-shadow: var(--ba-shadow-xl); } .ba-shadow-none { box-shadow: none; } /** * Display utilities */ .ba-hidden { display: none; } .ba-visible { display: block; } .ba-invisible { visibility: hidden; } /** * Accessibility utilities */ .ba-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /** * Animation utilities */ .ba-transition { transition: all 0.2s ease; } .ba-transition-fast { transition: all 0.15s ease; } .ba-transition-slow { transition: all 0.3s ease; } /** * Overflow utilities */ .ba-overflow-auto { overflow: auto; } .ba-overflow-hidden { overflow: hidden; } .ba-overflow-scroll { overflow: scroll; } .ba__text { font: inherit; color: inherit; line-height: inherit; } /* ================================================================== END OF BUGASURA COMPONENT LIBRARY v2.0.0 Now with @layers cascade architecture! Benefits: - No more !important needed - Clear style hierarchy - Easy to override in correct order - Better maintainability - Utilities always win (highest priority) ================================================================== */