* ===================================================================*/
.av-toggle {
position: relative;
width: 52px;
height: 32px;
border-radius: 100px;
border: 2px solid #606f7f;
background: rgba(246, 246, 246, 0.38);
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
}
.av-toggle__handle {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: #606f7f;
transition: all 0.2s ease;
left: 2px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.av-toggle__icon {
width: 16px;
height: 16px;
fill: white;
}
.av-toggle__text {
position: absolute;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.1px;
color: #606f7f;
}
/* Toggle States */
.av-toggle--enabled.av-toggle--primary {
background: #1f60e0;
border-color: #1f60e0;
}
.av-toggle--enabled.av-toggle--primary .av-toggle__handle {
background: #ffffff;
left: calc(100% - 22px);
}
.av-toggle--enabled.av-toggle--success {
background: #208000;
border-color: #208000;
}
.av-toggle--enabled.av-toggle--success .av-toggle__handle {
background: #ffffff;
left: calc(100% - 22px);
}
.av-toggle--hovered {
background: rgba(12, 12, 12, 0.04);
border-color: #606f7f;
}
.av-toggle--hovered .av-toggle__handle {
background: #4a4a4a;
}
.av-toggle--hovered.av-toggle--enabled.av-toggle--primary {
background: #184cb4;
}
.av-toggle--hovered.av-toggle--enabled.av-toggle--success {
background: #1c7000;
}
.av-toggle--disabled {
background: rgba(246, 246, 246, 0.38);
border-color: rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-toggle--disabled .av-toggle__handle {
background: rgba(12, 12, 12, 0.12);
}
.av-toggle--text .av-toggle__text--yes {
left: 6px;
color: #ffffff;
}
.av-toggle--text .av-toggle__text--no {
right: 6px;
}
/* ===================================================================
* TABS COMPONENT
* ===================================================================
*
* A responsive tab system with multiple states. Tabs are used to
* organize content by grouping similar information into sections.
*
* States: Default, Selected, Hover, Pressed, Disabled
* Sizes: Large (>=768px), Small (<768px)
*
* ===================================================================*/
.av-tabs {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.av-tab {
padding: 8px 16px 16px;
cursor: pointer;
position: relative;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #606f7f;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1px;
border-radius: 5px 5px 0 0;
transition: background-color 0.2s ease;
}
.av-tab--small {
font-size: 12px;
line-height: 16px;
}
.av-tab--selected {
color: #0c0c0c;
}
.av-tab--selected::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 8px;
background-color: #1f60e0;
}
.av-tab--small.av-tab--selected::after {
height: 6px;
}
.av-tab--hover {
background-color: #f1f7ff;
}
.av-tab--pressed {
background-color: #e4ecfb;
}
.av-tab--disabled {
color: rgba(12, 12, 12, 0.38);
cursor: not-allowed;
}
/* Tab States Display */
.av-tabs-states {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 16px 0;
}
.av-tab-state {
display: flex;
align-items: center;
gap: 8px;
}
.state-label {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 12px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1px;
min-width: 70px;
}
/* Interactive behavior */
.av-tab:hover:not(.av-tab--disabled):not(.av-tab--selected) {
background-color: #f1f7ff;
}
.av-tab:active:not(.av-tab--disabled) {
background-color: #e4ecfb;
}
/* ===================================================================
* CARD COMPONENTS
* ===================================================================
*
* A versatile card system with multiple variations for different
* content types and layouts. Cards provide structured content
* presentation with consistent spacing and visual hierarchy.
*
* Variants: Basic, With buttons, With lists, With icons
*
* ===================================================================*/
.av-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 24px;
margin-bottom: 24px;
font-family: 'Open Sans', sans-serif;
}
.av-card__title {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 28px;
color: #0c0c0c;
margin: 0 0 12px 0;
}
.av-card__description {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #606f7f;
margin: 0 0 16px 0;
}
.av-card__list {
list-style: none;
padding: 0;
margin: 0 0 16px 0;
}
.av-card__list-item {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
margin-bottom: 8px;
position: relative;
padding-left: 20px;
}
.av-card__list-item:before {
content: '•';
color: #606f7f;
position: absolute;
left: 0;
top: 0;
}
.av-card__list-item--checkmark {
padding-left: 24px;
}
.av-card__list-item--checkmark:before {
content: '✓';
color: #1f60e0;
font-weight: 700;
left: 0;
}
.av-card__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0.1px;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
margin-right: 12px;
margin-bottom: 8px;
}
.av-card__button--primary {
background-color: #1f60e0;
color: #ffffff;
}
.av-card__button--primary:hover {
background-color: #1850c7;
}
.av-card__button--secondary {
background-color: transparent;
color: #1f60e0;
border: 1px solid #1f60e0;
}
.av-card__button--secondary:hover {
background-color: #1f60e0;
color: #ffffff;
}
.av-card__link {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #1f60e0;
text-decoration: none;
margin-top: 8px;
display: inline-block;
}
.av-card__link:hover {
text-decoration: underline;
}
.av-card__buttons {
margin-top: 16px;
}
.av-card__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #606f7f;
margin-top: 16px;
}
/* Card Grid Layout */
.av-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin: 24px 0;
}
/* Card Variations */
.av-card--compact {
padding: 16px;
}
.av-card--large {
padding: 32px;
}
/* ===================================================================
* ACCORDION COMPONENTS
* ===================================================================
*
* Collapsible content panels with smooth animations and consistent
* styling. Accordions organize related information into expandable
* sections for better content organization and user experience.
*
* States: Collapsed, Expanded, Hover, Focus, Disabled
* Features: Smooth transitions, keyboard accessibility, ARIA support
*
* ===================================================================*/
.av-accordion {
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
font-family: 'Open Sans', sans-serif;
}
.av-accordion__item {
border-bottom: 1px solid #e0e0e0;
}
.av-accordion__item:last-child {
border-bottom: none;
}
.av-accordion__header {
width: 100%;
background: #ffffff;
border: none;
padding: 16px 20px;
text-align: left;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: background-color 0.2s ease;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
}
.av-accordion__header:hover {
background-color: #f8f9fa;
}
.av-accordion__header:focus {
outline: 2px solid #1f60e0;
outline-offset: -2px;
background-color: #f1f7ff;
}
.av-accordion__header--disabled {
cursor: not-allowed;
color: rgba(12, 12, 12, 0.38);
background-color: rgba(246, 246, 246, 0.38);
}
.av-accordion__header--disabled:hover {
background-color: rgba(246, 246, 246, 0.38);
}
.av-accordion__title {
flex: 1;
margin: 0;
font-weight: inherit;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.av-accordion__icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
flex-shrink: 0;
margin-left: 12px;
}
.av-accordion__icon svg {
width: 100%;
height: 100%;
}
.av-accordion__item--expanded .av-accordion__icon {
transform: rotate(180deg);
}
.av-accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.av-accordion__item--expanded .av-accordion__content {
max-height: 500px; /* Adjust based on content needs */
}
.av-accordion__panel {
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #606f7f;
}
/* Accordion Variations */
.av-accordion--simple {
border: none;
border-radius: 0;
}
.av-accordion--simple .av-accordion__item {
border: none;
border-bottom: 1px solid #e0e0e0;
border-radius: 0;
}
.av-accordion--simple .av-accordion__header {
padding: 12px 0;
}
.av-accordion--simple .av-accordion__panel {
padding: 0 0 12px 0;
}
/* Multiple Accordions Container */
.av-accordions {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Nested Lists in Accordion Content */
.av-accordion__panel ul {
list-style: none;
padding: 0;
margin: 12px 0;
}
.av-accordion__panel ul li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
color: #0c0c0c;
}
.av-accordion__panel ul li:before {
content: '•';
color: #606f7f;
position: absolute;
left: 0;
top: 0;
}
.av-accordion__panel ul li.av-accordion__list-item--checkmark {
padding-left: 24px;
}
.av-accordion__panel ul li.av-accordion__list-item--checkmark:before {
content: '✓';
color: #1f60e0;
font-weight: 700;
}
/* Links in Accordion Content */
.av-accordion__panel a {
color: #1f60e0;
text-decoration: none;
}
.av-accordion__panel a:hover {
text-decoration: underline;
}
/* Buttons in Accordion Content */
.av-accordion__panel .av-button {
margin-top: 12px;
}
/* ===================================================================
* TOOLTIP COMPONENTS
* ===================================================================
*
* Tooltip Variants:
* - Positions: Above, Below, Left, Right
* - Alignments: Center, Left, Right, Top, Bottom
* - States: Show/Hide with smooth transitions
*
* Features:
* - Directional arrows
* - Auto-positioning
* - Consistent dark theme
* - Max width control
*
* Usage: Apply .av-tooltip base class + position modifier
* Example:
Tooltip text
* ===================================================================*/
.av-tooltip {
position: relative;
display: inline-block;
}
.av-tooltip__trigger {
width: 16px;
height: 16px;
border-radius: 50%;
background: #1f60e0;
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: help;
font-size: 12px;
font-weight: bold;
}
.av-tooltip__content {
position: absolute;
background: #123987;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
max-width: 320px;
white-space: nowrap;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.av-tooltip__content::before {
content: '';
position: absolute;
border-style: solid;
border-width: 6px;
}
/* Tooltip positioning */
.av-tooltip--above .av-tooltip__content {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 8px;
}
.av-tooltip--above .av-tooltip__content::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-color: #123987 transparent transparent transparent;
}
.av-tooltip--below .av-tooltip__content {
top: 100%;
left: 50%;
transform: translateX(-50%);
margin-top: 8px;
}
.av-tooltip--below .av-tooltip__content::before {
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-color: transparent transparent #123987 transparent;
}
.av-tooltip--left .av-tooltip__content {
right: 100%;
top: 50%;
transform: translateY(-50%);
margin-right: 8px;
}
.av-tooltip--left .av-tooltip__content::before {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-color: transparent transparent transparent #123987;
}
.av-tooltip--right .av-tooltip__content {
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px;
}
.av-tooltip--right .av-tooltip__content::before {
right: 100%;
top: 50%;
transform: translateY(-50%);
border-color: transparent #123987 transparent transparent;
}
.av-tooltip:hover .av-tooltip__content {
opacity: 1;
visibility: visible;
}
/* ===================================================================
* BADGE COMPONENTS
* ===================================================================
*
* Badge Label System with exact Figma specifications:
* - Colors: Primary (#1f60e0), Neutral (#0c0c0c)
* - Styles: Contained, Outlined, Subtle
* - Sizes: Small (10px), Large (14px)
* - Text Cases: Uppercase, Sentence case
*
* Badge Number System:
* - Colors: Error red (#cc0000) with white text
* - Sizes: Small (8px), Large (16px)
* - States: No digits, Single digit, Multiple digits
*
* Usage:
*
LABEL
*
8
*
* ===================================================================*/
/* === LABEL BADGES === */
.av-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100px; /* Full pill shape */
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-align: center;
white-space: nowrap;
vertical-align: middle;
box-sizing: border-box;
width: fit-content; /* Only as wide as content */
flex-shrink: 0; /* Don't shrink */
}
/* === SIZES === */
.av-badge--small {
padding: 4px 8px; /* More pill-like padding */
font-size: 10px;
line-height: 12px;
letter-spacing: 0.1px;
min-height: 20px;
}
.av-badge--large {
padding: 4px 16px; /* More pill-like padding */
font-size: 14px;
line-height: 20px;
min-height: 28px;
}
/* === TEXT CASES === */
.av-badge--uppercase {
text-transform: uppercase;
letter-spacing: 0.1px;
}
.av-badge--sentence {
text-transform: none;
}
.av-badge--large.av-badge--uppercase {
letter-spacing: 0.1px;
}
.av-badge--large.av-badge--sentence {
letter-spacing: 0.5px;
}
/* === PRIMARY COLOR VARIANTS === */
/* Primary Contained */
.av-badge--primary.av-badge--contained {
background: var(--av-primary-default);
color: #ffffff;
}
/* Primary Outlined */
.av-badge--primary.av-badge--outlined {
background: #eeeff0;
color: var(--av-primary-default);
border: 1px solid var(--av-primary-default);
}
/* Primary Subtle */
.av-badge--primary.av-badge--subtle {
background: #e8e9eb;
color: var(--av-primary-default);
}
/* === NEUTRAL COLOR VARIANTS === */
/* Neutral Contained */
.av-badge--neutral.av-badge--contained {
background: #0c0c0c;
color: #ffffff;
}
/* Neutral Outlined */
.av-badge--neutral.av-badge--outlined {
background: #ffffff;
color: #4a4a4a;
border: 1px solid #606f7f;
}
/* Neutral Subtle */
.av-badge--neutral.av-badge--subtle {
background: #e8e9eb;
color: #606f7f;
}
/* === NUMERICAL BADGES === */
.av-badge-number {
display: inline-flex;
align-items: center;
justify-content: center;
background: #cc0000;
color: #ffffff;
border-radius: 50%;
font-family: 'Roboto', sans-serif;
font-weight: 900;
text-align: center;
vertical-align: middle;
box-sizing: border-box;
font-size: 10px;
line-height: 11px;
letter-spacing: 0.1px;
}
/* Small numerical badge (8px) */
.av-badge-number--small {
width: 8px;
height: 8px;
min-width: 8px;
font-size: 0; /* No text for small size */
}
/* Large numerical badge (16px) */
.av-badge-number--large {
width: 16px;
height: 16px;
min-width: 16px;
}
/* Multiple digits - expands width but keeps height */
.av-badge-number--multiple {
width: fit-content;
min-width: 16px;
padding: 0 2px;
}
/* === STATUS BADGES === */
/*
* Status Badge System with exact Figma specifications:
* - 5 Statuses: Pending, Processing, Warning, Error, Completed
* - 2 Styles: Bold (solid colors), Subtle (light backgrounds)
* - 2 Sizes: Small (10px), Large (14px)
* - Border-radius: 16px, Padding: 2px 6px
*
* Usage:
*
Pending
*
Processing
*/
.av-status-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-family: 'Open Sans', sans-serif;
text-align: center;
white-space: nowrap;
vertical-align: middle;
box-sizing: border-box;
width: fit-content;
flex-shrink: 0;
padding: 2px 6px;
}
/* === STATUS BADGE SIZES === */
.av-status-badge--small {
font-size: 10px;
line-height: 12px;
letter-spacing: 0.1px;
}
.av-status-badge--large {
font-size: 14px;
line-height: 20px;
}
/* === STATUS BADGE STYLES === */
.av-status-badge--bold {
font-weight: 700;
}
.av-status-badge--subtle {
font-weight: 400;
}
/* Adjust letter spacing for large badges */
.av-status-badge--large.av-status-badge--bold {
letter-spacing: 0.5px;
}
.av-status-badge--large.av-status-badge--subtle {
letter-spacing: 0.1px;
}
/* === PENDING STATUS === */
.av-status-badge--pending.av-status-badge--bold {
background-color: #0c0c0c;
color: #ffffff;
}
.av-status-badge--pending.av-status-badge--subtle {
background-color: #e8e9eb;
color: #0c0c0c;
}
/* === PROCESSING STATUS === */
.av-status-badge--processing.av-status-badge--bold {
background-color: #1f60e0;
color: #ffffff;
}
.av-status-badge--processing.av-status-badge--subtle {
background-color: #f1f7ff;
color: #06132d;
}
/* === WARNING STATUS === */
.av-status-badge--warning.av-status-badge--bold {
background-color: #af7604;
color: #000000;
}
.av-status-badge--warning.av-status-badge--subtle {
background-color: #fff3ca;
color: #302103;
}
/* === ERROR STATUS === */
.av-status-badge--error.av-status-badge--bold {
background-color: #cc0000;
color: #ffffff;
}
.av-status-badge--error.av-status-badge--subtle {
background-color: #ffe6e6;
color: #330000;
}
/* === COMPLETED STATUS === */
.av-status-badge--completed.av-status-badge--bold {
background-color: #208000;
color: #ffffff;
}
.av-status-badge--completed.av-status-badge--subtle {
background-color: #ebf8e7;
color: #0d3300;
}
/* ===================================================================
* INPUT FIELD COMPONENT
* ===================================================================
*
* Comprehensive input field system with multiple states and types
* Specs from Figma node-id: 342-17781
*
* States: Enabled, Hovered, Focused, Error, Disabled
* Types: Text (placeholder/populated), Password (masked)
*
* Structure: .av-input > .av-input__label + .av-input__field + .av-input__support
* Usage:
...
*
* ===================================================================
*/
.av-input {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
margin-bottom: 16px;
font-family: 'Open Sans', sans-serif;
}
.av-input__label {
color: #606f7f;
font-size: 14px;
font-weight: 700;
line-height: 20px;
letter-spacing: 0.1px;
text-transform: uppercase;
margin: 0;
}
.av-input__field-wrapper {
position: relative;
width: 100%;
}
.av-input__field {
width: 100%;
height: 44px;
padding: 10px;
border: 1px solid #606f7f;
border-radius: 4px;
background-color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.av-input__field::placeholder {
color: #606f7f;
}
.av-input__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px; /* Adjust for thicker border */
}
.av-input__icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.av-input__icon svg {
width: 100%;
height: 100%;
fill: #1f60e0;
}
.av-input__support {
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0.15px;
color: #0c0c0c;
margin: 0;
}
.av-input__error {
display: flex;
align-items: flex-start;
gap: 6px;
color: #4a4a4a;
}
.av-input__error-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.av-input__error-icon svg {
width: 100%;
height: 100%;
fill: #cc0000;
}
/* ===== STATE VARIATIONS ===== */
/* Hovered State */
.av-input--hovered .av-input__field {
border-color: #1f60e0;
}
/* Focused State */
.av-input--focused .av-input__field {
border: 2px solid #1f60e0;
padding: 9px;
}
/* Error State */
.av-input--error .av-input__field {
border: 2px solid #cc0000;
padding: 9px;
}
.av-input--error .av-input__field:focus {
border: 2px solid #cc0000;
}
/* Disabled State */
.av-input--disabled .av-input__label {
color: rgba(12, 12, 12, 0.38);
}
.av-input--disabled .av-input__field {
background-color: rgba(246, 246, 246, 0.38);
border-color: rgba(12, 12, 12, 0.14);
color: rgba(156, 156, 156, 0.62);
cursor: not-allowed;
}
.av-input--disabled .av-input__field::placeholder {
color: rgba(156, 156, 156, 0.62);
}
.av-input--disabled .av-input__icon svg {
fill: rgba(12, 12, 12, 0.38);
}
.av-input--disabled .av-input__support {
color: rgba(12, 12, 12, 0.38);
}
/* ===== INPUT TYPE VARIATIONS ===== */
/* Password/Masked Input */
.av-input--password .av-input__field {
padding-right: 38px; /* Make room for eye icon */
}
.av-input--password.av-input--focused .av-input__field {
padding-right: 37px; /* Adjust for thicker border */
}
.av-input--password.av-input--error .av-input__field {
padding-right: 37px; /* Adjust for thicker border */
}
/* ===== INTERACTIVE STATES ===== */
.av-input__field:hover {
border-color: #1f60e0;
}
.av-input--disabled .av-input__field:hover {
border-color: rgba(12, 12, 12, 0.14); /* Disabled hover shouldn't change */
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
.av-input {
margin-bottom: 12px;
}
.av-input__label {
font-size: 13px;
}
.av-input__field {
font-size: 15px;
height: 40px;
padding: 8px;
}
.av-input__field:focus {
padding: 7px;
}
.av-input--password .av-input__field {
padding-right: 36px;
}
.av-input--password.av-input--focused .av-input__field,
.av-input--password.av-input--error .av-input__field {
padding-right: 35px;
}
}
@media (max-width: 480px) {
.av-input__field {
height: 38px;
padding: 6px 8px;
}
.av-input__field:focus {
padding: 5px 7px;
}
.av-input--error .av-input__field,
.av-input--focused .av-input__field {
padding: 5px 7px;
}
}
/* ==========================================
13. DROPDOWN FIELD COMPONENT
========================================== */
.av-dropdown {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 1rem;
position: relative;
}
.av-dropdown__label {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 24px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 8px;
order: 2;
}
.av-dropdown__field-wrapper {
position: relative;
width: 100%;
order: 1;
}
.av-dropdown__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 42px 10px 16px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
.av-dropdown__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown__field:hover:not(:disabled):not(.av-dropdown__field--error) {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown__field::placeholder,
.av-dropdown__field option[value=""] {
color: #606f7f;
font-style: normal;
}
.av-dropdown__field:disabled {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border: 1px solid rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-dropdown__icon-button {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
pointer-events: none;
z-index: 2;
}
.av-dropdown__icon-button:hover {
background-color: transparent;
}
.av-dropdown__icon {
width: 12px;
height: 8px;
fill: #606f7f;
transition: transform 0.2s ease;
}
.av-dropdown--focused .av-dropdown__icon {
transform: rotate(180deg);
}
.av-dropdown__field--error {
border: 2px solid #cc0000;
padding: 9px 41px 9px 15px;
}
.av-dropdown--error .av-dropdown__icon {
fill: #cc0000;
}
.av-dropdown__field:disabled + .av-dropdown__icon-button .av-dropdown__icon {
fill: rgba(96, 111, 127, 0.6);
}
.av-dropdown__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #606f7f;
margin-top: 4px;
order: 3;
}
.av-dropdown__error-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #cc0000;
margin-top: 4px;
order: 3;
}
.av-dropdown__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
margin-top: 2px;
}
/* Custom Dropdown for Multi-Select */
.av-dropdown--custom {
position: relative;
}
.av-dropdown__custom-button {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 42px 10px 16px;
box-sizing: border-box;
transition: border-color 0.2s ease;
cursor: pointer;
text-align: left;
display: flex;
align-items: center;
}
.av-dropdown__custom-button:hover:not(:disabled) {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown__custom-button:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown__options {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #ffffff;
border: 1px solid #e0e4e7;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
z-index: 1000;
max-height: 250px;
overflow-y: auto;
margin-top: 2px;
display: none;
}
.av-dropdown--open .av-dropdown__options {
display: block;
}
.av-dropdown--open .av-dropdown__icon {
transform: rotate(180deg);
}
.av-dropdown__option {
display: flex;
align-items: center;
padding: 8px 16px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
cursor: pointer;
transition: background-color 0.2s ease;
min-height: 40px;
box-sizing: border-box;
}
.av-dropdown__option:hover {
background-color: #f8f9fa;
}
.av-dropdown__option:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.av-dropdown__option:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.av-dropdown__option-checkbox {
width: 16px;
height: 16px;
border: 1px solid #606f7f;
border-radius: 2px;
margin-right: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
transition: all 0.2s ease;
}
.av-dropdown__option-checkbox--checked {
background: #1f60e0;
border-color: #1f60e0;
}
.av-dropdown__option-checkbox--checked .av-dropdown__checkbox-icon {
display: block;
}
.av-dropdown__checkbox-icon {
display: none;
width: 12px;
height: 12px;
fill: #ffffff;
}
.av-dropdown__option-text {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dropdown States */
.av-dropdown--enabled {
/* Default state */
}
.av-dropdown--hovered .av-dropdown__field:not(:disabled):not(.av-dropdown__field--error) {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown--hovered .av-dropdown__icon-button {
background-color: transparent;
pointer-events: auto;
}
.av-dropdown--focused .av-dropdown__field {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 15px;
}
.av-dropdown--error .av-dropdown__field {
border: 2px solid #cc0000;
padding: 9px 41px 9px 15px;
}
.av-dropdown--disabled .av-dropdown__field {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border: 1px solid rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-dropdown--disabled .av-dropdown__label {
color: rgba(12, 12, 12, 0.38);
}
.av-dropdown--disabled .av-dropdown__support-text {
color: rgba(12, 12, 12, 0.38);
}
/* Responsive Design */
@media (max-width: 768px) {
.av-dropdown {
margin-bottom: 1.25rem;
}
.av-dropdown__field {
font-size: 16px; /* Prevents zoom on iOS */
height: 48px;
padding: 12px 42px 12px 16px;
}
.av-dropdown__field:focus,
.av-dropdown__field:hover:not(:disabled):not(.av-dropdown__field--error),
.av-dropdown--hovered .av-dropdown__field:not(:disabled):not(.av-dropdown__field--error),
.av-dropdown--focused .av-dropdown__field,
.av-dropdown__field--error {
padding: 11px 41px 11px 15px;
}
.av-dropdown__icon-button {
width: 24px;
height: 24px;
}
}
@media (max-width: 480px) {
.av-dropdown {
margin-bottom: 1.5rem;
}
.av-dropdown__field {
height: 52px;
padding: 14px 42px 14px 16px;
font-size: 16px;
}
.av-dropdown__field:focus,
.av-dropdown__field:hover:not(:disabled):not(.av-dropdown__field--error),
.av-dropdown--hovered .av-dropdown__field:not(:disabled):not(.av-dropdown__field--error),
.av-dropdown--focused .av-dropdown__field,
.av-dropdown__field--error {
padding: 13px 41px 13px 15px;
}
.av-dropdown__icon-button {
width: 24px;
height: 24px;
right: 10px;
}
}
/* ==========================================
14. DATE PICKER FIELD COMPONENT
========================================== */
.av-datepicker {
width: 100%;
margin-bottom: 16px;
position: relative;
display: flex;
flex-direction: column-reverse;
gap: 8px;
}
.av-datepicker__label {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1px;
order: 2;
}
.av-datepicker__field-wrapper {
position: relative;
width: 100%;
order: 1;
}
.av-datepicker__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 42px 10px 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
box-sizing: border-box;
}
.av-datepicker__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 41px 9px 9px;
}
.av-datepicker__field:hover:not(:disabled):not(.av-datepicker__field--error) {
border: 1px solid #1f60e0;
}
.av-datepicker__field::placeholder {
color: #606f7f;
font-style: normal;
}
.av-datepicker__field:disabled {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border: 1px solid rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-datepicker__icon-button {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
background: transparent;
border: none;
cursor: pointer;
padding: 12px;
transition: background-color 0.2s ease;
pointer-events: none;
}
.av-datepicker__icon-button:hover {
background-color: #f1f7ff;
}
.av-datepicker__icon {
width: 18px;
height: 18px;
fill: #1f60e0;
transition: background-color 0.2s ease;
}
.av-datepicker__field--error {
border: 2px solid #cc0000;
padding: 9px 41px 9px 9px;
}
.av-datepicker--error .av-datepicker__icon {
fill: #cc0000;
}
.av-datepicker__field:disabled + .av-datepicker__icon-button .av-datepicker__icon {
fill: rgba(12, 12, 12, 0.38);
}
.av-datepicker__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 8px;
order: 0;
}
.av-datepicker__error-text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 8px;
display: flex;
align-items: flex-start;
gap: 6px;
order: 0;
}
.av-datepicker__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
margin-top: 2px;
}
/* Date Picker States */
.av-datepicker--enabled {
/* Default state */
}
.av-datepicker--hovered .av-datepicker__field:not(:disabled):not(.av-datepicker__field--error) {
border: 1px solid #1f60e0;
}
.av-datepicker--hovered .av-datepicker__icon-button {
background-color: #f1f7ff;
pointer-events: auto;
}
.av-datepicker--focused .av-datepicker__field {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 9px;
}
.av-datepicker--error .av-datepicker__field {
border: 2px solid #cc0000;
padding: 9px 41px 9px 9px;
}
.av-datepicker--disabled .av-datepicker__field {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border: 1px solid rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-datepicker--disabled .av-datepicker__label {
color: rgba(12, 12, 12, 0.38);
}
.av-datepicker--disabled .av-datepicker__support-text {
color: rgba(12, 12, 12, 0.38);
}
/* Responsive Design */
@media (max-width: 768px) {
.av-datepicker {
margin-bottom: 20px;
}
.av-datepicker__field {
font-size: 16px; /* Prevents zoom on iOS */
height: 48px;
padding: 12px 42px 12px 12px;
}
.av-datepicker__field:focus,
.av-datepicker--focused .av-datepicker__field,
.av-datepicker__field--error {
padding: 11px 41px 11px 11px;
}
.av-datepicker__icon-button {
width: 44px;
height: 44px;
}
}
@media (max-width: 480px) {
.av-datepicker {
margin-bottom: 24px;
gap: 10px;
}
.av-datepicker__field {
height: 52px;
padding: 14px 46px 14px 14px;
font-size: 16px;
}
.av-datepicker__field:focus,
.av-datepicker--focused .av-datepicker__field,
.av-datepicker__field--error {
padding: 13px 45px 13px 13px;
}
.av-datepicker__icon-button {
width: 48px;
height: 48px;
right: 2px;
}
.av-datepicker__label {
font-size: 15px;
line-height: 22px;
}
.av-datepicker__support-text,
.av-datepicker__error-text {
font-size: 15px;
line-height: 22px;
margin-top: 10px;
}
}
/* ==========================================
15. CURRENCY FIELD COMPONENT
========================================== */
.av-currency {
display: flex;
flex-direction: column-reverse;
gap: 8px;
margin-bottom: 24px;
}
.av-currency__label {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1px;
order: 2;
}
.av-currency__field-wrapper {
position: relative;
width: 100%;
order: 1;
}
.av-currency__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 42px 10px 32px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
box-sizing: border-box;
}
.av-currency__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 41px 9px 31px;
}
.av-currency__field:hover:not(:disabled):not(.av-currency__field--error) {
border-color: #1f60e0;
}
.av-currency__field::placeholder {
color: #606f7f;
font-style: normal;
}
.av-currency__field:disabled {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border-color: rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-currency__icon-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
transition: background-color 0.2s ease;
pointer-events: none;
}
.av-currency__icon {
width: 11px;
height: 18px;
fill: #606f7f;
flex-shrink: 0;
}
.av-currency__field--error {
border: 2px solid #cc0000;
padding: 9px 41px 9px 31px;
}
.av-currency--error .av-currency__icon {
fill: #606f7f;
}
.av-currency__field:disabled + .av-currency__icon-button .av-currency__icon {
fill: rgba(12, 12, 12, 0.38);
}
.av-currency__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 2px;
order: 0;
}
.av-currency__error-text {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 2px;
order: 0;
}
.av-currency__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
margin-top: 2px;
}
/* State Variations */
.av-currency--enabled {
/* Default state already defined above */
}
.av-currency--hovered .av-currency__field:not(:disabled):not(.av-currency__field--error) {
border-color: #1f60e0;
}
.av-currency--focused .av-currency__field {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 31px;
}
.av-currency--error .av-currency__field {
border: 2px solid #cc0000;
padding: 9px 41px 9px 31px;
}
.av-currency--disabled .av-currency__field {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border-color: rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-currency--disabled .av-currency__label {
color: rgba(12, 12, 12, 0.38);
}
.av-currency--disabled .av-currency__support-text {
color: rgba(12, 12, 12, 0.38);
}
/* Responsive Design */
@media (max-width: 768px) {
.av-currency {
margin-bottom: 20px;
}
.av-currency__field {
font-size: 16px;
padding: 10px 42px 10px 32px;
}
.av-currency__field:focus,
.av-currency--focused .av-currency__field,
.av-currency__field--error {
padding: 9px 41px 9px 31px;
}
}
@media (max-width: 480px) {
.av-currency {
margin-bottom: 16px;
}
.av-currency__field {
font-size: 16px;
padding: 10px 42px 10px 32px;
}
.av-currency__field:focus,
.av-currency--focused .av-currency__field,
.av-currency__field--error {
padding: 9px 41px 9px 31px;
}
.av-currency__label {
font-size: 13px;
}
.av-currency__support-text,
.av-currency__error-text {
font-size: 13px;
}
}
/* ==========================================
16. PERCENTAGE FIELD COMPONENT
========================================== */
.av-percentage {
display: flex;
flex-direction: column-reverse;
gap: 8px;
margin-bottom: 24px;
}
.av-percentage__label {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 20px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1px;
order: 2;
}
.av-percentage__field-wrapper {
position: relative;
width: 100%;
order: 1;
}
.av-percentage__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 42px 10px 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
box-sizing: border-box;
}
.av-percentage__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 41px 9px 9px;
}
.av-percentage__field:hover:not(:disabled):not(.av-percentage__field--error) {
border-color: #1f60e0;
}
.av-percentage__field::placeholder {
color: #606f7f;
font-style: normal;
}
.av-percentage__field:disabled {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border-color: rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-percentage__symbol {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #606f7f;
pointer-events: none;
}
.av-percentage__field--error {
border: 2px solid #cc0000;
padding: 9px 41px 9px 9px;
}
.av-percentage--error .av-percentage__symbol {
color: #606f7f;
}
.av-percentage__field:disabled + .av-percentage__symbol {
color: rgba(12, 12, 12, 0.38);
}
.av-percentage__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 2px;
order: 0;
}
.av-percentage__error-text {
display: flex;
align-items: flex-start;
gap: 6px;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #0c0c0c;
letter-spacing: 0.15px;
margin-top: 2px;
order: 0;
}
.av-percentage__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
margin-top: 2px;
}
/* State Variations */
.av-percentage--enabled {
/* Default state already defined above */
}
.av-percentage--hovered .av-percentage__field:not(:disabled):not(.av-percentage__field--error) {
border-color: #1f60e0;
}
.av-percentage--focused .av-percentage__field {
border: 2px solid #1f60e0;
padding: 9px 41px 9px 9px;
}
.av-percentage--error .av-percentage__field {
border: 2px solid #cc0000;
padding: 9px 41px 9px 9px;
}
.av-percentage--disabled .av-percentage__field {
background-color: rgba(246, 246, 246, 0.38);
color: rgba(12, 12, 12, 0.38);
border-color: rgba(12, 12, 12, 0.14);
cursor: not-allowed;
}
.av-percentage--disabled .av-percentage__label {
color: rgba(12, 12, 12, 0.38);
}
.av-percentage--disabled .av-percentage__support-text {
color: rgba(12, 12, 12, 0.38);
}
/* Responsive Design */
@media (max-width: 768px) {
.av-percentage {
margin-bottom: 20px;
}
.av-percentage__field {
font-size: 16px;
padding: 10px 42px 10px 10px;
}
.av-percentage__field:focus,
.av-percentage--focused .av-percentage__field,
.av-percentage__field--error {
padding: 9px 41px 9px 9px;
}
}
@media (max-width: 480px) {
.av-percentage {
margin-bottom: 16px;
}
.av-percentage__field {
font-size: 16px;
padding: 10px 42px 10px 10px;
}
.av-percentage__field:focus,
.av-percentage--focused .av-percentage__field,
.av-percentage__field--error {
padding: 9px 41px 9px 9px;
}
.av-percentage__label {
font-size: 13px;
}
.av-percentage__support-text,
.av-percentage__error-text {
font-size: 13px;
}
}
/* ==========================================
17. SSN FIELD COMPONENT
========================================== */
.av-ssn {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 1rem;
}
.av-ssn__field-wrapper {
position: relative;
display: flex;
align-items: center;
}
.av-ssn__label {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 24px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 8px;
order: 2;
}
.av-ssn__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 48px 10px 16px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
letter-spacing: 0.05em;
order: 1;
}
.av-ssn__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 47px 9px 15px;
}
.av-ssn__field:hover:not(:disabled):not(.av-ssn__field--error) {
border: 2px solid #1f60e0;
padding: 9px 47px 9px 15px;
}
.av-ssn__field::placeholder {
color: #606f7f;
font-style: normal;
letter-spacing: 0.05em;
}
.av-ssn__field:disabled {
background-color: #f6f6f6;
color: #606f7f;
cursor: not-allowed;
opacity: 0.6;
}
.av-ssn__field--masked {
font-family: 'Open Sans', monospace;
letter-spacing: 0.2em;
}
.av-ssn__toggle-btn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #606f7f;
transition: color 0.2s ease;
z-index: 2;
}
.av-ssn__toggle-btn:hover {
color: #1f60e0;
}
.av-ssn__toggle-btn:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.av-ssn__eye-icon {
width: 16px;
height: 16px;
fill: currentColor;
}
.av-ssn__field--error {
border: 2px solid #cc0000;
padding: 9px 47px 9px 15px;
}
.av-ssn--error .av-ssn__toggle-btn {
color: #cc0000;
}
.av-ssn__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #606f7f;
margin-top: 4px;
order: 3;
}
.av-ssn__error-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #cc0000;
margin-top: 4px;
order: 3;
}
/* SSN States */
.av-ssn--enabled {
/* Default state */
}
.av-ssn--hovered .av-ssn__field:not(:disabled):not(.av-ssn__field--error) {
border: 2px solid #1f60e0;
padding: 9px 47px 9px 15px;
}
.av-ssn--focused .av-ssn__field {
border: 2px solid #1f60e0;
padding: 9px 47px 9px 15px;
}
.av-ssn--error .av-ssn__field {
border: 2px solid #cc0000;
padding: 9px 47px 9px 15px;
}
.av-ssn--disabled .av-ssn__field {
background-color: #f6f6f6;
color: #606f7f;
cursor: not-allowed;
opacity: 0.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.av-ssn__field {
font-size: 16px;
height: 48px;
padding: 12px 48px 12px 16px;
}
.av-ssn__field:focus,
.av-ssn__field:hover:not(:disabled):not(.av-ssn__field--error),
.av-ssn--hovered .av-ssn__field:not(:disabled):not(.av-ssn__field--error),
.av-ssn--focused .av-ssn__field,
.av-ssn__field--error {
padding: 11px 47px 11px 15px;
}
}
@media (max-width: 480px) {
.av-ssn {
margin-bottom: 1.25rem;
}
.av-ssn__field {
height: 52px;
padding: 14px 48px 14px 16px;
font-size: 16px;
}
.av-ssn__field:focus,
.av-ssn__field:hover:not(:disabled):not(.av-ssn__field--error),
.av-ssn--hovered .av-ssn__field:not(:disabled):not(.av-ssn__field--error),
.av-ssn--focused .av-ssn__field,
.av-ssn__field--error {
padding: 13px 47px 13px 15px;
}
}
/* ==========================================
18. PHONE NUMBER FIELD COMPONENT
========================================== */
.av-phone {
display: flex;
flex-direction: column-reverse;
width: 100%;
margin-bottom: 1rem;
}
.av-phone__label {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 24px;
color: #606f7f;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 8px;
order: 2;
}
.av-phone__field {
width: 100%;
height: 44px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #0c0c0c;
background-color: #ffffff;
border: 1px solid #606f7f;
border-radius: 4px;
padding: 10px 16px;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
order: 1;
letter-spacing: 0.05em;
}
.av-phone__field:focus {
outline: none;
border: 2px solid #1f60e0;
padding: 9px 15px;
}
.av-phone__field:hover:not(:disabled):not(.av-phone__field--error) {
border: 2px solid #1f60e0;
padding: 9px 15px;
}
.av-phone__field::placeholder {
color: #606f7f;
font-style: normal;
letter-spacing: normal;
}
.av-phone__field:disabled {
background-color: #f6f6f6;
color: #606f7f;
cursor: not-allowed;
opacity: 0.6;
}
.av-phone__field--error {
border: 2px solid #cc0000;
padding: 9px 15px;
}
.av-phone__support-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #606f7f;
margin-top: 4px;
order: 3;
}
.av-phone__error-text {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #cc0000;
margin-top: 4px;
order: 3;
}
.av-phone__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
}
/* Phone States */
.av-phone--enabled {
/* Default state */
}
.av-phone--hovered .av-phone__field:not(:disabled):not(.av-phone__field--error) {
border: 2px solid #1f60e0;
padding: 9px 15px;
}
.av-phone--focused .av-phone__field {
border: 2px solid #1f60e0;
padding: 9px 15px;
}
.av-phone--error .av-phone__field {
border: 2px solid #cc0000;
padding: 9px 15px;
}
.av-phone--disabled .av-phone__field {
background-color: #f6f6f6;
color: #606f7f;
cursor: not-allowed;
opacity: 0.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.av-phone__field {
font-size: 16px;
height: 48px;
padding: 12px 16px;
}
.av-phone__field:focus,
.av-phone__field:hover:not(:disabled):not(.av-phone__field--error),
.av-phone--hovered .av-phone__field:not(:disabled):not(.av-phone__field--error),
.av-phone--focused .av-phone__field,
.av-phone__field--error {
padding: 11px 15px;
}
}
@media (max-width: 480px) {
.av-phone {
margin-bottom: 1.25rem;
}
.av-phone__field {
height: 52px;
padding: 14px 16px;
font-size: 16px;
}
.av-phone__field:focus,
.av-phone__field:hover:not(:disabled):not(.av-phone__field--error),
.av-phone--hovered .av-phone__field:not(:disabled):not(.av-phone__field--error),
.av-phone--focused .av-phone__field,
.av-phone__field--error {
padding: 13px 15px;
}
}
/* ===================================================================
* BREADCRUMB COMPONENT
* ===================================================================
*
* Navigation breadcrumb with chevron separators
* Specs from Figma node-id: 342-28360
*
* Structure: .av-breadcrumb > .av-breadcrumb__nav > .av-breadcrumb__item
* Usage:
*
* ===================================================================
*/
.av-breadcrumb {
background-color: #f6f6f6;
padding: 16px 40px;
font-family: 'Open Sans', sans-serif;
}
.av-breadcrumb__nav {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.av-breadcrumb__item {
display: flex;
align-items: center;
gap: 8px;
}
.av-breadcrumb__link {
color: #1f60e0;
text-decoration: none;
font-size: 14px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.014px;
transition: color 0.15s ease;
}
.av-breadcrumb__link:hover {
color: #184cb4;
text-decoration: underline;
}
.av-breadcrumb__current {
color: #0c0c0c;
font-size: 14px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.014px;
}
.av-breadcrumb__separator {
width: 12px;
height: 12px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.av-breadcrumb__separator svg {
width: 7px;
height: 11px;
fill: #606f7f;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.av-breadcrumb {
padding: 12px 20px;
}
}
@media (max-width: 480px) {
.av-breadcrumb {
padding: 8px 16px;
}
.av-breadcrumb__nav {
gap: 6px;
}
.av-breadcrumb__item {
gap: 6px;
}
}
/* ===================================================================
* FOOTER COMPONENT
* ===================================================================
*
* Responsive footer with exact Figma specifications:
* - Background: Light gray (#f6f6f6)
* - Typography: Open Sans Regular/Bold, 14px links, 12px disclaimers
* - Colors: #4a4a4a (minor), #606f7f (accent), #bcc3cf (divider)
* - Responsive breakpoints: 1920px, 1440px, 1200px, 1024px, 768px, 390px
* - Logos: LPL Financial and Broker Check positioned side by side
* - Links: Underlined, pipe-separated navigation
*
* Usage:
*
*
* ===================================================================*/
.av-footer {
background-color: #f6f6f6;
padding: 60px 60px 40px 60px;
width: 100%;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
.av-footer__content {
max-width: 1800px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.av-footer__logos {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
}
.av-footer__lpl-logo {
flex: 0 0 auto;
}
.av-footer__lpl-logo img {
height: 20px;
width: auto;
max-width: 149px;
}
.av-footer__broker-logo {
height: 30px;
width: 128px;
flex-shrink: 0;
}
.av-footer__broker-logo img {
height: 100%;
width: 100%;
}
.av-footer__links {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-bottom: 16px;
font-size: 14px;
line-height: 20px;
color: #4a4a4a;
}
.av-footer__link {
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
color: #4a4a4a;
white-space: nowrap;
}
.av-footer__link:hover {
color: #1f60e0;
}
.av-footer__separator {
color: #4a4a4a;
margin: 0;
}
.av-footer__copyright {
font-size: 12px;
line-height: 16px;
color: #4a4a4a;
margin-bottom: 16px;
}
.av-footer__divider {
height: 1px;
background-color: #bcc3cf;
border: none;
margin: 16px 0;
}
.av-footer__disclaimers {
display: flex;
flex-direction: column;
gap: 8px;
}
.av-footer__disclaimer {
font-size: 12px;
line-height: 16px;
color: #606f7f;
margin: 0;
}
.av-footer__disclaimer--bold {
font-weight: 700;
}
.av-footer__disclaimer--regular {
font-weight: 400;
}
.av-footer__disclaimer a {
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
color: inherit;
}
.av-footer__disclaimer a:hover {
color: #1f60e0;
}
/* === RESPONSIVE BREAKPOINTS === */
/* 1440px and down */
@media (max-width: 1440px) {
.av-footer {
padding: 48px 48px 32px 48px;
}
}
/* 1200px and down */
@media (max-width: 1200px) {
.av-footer {
padding: 40px 40px 32px 40px;
}
}
/* 1024px and down */
@media (max-width: 1024px) {
.av-footer {
padding: 32px 32px 24px 32px;
}
.av-footer__links {
font-size: 13px;
gap: 4px;
}
}
/* 768px and down */
@media (max-width: 768px) {
.av-footer {
padding: 24px 24px 20px 24px;
}
.av-footer__links {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.av-footer__link-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
}
/* 480px and down - Stack logos when truly necessary */
@media (max-width: 480px) {
.av-footer__logos {
flex-direction: column;
gap: 12px;
}
}
/* 390px and down */
@media (max-width: 390px) {
.av-footer {
padding: 20px 16px 16px 16px;
}
.av-footer__content {
}
.av-footer__links {
gap: 6px;
}
.av-footer__link-group {
gap: 4px;
}
.av-footer__disclaimer {
font-size: 11px;
line-height: 15px;
}
}
/* ===================================================================
* CHECKBOX COMPONENTS
* ===================================================================
*
* Checkbox Variants:
* - States: Selected, Unselected, Indeterminate
* - Interactive states: Enabled, Hovered, Focused, Pressed, Disabled
* - Roles: Default (blue), Error (red)
*
* Label Checkbox Features:
* - Integrated labels with supporting text
* - Error messaging with icons
* - Proper spacing and alignment
*
* Usage: Apply .av-checkbox base class + state and role modifiers
* ===================================================================*/
.av-checkbox {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
cursor: pointer;
}
.av-checkbox__input {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.av-checkbox__box {
width: 18px;
height: 18px;
border: 2px solid #4a4a4a;
border-radius: 2px;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.av-checkbox__icon {
width: 24px;
height: 24px;
fill: white;
opacity: 0;
transition: opacity 0.2s ease;
}
/* Checkbox States */
.av-checkbox--selected .av-checkbox__box {
background: #1f60e0;
border-color: #1f60e0;
}
.av-checkbox--selected .av-checkbox__icon {
opacity: 1;
}
.av-checkbox--indeterminate .av-checkbox__box {
background: #1f60e0;
border-color: #1f60e0;
}
.av-checkbox--indeterminate .av-checkbox__icon {
opacity: 1;
}
/* Hover States */
.av-checkbox:hover {
background: rgba(31, 96, 224, 0.04);
}
.av-checkbox--error:hover {
background: rgba(204, 0, 0, 0.04);
}
/* Error Role */
.av-checkbox--error .av-checkbox__box {
border-color: #cc0000;
}
.av-checkbox--error.av-checkbox--selected .av-checkbox__box,
.av-checkbox--error.av-checkbox--indeterminate .av-checkbox__box {
background: #cc0000;
border-color: #cc0000;
}
/* Disabled State */
.av-checkbox--disabled {
cursor: not-allowed;
}
.av-checkbox--disabled .av-checkbox__box {
border-color: rgba(12, 12, 12, 0.14);
background: rgba(12, 12, 12, 0.12);
}
.av-checkbox--disabled .av-checkbox__icon {
fill: rgba(12, 12, 12, 0.38);
}
/* Label Checkbox */
.av-checkbox-label {
display: flex;
flex-direction: column;
gap: 8px;
}
.av-checkbox-label__wrapper {
display: flex;
align-items: flex-start;
gap: 8px;
}
.av-checkbox-label__content {
flex: 1;
min-width: 0;
}
.av-checkbox-label__title {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
letter-spacing: 0.1px;
margin: 0;
}
.av-checkbox-label__supporting {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #4a4a4a;
margin: 4px 0 0 0;
}
.av-checkbox-label__error {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 8px;
}
.av-checkbox-label__error-icon {
width: 16px;
height: 16px;
fill: #cc0000;
flex-shrink: 0;
margin-top: 2px;
}
.av-checkbox-label__error-text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
color: #cc0000;
letter-spacing: 0.15px;
margin: 0;
}
.av-checkbox-label--disabled .av-checkbox-label__title,
.av-checkbox-label--disabled .av-checkbox-label__supporting {
color: rgba(12, 12, 12, 0.38);
}
/* ===================================================================
* NOTIFICATION STRIP COMPONENTS
* ===================================================================
*
* Notification Strip Variants:
* - Success: Green background for successful actions
* - Error: Red background for user errors
* - Info: Blue background for informational messages
* - Warning: Yellow background for system warnings
*
* Features:
* - Dismissible with close button
* - Optional link text
* - Expandable variants
* - Consistent padding and typography
*
* Usage: Apply .av-notification base class + type modifier
* Example:
Message
* ===================================================================*/
/* Base notification strip styles */
.av-notification {
/* Layout */
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px;
border-radius: 3px;
position: relative;
/* Typography */
font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #0c0c0c;
/* Transitions */
transition: all 0.2s ease;
}
/* Notification icon container */
.av-notification__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 2px; /* Align with text baseline */
}
/* Notification content */
.av-notification__content {
flex: 1;
min-width: 0;
}
/* Notification message text */
.av-notification__message {
margin: 0;
line-height: 20px;
}
/* Link text within notifications */
.av-notification__link {
color: #1f60e0;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.5px;
transition: color 0.2s ease;
}
.av-notification__link:hover {
color: #1651c7;
text-decoration: underline;
}
/* Close button */
.av-notification__close {
flex-shrink: 0;
width: 24px;
height: 24px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: background-color 0.2s ease;
margin-top: 2px; /* Align with text baseline */
}
.av-notification__close:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.av-notification__close:focus {
outline: 2px solid #1f60e0;
outline-offset: 2px;
}
/* Expand/collapse button */
.av-notification__expand {
flex-shrink: 0;
width: 24px;
height: 24px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition: all 0.2s ease;
margin-top: 2px; /* Align with text baseline */
}
.av-notification__expand:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.av-notification__expand:focus {
outline: 2px solid #1f60e0;
outline-offset: 2px;
}
.av-notification__expand--expanded {
transform: rotate(180deg);
}
/* ===================================================================
* SUCCESS NOTIFICATION STYLES
* ===================================================================*/
.av-notification--success {
background-color: #ebf8e7;
}
.av-notification--success .av-notification__icon svg {
fill: #208000;
}
/* ===================================================================
* ERROR NOTIFICATION STYLES
* ===================================================================*/
.av-notification--error {
background-color: #ffe6e6;
}
.av-notification--error .av-notification__icon svg {
fill: #cc0000;
}
/* ===================================================================
* INFO NOTIFICATION STYLES
* ===================================================================*/
.av-notification--info {
background-color: #f1f7ff;
}
.av-notification--info .av-notification__icon svg {
fill: #1f60e0;
}
/* ===================================================================
* WARNING NOTIFICATION STYLES
* ===================================================================*/
.av-notification--warning {
background-color: #fff3ca;
}
.av-notification--warning .av-notification__icon svg {
fill: #af7604;
}
/* ===================================================================
* EXPANDABLE NOTIFICATION STYLES
* ===================================================================*/
.av-notification--expandable {
flex-direction: column;
}
.av-notification--expandable .av-notification__header {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.av-notification--expandable .av-notification__content {
margin-top: 16px;
padding-left: 40px; /* Align with main content */
display: none;
}
.av-notification--expandable.av-notification--expanded .av-notification__content {
display: block;
}
/* ===================================================================
* NOTIFICATION ANIMATIONS
* ===================================================================*/
.av-notification--dismissing {
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.av-notification--entering {
animation: av-notification-enter 0.3s ease;
}
@keyframes av-notification-enter {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================================================
* RESPONSIVE STYLES
* ===================================================================*/
@media (max-width: 768px) {
.av-notification {
padding: 12px;
gap: 12px;
}
.av-notification--expandable .av-notification__content {
padding-left: 36px;
}
}
/* ===================================================================
* END OF NOTIFICATION COMPONENTS
* ===================================================================*/
/* ============================================================================
* RADIO BUTTON COMPONENT
* ============================================================================
*
* Radio buttons for single selection from a group of options
*
* States: selected/unselected
* Interactive States: enabled, hovered, focused, pressed, disabled
*
* Usage:
*
*
*
*
*
* ============================================================================
*/
.av-radio {
position: relative;
display: inline-flex;
align-items: center;
margin: 2px;
}
.av-radio__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin: 0;
pointer-events: none;
}
.av-radio__label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 2px;
position: relative;
min-height: 28px;
}
.av-radio__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border: 2px solid #4a4a4a;
border-radius: 100px;
background: transparent;
transition: all 0.2s ease;
flex-shrink: 0;
}
.av-radio__button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
border-radius: 100px;
background: transparent;
transition: all 0.2s ease;
z-index: -1;
}
.av-radio__button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 100px;
background: var(--av-primary-default);
opacity: 0;
transition: all 0.2s ease;
}
.av-radio__text {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.15px;
color: var(--av-on-surface-main);
transition: color 0.2s ease;
}
/* === SELECTED STATE === */
.av-radio__input:checked + .av-radio__label .av-radio__button {
border-color: var(--av-primary-default);
background: transparent;
}
.av-radio__input:checked + .av-radio__label .av-radio__button::after {
opacity: 1;
}
/* === HOVER STATE === */
.av-radio__label:hover .av-radio__button::before {
background: rgba(12, 12, 12, 0.04);
}
.av-radio__input:checked + .av-radio__label:hover .av-radio__button::before {
background: rgba(31, 96, 224, 0.04);
}
/* === FOCUS STATE === */
.av-radio__input:focus + .av-radio__label .av-radio__button::before {
background: rgba(12, 12, 12, 0.08);
}
.av-radio__input:focus:checked + .av-radio__label .av-radio__button::before {
background: rgba(31, 96, 224, 0.08);
}
/* === PRESSED STATE === */
.av-radio__label:active .av-radio__button::before {
background: rgba(12, 12, 12, 0.08);
}
.av-radio__input:checked + .av-radio__label:active .av-radio__button::before {
background: rgba(31, 96, 224, 0.08);
}
/* === DISABLED STATE === */
.av-radio__input:disabled + .av-radio__label {
cursor: not-allowed;
opacity: 0.6;
}
.av-radio__input:disabled + .av-radio__label .av-radio__button {
border-color: rgba(12, 12, 12, 0.38);
}
.av-radio__input:disabled:checked + .av-radio__label .av-radio__button::after {
background: rgba(12, 12, 12, 0.38);
}
.av-radio__input:disabled + .av-radio__label .av-radio__text {
color: rgba(12, 12, 12, 0.38);
}
.av-radio__input:disabled + .av-radio__label:hover .av-radio__button::before {
background: transparent;
}
/* === GROUP STYLES === */
.av-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.av-radio-group--horizontal {
flex-direction: row;
gap: 24px;
}
.av-radio-group__label {
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.1px;
color: var(--av-on-surface-main);
margin-bottom: 8px;
}
/* === ACCESSIBILITY === */
.av-radio__input:focus-visible + .av-radio__label .av-radio__button {
outline: 2px solid var(--av-primary-default);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.av-radio__button,
.av-radio__button::before,
.av-radio__button::after,
.av-radio__text {
transition: none;
}
}
@media (prefers-contrast: high) {
.av-radio__button {
border-width: 3px;
}
.av-radio__input:checked + .av-radio__label .av-radio__button {
border-color: var(--av-primary-default);
}
}
/* ============================================================================
* LOADING COMPONENTS
* ============================================================================
*/
/* Base loading container */
.av-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
font-family: var(--av-font-family);
font-size: 16px;
line-height: 24px;
color: var(--av-on-surface-main);
}
/* Loading spinner container */
.av-loading__spinner {
position: relative;
width: 24px;
height: 24px;
margin-bottom: 8px;
}
/* Loading spinner animation */
.av-loading__spinner-bar {
position: absolute;
width: 4px;
height: 8px;
background-color: var(--av-primary-default);
border-radius: 2px;
animation: av-loading-spin 1.2s linear infinite;
}
/* Loading spinner bars positioned in circle */
.av-loading__spinner-bar:nth-child(1) {
top: 0;
left: 50%;
transform: translateX(-50%);
animation-delay: 0s;
}
.av-loading__spinner-bar:nth-child(2) {
top: 2.5px;
right: 2.5px;
transform: rotate(45deg);
animation-delay: -0.15s;
}
.av-loading__spinner-bar:nth-child(3) {
top: 50%;
right: 0;
transform: translateY(-50%) rotate(90deg);
animation-delay: -0.3s;
}
.av-loading__spinner-bar:nth-child(4) {
bottom: 2.5px;
right: 2.5px;
transform: rotate(135deg);
animation-delay: -0.45s;
}
.av-loading__spinner-bar:nth-child(5) {
bottom: 0;
left: 50%;
transform: translateX(-50%) rotate(180deg);
animation-delay: -0.6s;
}
.av-loading__spinner-bar:nth-child(6) {
bottom: 2.5px;
left: 2.5px;
transform: rotate(225deg);
animation-delay: -0.75s;
}
.av-loading__spinner-bar:nth-child(7) {
top: 50%;
left: 0;
transform: translateY(-50%) rotate(270deg);
animation-delay: -0.9s;
}
.av-loading__spinner-bar:nth-child(8) {
top: 2.5px;
left: 2.5px;
transform: rotate(315deg);
animation-delay: -1.05s;
}
/* Loading spinner keyframes */
@keyframes av-loading-spin {
0% {
opacity: 1;
}
100% {
opacity: 0.3;
}
}
/* Loading text */
.av-loading__text {
font-weight: 400;
color: var(--av-on-surface-main);
text-align: center;
white-space: nowrap;
}
/* === LOADING VARIANTS === */
/* Basic loading - no background */
.av-loading--basic {
background: none;
width: auto;
height: auto;
}
/* Pane loading - white container with shadow */
.av-loading--pane {
background-color: var(--av-surface-default);
border: 1px solid #bbbec5;
border-radius: 5px;
box-shadow:
0px 4px 8px 3px rgba(0, 0, 0, 0.15),
0px 1px 3px 0px rgba(0, 0, 0, 0.3);
width: auto;
min-width: 200px;
}
/* Veil loading - overlay with centered pane */
.av-loading--veil {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(54, 61, 74, 0.6);
padding: 0;
z-index: 1000;
}
.av-loading--veil .av-loading__pane {
background-color: var(--av-surface-default);
border: 1px solid #bbbec5;
border-radius: 5px;
box-shadow:
0px 4px 8px 3px rgba(0, 0, 0, 0.15),
0px 1px 3px 0px rgba(0, 0, 0, 0.3);
padding: 24px;
width: 245px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
/* ============================================================================
* LOADING STATES FOR EXISTING COMPONENTS
* ============================================================================
*/
/* Loading button state (already exists, just documenting) */
.av-button--loading {
position: relative;
color: transparent;
}
.av-button--loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: av-button-loading-spin 1s linear infinite;
color: var(--av-primary-on-default);
}
@keyframes av-button-loading-spin {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}