/* =====================================================================
   Rally Design System — Banner component
   Figma: https://www.figma.com/design/i8f0m2YjsX2EH6Oe7Je8qK/2-%C2%B7-Rally-%C2%B7-Components-%C2%B7-Web-%C2%B7-In-progress?node-id=10640-4353

   Usage:
     <div class="rally-banner rally-banner--info">
       <i class="rally-banner__icon fas fa-info-circle" aria-hidden="true"></i>
       <div class="rally-banner__body">
         <p class="rally-banner__title">Title text</p>
         <p class="rally-banner__text">Body text</p>
       </div>
     </div>

   Variants:  --info  --success  --warning  --error
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base — layout only; colors come from the variant modifier
   --------------------------------------------------------------------- */
.rally-banner {
    /* scoped color tokens — overridden per variant below */
    --_banner-bg:     transparent;
    --_banner-border: currentColor;
    --_banner-icon:   currentColor;
    --_banner-title:  currentColor;
    --_banner-text:   currentColor;
    --_banner-bullet: currentColor;

    display: flex;
    gap: var(--rally-spacing-s, 8px);
    background-color: var(--_banner-bg);
    border-radius: var(--rally-radius-m, 8px);
    padding: var(--rally-spacing-m, 16px);
    margin: var(--rally-spacing-xs, 4px) 0 var(--rally-spacing-m, 16px);
}

/* ---------------------------------------------------------------------
   Variants
   --------------------------------------------------------------------- */

/* Info — Rally primary blue */
.rally-banner--info {
    --_banner-bg:     #ebebff;
    --_banner-border: #2F2BDC;
    --_banner-icon:   #2F2BDC;
    --_banner-title:  #151515;
    --_banner-text:   #151515;
    --_banner-bullet: rgba(47, 43, 220, 0.35);
}

/* Success — green */
.rally-banner--success {
    --_banner-bg:     #d0f6e1;
    --_banner-border: #19884a;
    --_banner-icon:   #19884a;
    --_banner-title:  #151515;
    --_banner-text:   #151515;
    --_banner-bullet: rgba(25, 136, 74, 0.35);
}

/* Warning — amber */
.rally-banner--warning {
    --_banner-bg:     #fff0cb;
    --_banner-border: #d99a06;
    --_banner-icon:   #d99a06;
    --_banner-title:  #151515;
    --_banner-text:   #151515;
    --_banner-bullet: rgba(217, 154, 6, 0.35);
}

/* Error — Rally error red */
.rally-banner--error {
    --_banner-bg:     #fdd5d3;
    --_banner-border: #be110a;
    --_banner-icon:   #be110a;
    --_banner-title:  #151515;
    --_banner-text:   #151515;
    --_banner-bullet: rgba(190, 17, 10, 0.35);
}

/* ---------------------------------------------------------------------
   Elements
   --------------------------------------------------------------------- */
.rally-banner__icon {
    color: var(--_banner-icon);
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rally-banner__body {
    flex: 1 1 auto;
}

/* Title — bold label at the top of the body */
.rally-banner__title {
    font-family: var(--rally-font-family, 'DM Sans', system-ui, sans-serif);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--_banner-title);
    margin: 0 0 var(--rally-spacing-xs, 4px);
}

/* Text — regular-weight body copy below the title */
.rally-banner__text {
    font-family: var(--rally-font-family, 'DM Sans', system-ui, sans-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--_banner-text);
    margin: 0;
}

/* ---------------------------------------------------------------------
   List — used for password-rules bullet lists inside the banner
   --------------------------------------------------------------------- */
.rally-banner__list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.rally-banner__list li {
    font-family: var(--rally-font-family, 'DM Sans', system-ui, sans-serif);
    font-size: 13px;
    line-height: 20px;
    color: var(--_banner-text);
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Unsatisfied bullet — small dim filled dot */
.rally-banner__list li > i.fas.fa-circle {
    color: var(--_banner-bullet);
    font-size: 6px;
    line-height: 20px;
    transform: translateY(-2px);
}

/* Satisfied state — always green, regardless of banner variant */
.rally-banner__list-item--satisfied {
    color: #19884a;
}

.rally-banner__list-item--satisfied > i.fas.fa-check-circle {
    color: #19884a;
    font-size: 13px;
}