/**
 * Stat Highlight component styles for filterable components
 * Follows the JPK theme's design system
 */

.filterable-system {
    /* Stat Highlight component styling */
    & .filterable-card[data-type="stat-highlight"] {
        position: relative;
        overflow: hidden;
        padding: var(--spacing-md);
        background: linear-gradient(to bottom, #000000 0%, #181818 100%);
        
        & .card-content {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        & .stat-highlight-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            text-align: center;
            
            .stat-icon {
                width: 47px;
                height: 50px;
                margin: 0px auto var(--spacing-sm);

                img {
                    width: 100%;
                }
            }

            h2 {
                text-align: center;
                margin-bottom: var(--spacing-xs);
            }
            
            & .stat-sub-text {
                color: #ffffff;
                margin-bottom: var(--spacing-md);
                flex-grow: 1;
            }
            
            & .stat-button-container {
                display: flex;
                justify-content: center;
                margin-top: auto;
                
                & .btn {
                    min-width: 150px;
                }
            }
        }
    }
}