@rhavenside/baseline-ui 1.0.23 → 1.0.24

package/dist/baseline.css

@@ -2889,8 +2889,8 @@ textarea {
   border-color: var(--glass-border-heavy);
 }
 .bl-btn-secondary:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-outline {
@@ -2903,8 +2903,8 @@ textarea {
   border-color: var(--color-accent-light);
 }
 .bl-btn-outline:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-ghost {
@@ -2942,8 +2942,8 @@ textarea {
   border-color: var(--color-success-dark);
 }
 .bl-btn-success:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-warning {
@@ -2956,8 +2956,8 @@ textarea {
   border-color: var(--color-warning-dark);
 }
 .bl-btn-warning:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-error {
@@ -2970,8 +2970,8 @@ textarea {
   border-color: var(--color-error-dark);
 }
 .bl-btn-error:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-info {
@@ -2984,8 +2984,8 @@ textarea {
   border-color: var(--color-info-dark);
 }
 .bl-btn-info:active:not(:disabled):not(.bl-disabled) {
-  transform: translateY(1px);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
+  transform: translateY(0.0625rem);
+  box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
 }
 
 .bl-btn-block {
@@ -2993,6 +2993,60 @@ textarea {
   width: 100%;
 }
 
+@media (max-width: 575.98px) {
+  .bl-btn {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-btn-sm {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-btn-lg {
+    min-height: 3rem;
+    padding: var(--spacing-lg) var(--spacing-xl);
+    font-size: var(--font-size-lg);
+  }
+  .bl-btn-group {
+    flex-direction: column;
+    width: 100%;
+  }
+  .bl-btn-group .bl-btn {
+    width: 100%;
+    border-radius: var(--tech-border-radius-sm);
+    margin-bottom: var(--spacing-xs);
+  }
+  .bl-btn-group .bl-btn:first-child {
+    border-top-left-radius: var(--tech-border-radius-sm);
+    border-top-right-radius: var(--tech-border-radius-sm);
+    border-bottom-left-radius: var(--tech-border-radius-sm);
+  }
+  .bl-btn-group .bl-btn:last-child {
+    border-bottom-left-radius: var(--tech-border-radius-sm);
+    border-bottom-right-radius: var(--tech-border-radius-sm);
+    border-top-right-radius: var(--tech-border-radius-sm);
+    margin-bottom: 0;
+  }
+  .bl-btn-group .bl-btn:not(:first-child):not(:last-child) {
+    border-radius: var(--tech-border-radius-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-btn {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-btn-sm {
+    min-height: 2.25rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+  .bl-btn-lg {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
 .bl-form-group {
   margin-bottom: var(--form-group-margin-bottom);
 }
@@ -3087,7 +3141,7 @@ textarea {
 }
 .bl-select:focus {
   outline: none;
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-accent);
   background-color: var(--glass-bg-medium);
   box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
@@ -3145,7 +3199,7 @@ textarea {
 }
 .bl-select-dropdown .bl-select-toggle:focus {
   outline: none;
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-accent);
   box-shadow: var(--glass-shadow-md), 0 0 0 0.0625rem var(--color-accent);
 }
@@ -3232,7 +3286,7 @@ textarea {
 .bl-input-error:focus,
 .bl-select-error:focus,
 .bl-textarea-error:focus {
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-error);
   border-bottom-width: 0.125rem;
 }
@@ -3245,7 +3299,7 @@ textarea {
 .bl-input-success:focus,
 .bl-select-success:focus,
 .bl-textarea-success:focus {
-  border-width: 2px;
+  border-width: 0.125rem;
   border-color: var(--color-success);
   border-bottom-width: 0.125rem;
 }
@@ -3345,7 +3399,7 @@ textarea {
   left: var(--form-switch-slider-offset);
   bottom: var(--form-switch-slider-offset);
   background: var(--glass-bg-heavy);
-  border: 1px solid var(--glass-border-light);
+  border: 0.0625rem solid var(--glass-border-light);
   border-radius: var(--border-radius-full);
   transition: var(--transition-base);
 }
@@ -3421,6 +3475,87 @@ textarea {
   border-bottom-right-radius: 0;
 }
 
+@media (max-width: 575.98px) {
+  .bl-input,
+  .bl-select,
+  .bl-textarea {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-md);
+    font-size: 1rem;
+  }
+  .bl-form-label {
+    font-size: var(--font-size-base);
+    margin-bottom: var(--spacing-sm);
+  }
+  .bl-checkbox,
+  .bl-radio {
+    min-height: 2.75rem;
+    padding: var(--spacing-sm) 0;
+  }
+  .bl-checkbox input[type=checkbox],
+  .bl-checkbox input[type=radio],
+  .bl-radio input[type=checkbox],
+  .bl-radio input[type=radio] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: var(--spacing-sm);
+  }
+  .bl-switch {
+    min-width: 3.5rem;
+    min-height: 2.25rem;
+  }
+  .bl-file-input {
+    min-height: 2.75rem;
+    padding: var(--spacing-md);
+  }
+  .bl-range {
+    height: 0.5rem;
+  }
+  .bl-range::-webkit-slider-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-range::-moz-range-thumb {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-input-sm,
+  .bl-select-sm {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-input-lg,
+  .bl-select-lg {
+    min-height: 3rem;
+    padding: var(--spacing-lg) var(--spacing-lg);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-input,
+  .bl-select,
+  .bl-textarea {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-checkbox,
+  .bl-radio {
+    min-height: 2.5rem;
+  }
+  .bl-checkbox input[type=checkbox],
+  .bl-checkbox input[type=radio],
+  .bl-radio input[type=checkbox],
+  .bl-radio input[type=radio] {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .bl-switch {
+    min-width: 3rem;
+    min-height: 2rem;
+  }
+  .bl-file-input {
+    min-height: 2.5rem;
+  }
+}
 .bl-card {
   display: flex;
   flex-direction: column;
@@ -3499,6 +3634,34 @@ textarea {
   border-color: var(--glass-border-heavy);
 }
 
+@media (max-width: 575.98px) {
+  .bl-card {
+    border-radius: var(--tech-border-radius-sm);
+  }
+  .bl-card-header {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-body {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-footer {
+    padding: var(--spacing-lg);
+  }
+  .bl-card-title {
+    font-size: var(--font-size-xl);
+  }
+  .bl-card-subtitle {
+    font-size: var(--font-size-base);
+    margin-top: var(--spacing-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-card-header,
+  .bl-card-body,
+  .bl-card-footer {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
 .bl-alert {
   position: relative;
   padding: var(--spacing-md);
@@ -3583,6 +3746,37 @@ textarea {
   line-height: 1;
 }
 
+@media (max-width: 575.98px) {
+  .bl-alert {
+    padding: var(--spacing-lg);
+  }
+  .bl-alert-close {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: var(--spacing-sm);
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+  }
+  .bl-alert-close::before {
+    font-size: var(--font-size-2xl);
+  }
+  .bl-alert-title {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--spacing-sm);
+  }
+  .bl-alert-message {
+    font-size: var(--font-size-base);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-alert {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-alert-close {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+  }
+}
 .bl-badge {
   display: inline-flex;
   align-items: stretch;
@@ -3665,6 +3859,41 @@ textarea {
   padding: var(--spacing-sm) var(--spacing-md);
 }
 
+@media (max-width: 575.98px) {
+  .bl-badge {
+    font-size: var(--font-size-sm);
+  }
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: var(--spacing-sm) var(--spacing-md);
+    min-height: 2rem;
+  }
+  .bl-badge-sm {
+    font-size: var(--font-size-xs);
+  }
+  .bl-badge-sm .bl-badge-label,
+  .bl-badge-sm .bl-badge-value {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    min-height: 1.75rem;
+  }
+  .bl-badge-lg {
+    font-size: var(--font-size-base);
+  }
+  .bl-badge-lg .bl-badge-label,
+  .bl-badge-lg .bl-badge-value {
+    padding: var(--spacing-md) var(--spacing-lg);
+    min-height: 2.5rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-badge {
+    font-size: var(--font-size-xs);
+  }
+  .bl-badge-label,
+  .bl-badge-value {
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
 .bl-modal {
   position: fixed;
   top: 0;
@@ -3683,6 +3912,12 @@ textarea {
 .bl-modal.bl-modal-open {
   display: flex;
 }
+@media (max-width: 575.98px) {
+  .bl-modal {
+    padding: var(--spacing-sm);
+    align-items: flex-end;
+  }
+}
 
 .bl-modal-backdrop {
   position: absolute;
@@ -3711,6 +3946,13 @@ textarea {
   pointer-events: none;
   z-index: 10;
 }
+@media (max-width: 575.98px) {
+  .bl-modal-dialog {
+    max-width: 100%;
+    width: calc(100% - var(--spacing-md) * 2);
+    margin: var(--spacing-sm);
+  }
+}
 @media (min-width: 576px) {
   .bl-modal-dialog {
     max-width: 31.25rem;
@@ -3805,6 +4047,11 @@ textarea {
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
 }
+@media (max-width: 575.98px) {
+  .bl-modal-header {
+    padding: var(--spacing-lg);
+  }
+}
 
 .bl-modal-title {
   margin: 0;
@@ -3835,6 +4082,17 @@ textarea {
   font-weight: var(--font-weight-bold);
   line-height: 1;
 }
+@media (max-width: 575.98px) {
+  .bl-modal-close {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    padding: var(--spacing-sm);
+    margin: calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) calc(var(--spacing-sm) * -1) auto;
+  }
+  .bl-modal-close::before {
+    font-size: var(--font-size-3xl);
+  }
+}
 
 .bl-modal-body {
   position: relative;
@@ -3842,6 +4100,11 @@ textarea {
   padding: var(--spacing-md);
   color: var(--color-text);
 }
+@media (max-width: 575.98px) {
+  .bl-modal-body {
+    padding: var(--spacing-lg);
+  }
+}
 
 .bl-modal-footer {
   display: flex;
@@ -3857,6 +4120,17 @@ textarea {
 .bl-modal-footer > * {
   margin: var(--spacing-xs);
 }
+@media (max-width: 575.98px) {
+  .bl-modal-footer {
+    padding: var(--spacing-lg);
+    flex-direction: column;
+    gap: var(--spacing-sm);
+  }
+  .bl-modal-footer > * {
+    width: 100%;
+    margin: 0;
+  }
+}
 
 @media (min-width: 576px) {
   .bl-modal-sm .bl-modal-dialog {
@@ -4227,6 +4501,36 @@ textarea {
   white-space: nowrap;
 }
 
+@media (max-width: 575.98px) {
+  .bl-dropdown-menu {
+    min-width: 100%;
+    max-width: 100vw;
+    margin: var(--spacing-xs) 0;
+    max-height: 50vh;
+  }
+  .bl-dropdown-item {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-dropdown-header {
+    min-height: 2.5rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-sm);
+  }
+  .bl-dropdown-divider {
+    margin: var(--spacing-sm) 0;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-dropdown-menu {
+    min-width: 12rem;
+  }
+  .bl-dropdown-item {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+}
 .bl-nav {
   display: flex;
   flex-wrap: wrap;
@@ -4405,6 +4709,42 @@ textarea {
   outline-offset: -0.125rem;
 }
 
+@media (max-width: 575.98px) {
+  .bl-nav-horizontal {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    scrollbar-width: thin;
+  }
+  .bl-nav-horizontal::-webkit-scrollbar {
+    height: 0.25rem;
+  }
+  .bl-nav-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+    white-space: nowrap;
+  }
+  .bl-nav-tabs .bl-nav-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+  .bl-page-link {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-sm);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-nav-link {
+    min-height: 2.5rem;
+    padding: var(--spacing-sm) var(--spacing-md);
+  }
+  .bl-nav-tabs .bl-nav-link {
+    min-height: 2.5rem;
+  }
+  .bl-page-link {
+    min-height: 2.5rem;
+  }
+}
 .bl-table {
   width: 100%;
   margin-bottom: var(--spacing-md);
@@ -4552,6 +4892,39 @@ textarea {
     margin-bottom: 0;
   }
 }
+@media (max-width: 575.98px) {
+  .bl-table {
+    font-size: var(--font-size-sm);
+  }
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-xs);
+    font-size: var(--font-size-xs);
+  }
+  .bl-table-head {
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-sm > :not(caption) > * > * {
+    padding: var(--spacing-xs);
+    font-size: 0.625rem;
+  }
+  .bl-table-lg > :not(caption) > * > * {
+    padding: var(--spacing-md) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-caption {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) 0;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-table > :not(caption) > * > * {
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-table-head {
+    font-size: var(--font-size-base);
+  }
+}
 .bl-tooltip {
   position: relative;
   display: inline-block;
@@ -4667,6 +5040,26 @@ textarea {
   clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 20%);
 }
 
+@media (max-width: 575.98px) {
+  .bl-tooltip-content {
+    max-width: 90vw;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-sm);
+  }
+  .bl-tooltip-trigger {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-tooltip-content {
+    max-width: 15rem;
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
 .bl-progress {
   display: flex;
   height: 1rem;
@@ -4722,6 +5115,28 @@ textarea {
   height: 1.5rem;
 }
 
+@media (max-width: 575.98px) {
+  .bl-progress {
+    height: 0.75rem;
+  }
+  .bl-progress-sm {
+    height: 0.625rem;
+  }
+  .bl-progress-lg {
+    height: 1.25rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-progress {
+    height: 0.875rem;
+  }
+  .bl-progress-sm {
+    height: 0.625rem;
+  }
+  .bl-progress-lg {
+    height: 1.375rem;
+  }
+}
 .bl-spinner {
   display: inline-block;
   width: 2rem;
@@ -4827,6 +5242,42 @@ textarea {
   border-width: var(--border-width-base);
 }
 
+@media (max-width: 575.98px) {
+  .bl-spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+  .bl-spinner-sm {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  .bl-spinner-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+  }
+  .bl-spinner-xl {
+    width: 5rem;
+    height: 5rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-spinner {
+    width: 2.25rem;
+    height: 2.25rem;
+  }
+  .bl-spinner-sm {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+  .bl-spinner-lg {
+    width: 3.25rem;
+    height: 3.25rem;
+  }
+  .bl-spinner-xl {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+}
 .bl-sidebar-toggle {
   display: inline-flex;
   align-items: center;
@@ -5334,6 +5785,46 @@ textarea {
   border-color: var(--glass-border-medium);
 }
 
+@media (max-width: 575.98px) {
+  .bl-accordion-header {
+    min-height: 2.75rem;
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-size: var(--font-size-base);
+  }
+  .bl-accordion-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-left: var(--spacing-md);
+  }
+  .bl-accordion-body {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-accordion-body.bl-show {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+  .bl-accordion-item.bl-accordion-open .bl-accordion-body {
+    padding: var(--spacing-md) var(--spacing-lg);
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-accordion-header {
+    min-height: 2.5rem;
+    padding: var(--spacing-md) var(--spacing-md);
+  }
+  .bl-accordion-icon {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+  .bl-accordion-body {
+    padding: var(--spacing-md);
+  }
+  .bl-accordion-body.bl-show {
+    padding: var(--spacing-md);
+  }
+  .bl-accordion-item.bl-accordion-open .bl-accordion-body {
+    padding: var(--spacing-md);
+  }
+}
 .bl-toast-container {
   position: fixed;
   z-index: var(--z-index-toast);
@@ -5618,6 +6109,33 @@ textarea {
   border-left: 0.0625rem dashed var(--glass-border-medium);
 }
 
+@media (max-width: 575.98px) {
+  .bl-divider {
+    margin: var(--spacing-lg) 0;
+  }
+  .bl-divider-text {
+    margin: var(--spacing-lg) 0;
+    font-size: var(--font-size-base);
+  }
+  .bl-divider-text::before {
+    margin-right: var(--spacing-sm);
+  }
+  .bl-divider-text::after {
+    margin-left: var(--spacing-sm);
+  }
+  .bl-divider-vertical {
+    margin: 0 var(--spacing-md);
+    min-height: 2rem;
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-divider {
+    margin: var(--spacing-md) 0;
+  }
+  .bl-divider-text {
+    margin: var(--spacing-md) 0;
+  }
+}
 .bl-avatar {
   display: inline-flex;
   align-items: center;
@@ -5758,6 +6276,36 @@ img ~ .bl-avatar::before {
   border-radius: var(--tech-border-radius-md);
 }
 
+@media (max-width: 575.98px) {
+  .bl-avatar-status {
+    width: 1rem;
+    height: 1rem;
+    border-width: 0.1875rem;
+  }
+  .bl-avatar-status.bl-avatar-status-sm {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-width: 0.125rem;
+  }
+  .bl-avatar-status.bl-avatar-status-lg {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-width: 0.25rem;
+  }
+  .bl-avatar-group .bl-avatar {
+    margin-left: calc(var(--spacing-sm) * -1);
+  }
+  .bl-avatar-group .bl-avatar:hover {
+    transform: translateX(var(--spacing-sm));
+  }
+}
+@media (min-width: 576px) and (max-width: 767.98px) {
+  .bl-avatar-status {
+    width: 0.875rem;
+    height: 0.875rem;
+    border-width: 0.15625rem;
+  }
+}
 .bl-icon {
   display: inline-block;
   font-family: "Baseline Icons";