/* Add this to your home/css/home.css or a new specific CSS file for components */

.skill-pill {
    /* Base styles - always apply */
    display: inline-flex; /* Allows alignment of icon and text */
    align-items: center;
    padding: 0.75rem 1.25rem; /* More generous padding for a better feel */
    font-size: 0.95rem; /* Slightly smaller for density, or keep fs-6 (1rem) */
    font-weight: 500; /* Medium weight for readability */
    border-radius: 50rem; /* Full pill shape */
    cursor: pointer; /* Indicates interactivity */
    white-space: nowrap; /* Prevent text wrapping */
    transition: all 0.2s ease-in-out; /* Smooth transitions for hover effects */

    /* Default state colors (using your theme variables) */
    background-color: #343a40;  /* dark grey */
    border-color:   #343a40;
    color:          #f8f9fa;     /* light text for contrast */
    /* background-color: var(--primary-color);  */
    /* color: var(--light-color);  */
    border: 1px solid var(--primary-color); /* Primary color border to match background */
}

.skill-pill:hover,
.skill-pill.selected { /* Add 'selected' class via JS when a pill is clicked/chosen */
    background-color: #495057;  /* a lighter grey */
    border-color:     #495057;
    color:            #fff;
    /* background-color: var(--primary-color-light); 
    color: var(--primary-color); 
    border-color: var(--primary-color); */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle lift on hover/selected */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Optional: Icon within the pill (if you add an icon, e.g., using Bootstrap Icons) */
.skill-pill i {
    margin-right: 0.5rem; /* Space between icon and text */
    color: var(--light-color); /* White icon color by default */
    transition: color 0.2s ease-in-out;
}

.skill-pill:hover i,
.skill-pill.selected i {
    color: var(--primary-color); /* Match text color on hover/selected */
}